Audiotech Posted January 27, 2010 Share Posted January 27, 2010 I'm working on a site and it looks fine in firefox, safari, and chrome but when I view it in IE the header graphic is hidden. I'm at a complete loss as to what might be wrong or how to fix the issue. Everything else seems to work out just fine. Thanks in advance for any help I can get to resolve this little problem -Carl Here's the site; http://valvetech.byethost14.com/ and here's the css and html snipets that seem to be applicable. /* Undo default HTML styling of common browsers */ a:link, a:visited {text-decoration:none; color:#aaa; font-weight:bold} h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited {text-decoration:none; color:#1c4851} ul, ol {list-style:none} img {border:none} /* root element for background and other base formatting */ body { background: black; color: white; text-align: center; margin: 0; font: normal 11px/15px verdana,serif; } /* wrapper div fir IE and window resize */ #doc { background-color: #500000; width: 950px; height: auto; margin: 10px auto auto auto; border: 1px solid; text-align: left; } /* Header */ #header { height: 95px; width:auto; background: url('img/bg_header.jpg')top; } .logo { width: 366px; border:none; height: 85px; padding: 20px 0px 10px 20px; float: left; display: inline; position: relative } <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Carl's dynamic site v2.3 - Welcome Page</title> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <script type="text/javascript" src="js/iehover.js"></script> <link rel="stylesheet" media="screen" href="stylesheet0.css" type="text/css"/> </head> <body> <div id="doc"><!-- start doc division --> <div id="header"><!-- start header division --> <div class="logo"><!-- start div logo --> <a href="index.html"><img src="img/trans1.gif" alt="my logo"></img></a> </div><!-- end div logo --> <ul id="navbar"><!-- start menu --> <li><a href="index.html">Home</a></li><!-- Menu item 1 --> <li><a href="products.html">Products</a><!-- Menu item 2 --> <ul> <li><a href="vm452.html">Vintage/Modern 452</a></li><!-- sub-item 21 --> <li><a href="crossfire.html">Crossfire</a></li><!-- sub-item 22 --> <li><a href="banshee.html">Banshee 50</a></li><!-- sub-item 23 --> </ul></li> <li><a href="ordering.html">Ordering</a><!-- Menu item 4 --> <ul> <li><a href="#">Inventory</a></li><!-- sub-item 41 --> <li><a href="#">Custom Shop</a></li><!-- sub-item 42 --> <li><a href="#">Dealers</a></li> </ul></li> <li><a href="services.html">Services</a></li><!-- Menu item 3 --> <li><a href="support.html">Support</a></li><!-- Menu item 5 --> <li><a href="contact.html">Contact</a></li><!-- Menu item 6 --> </ul><!-- end div navbar --> </div><!-- end header division --> Quote Link to comment Share on other sites More sharing options...
haku Posted January 27, 2010 Share Posted January 27, 2010 Which IE? Six, seven and eight all act differently, so it's important to state which one you are referring to. But I'm suspecting it's the haslayout bug. Google it. Quote Link to comment Share on other sites More sharing options...
Audiotech Posted January 28, 2010 Author Share Posted January 28, 2010 In my particular case this would be IE6 and IE7. I don't have a clue how the site performs in IE8 as I don't have it nor do any people that I know. With regard to the haslayout bug. I did a ton of research and couldn't find any sort of definitive way to implement a fix. Every page I found, the authors spent something on the order of 10 paragraphs rambling on about the thing without actually stating any solution. Most of them seem to discuss floated images having the problem. However, in my case, the floated logo displays just fine. It's just the single background image in the header. Is there something on the order of "...add this to your css and it'll tell you if you've got the bug" sort of thing? -Carl Quote Link to comment Share on other sites More sharing options...
haku Posted January 28, 2010 Share Posted January 28, 2010 You can install the Internet Explorer Developer Toolbar, and use that to inspect the image. If it says haslayout = -1, then you have the haslayout bug. There is no one single definitive fix for it. Adding zoom:1 sometimes helps, sometimes giving a height or a width, various other things. this page gives some definitive solutions, and usually one of them will work. Quote Link to comment Share on other sites More sharing options...
Audiotech Posted January 29, 2010 Author Share Posted January 29, 2010 OK, I seem to have fixed the glitch. Here's what I did to resolve the problem... In the css file I replaced the following section: #header { height: 95px; width:auto; background: url('img/bg_header.jpg')top; } with this... #header { height: 95px; width:auto; background-image: url(img/bg_header.jpg); background-repeat: repeat-x; } Apparently the "background-repeat:repeat-x;" tag was the wrinkle. Regards; -Carl Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.