I can't seem to fix the 'margin-top' issue for IE7/8 for the horizontal MENU but it works fine on FF3+. I am just assuming if it is working fine on Firefox then FF is right and IE is not (when it comes to standards). I would appreciate any help in this regard. Please visit: http://www.owace.com/SDG and look at the page source (css code is embedded with html) Look at the end of css code #navmenu { margin-top: 65px; }
1) Image map == /FAIL/, divide that up into a UL so that people with images off have something USEFUL. 2) Lose the absolute positioning. 3) Not sure what you hope to accomplish with two image maps and only one image. 4) Do you REALLY need two div and a presentational ALIGN 5) Images for text is usually /FAIL/ as well - you might not get the pretty font you want; Oh well. 6) Paragraphs with breaks? don't use <BR /> to do 7) This is a new page - Tranny doctypes are for supporting old outdated crap, NOT for building new websites. I'm not 100% sure what it is you hope to accomplish, I'm just fairly certain you are doing it ALL WRONG. Though most likely you are seeing a margin-collapse error. Solution? Use padding instead of margin. Since it's the first thing in #container, you should probably pad the top of #container instead of margin-top on #navmenu Really though - you're markup for that page should probably be more along the lines of this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title> Serendipity Design Group </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! Horizontal rules and .jumpto menus should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> Serendipity Design Group <small>Branding Design Development Merchandising</small> <span></span> </h1> <ul id="mainMenu"> <li class="home"><a href="#" class="current">Home<span></span></a></li> <li class="about"><a href="#">About<span></span></a></li> <li class="services"><a href="#">Services<span></span></a></li> <li class="contact"><a href="#">Contact<span></span></a></li> </ul> <div id="content"> <img src="images/leafy.png" alt="floral abstract" class="leadin" /> <div class="postLeadIn"> <h2 class="welcomeTo"> <small>Welcome to</small><br /> SerendipityDesignGroup.ca <span></span> </h2> <p> Serendipity Design Group is a full service brand, design, product development, merchandising and sourcing team for apparel accessories and home products. </p><p> We are the style gurus and can help you simplify and focus your business to win in a competitive environment. </p><p> Our team has extensive experience with the worlds best retailers and we deliver the most up to date market intelligence and the latest trends to your doorstep. </p><p> Our services can be tailored and fully customized to fit your business needs. </p><p> We can work with your existing product line or establish new brand and product direction. </p> <!-- .postLeadIn --> <!-- #content --></div> <div id="footer"> WWW.SERENDIPITYDESIGNGROUP.CA <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Everything else you are doing belongs in the CSS. The empty SPAN's plus 'gilder-levin' image replacement will give search engines and images-off users something meaningful to index or get around the site in, while allowing SOME of your images for text to still be used. Also gives you all sorts of nice hooks for doing things like image rollovers on the menu, something you'd be hard pressed to pull of using some crap image map.
Thanks for your advice the both of you! I know my code is not the cleanest. Image maps were the last thing I wanted to use. I had issues with roll-over css menu in IE (it was fine in FF) so instead of fixing my css code for IE I did the image map and then I noticed the margin issue in IE. Anyways thanks again..I will look at your code and try if I can use a similar for mine.