Hi again all.
Seems i spend half my time trying to find IE work arounds these days.
The problem i am having is i have a nav menu underneath my header and it 4 of the main browsers are displaying it fine but IE is giving me grief and seems to be adding a few pixels to the header so that the background image is starting again and looks wierd. also my left column seems to be making itself a few pixels thinner in IE i have uploader some screenshots of the issues to show you what i mean.
Here is a firefox screenshot of how it's supposed to look
http://doobeez.com/workshop/ff_screenshot.jpg
and here is what IE is doing to it
http://doobeez.com/workshop/ie_screenshot.jpg
I have validated my code as allways and all its chucking back is text color and background color matches which i allways fix when i'm done with the design and i match bg colors to images for image disabled browsers.
The page is uploaded HERE
Here is my CSS:
and here is the html:Code:@charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; } body{ background: #262525; font-family:"Trebuchet MS", Helvetica, sans-serif; min-width:800px; } ul { text-decoration:none; list-style:none; } #wholewrap{ } #sitewrap{ text-align:left; } #topwrap{ width:100%; background-image:url(../images/top_bg.png); } #topleft{ height:25px; width:135px; float:left; } #topleft p{ margin-left:5px; } #topright{ height:25px; width:135px; float:right; text-align:right; } #topright p{ margin-right:5px; } #topcenter{ height:25px; margin-left:135px; margin-right:135px; text-align:center; } #header{ height:100px; min-width:958px; text-align:left; background-image:url(../images/headerbg.png); } #header_left{ float:left; } #header_right{ float:right; margin-top:2px; } #navbar{ height:25px; width:100%; background-image:url(../images/footer_links_bg.png); } #contentwrap{ width:98%; } #leftcolumn{ width:166px; float:left; left:0; color:#FFF; margin-top:5px; } #leftcolumn p { margin-left:10px; font-weight:bold; } #leftcolumn h3{ color:#fff; background-image:url(../images/left_h1_bg.png); font-family:"Trebuchet MS", Helvetica, sans-serif; font-weight:bold; text-align:left; text-indent:10px; border-bottom:1px solid #000; } #rightcolumn{ width:162px; float:right; right:0; background:#000; color:#FFF; border:2px solid #8B0000; margin-top:5px; } #rightcolumn p { margin-left:5px; } #right_ads{ } #centercolumn{ margin-left:175px; margin-right:177px; margin-top:5px; } #footer{ height:50px; background-image:url(../images/footer_bg.png); bottom:0; clear:both; text-align:center; width:100%; } #footer_links_bar{ height:25px; background-image:url(../images/footer_links_bg.png); bottom:0; clear:both; text-align:center; width:100%; } p.copyright{ padding-top:10px; color:#FFF; } /*******************Start Navmenu*****************/ #navmenuwrap{ } #navmenu { } #navmenu ul{ width:300px; margin:auto; line-height:20px; } #navmenu li{ list-style:none; float:left; background-image:url(../images/button_bg_hover.png); } #navmenu ul li a{ text-align:center; font-family:"Trebuchet MS", Helvetica, sans-serif; font-weight:bold; text-decoration:none; height:25px; width:100px; display:block; color:#FFF; text-shadow:1px 1px 1px #000; } #navmenu ul li a:hover { background-image:url(../images/button_bg.png); } /*******************Left Menu*****************/ #leftmenu{ } #leftmenu ul li a { font-family:"Trebuchet MS", Helvetica, sans-serif; font-weight:bold; list-style:none; text-decoration:none; color:#fff; width:156px; display:block; text-align:left; background-image:url(../images/left_bg.png); line-height:normal; padding-left:5px; padding-right:5px; border-bottom:1px solid #000; border-top:1px solid #000; } #leftmenu ul li a:hover { font-weight:bold; list-style:none; text-decoration:none; color:#FFF; width:156px; display:block; background-image:url(../images/left_bg_hover.png); padding-left:5px; padding-right:5px; } /****************** End left menu************************/ #content{ background:#fff; padding: 5px; text-align:left; } #content img{ margin:5px; border:2px solid #8B0000; } #content h1{ color:#8B0000; background:#2a6da9; text-align:center; } #content h2{ color:#fff; background:#000; text-align:center; } /*start footer links*/ #footer_links_wrap{ margin-top:10px; } #footer_links{ } #footer_links ul{ width:500px; margin:auto; line-height:20px; } #footer_links li{ list-style:none; float:left; background-image:url(../images/button_bg_hover.png); } #footer_links ul li a{ text-align:center; font-family:"Trebuchet MS", Helvetica, sans-serif; font-weight:bold; text-decoration:none; height:25px; width:100px; display:block; color:#FFF; text-shadow:1px 1px 1px #000; } #footer_links ul li a:hover { background-image:url(../images/button_bg.png); } a img { border:none; }
Code:<html> <head> <meta http-equiv="Content-Type" content="text/html charset=utf-8" /> <title>Blog Test | Home</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="wholerap"> <div id="topwrap"> <div id="topleft"> <?php include("includes/top_left.html"); ?> </div><!-- end topleft --> <div id="topright"> <?php include("includes/top_right.html"); ?> </div><!-- end topright --> <div id="topcenter"> <?php include("includes/top_center_text.html"); ?> </div> </div><!-- end topwrap --> <div id="header"> <div id="header_left"> <?php include("includes/logo.html"); ?> </div><!-- end header_left --> <div id="header_right"> <?php include("includes/header_ads.html"); ?> </div><!-- end header_right --> </div><!-- end header --> <div id="navbar"> <?php include("includes/navmenu.html"); ?> </div><!-- end navbar --> <div id="sitewrap"> <div align="center"> <div id="contentwrap"> <div id="leftcolumn"> <?php include("includes/leftmenu.html"); ?> </div><!-- end leftcolumn --> <div id="rightcolumn"> <?php include("includes/right_ads.html"); ?> </div><!-- end rightcolumn --> <div id="centercolumn"> <?php include("includes/homepage.html"); ?> </div><!-- end centercolumn --> </div> <!-- end contentwrap --> </div><!-- end centering div --> </div><!-- end sitewrap --> <div id="footer_links_bar"> <?php include("includes/footer_links.html"); ?> </div><!-- end footer links bar--> <div id="footer"> <?php include("includes/footer.html"); ?> </div><!-- end footer --> </div><!-- end wholerap --> </body> </html>
i have been playing around with this all day trying to fix it as i allways do before i impose my problems on the community and no matter what i change i can not figure this out.
Any help would be greatly appreciated and i thank you in advance for taking the time to look at this.


Reply With Quote
Bookmarks