CSS Sprite and gap in ie6

[Durnovaria]

Hello

I have been making a web page, using CSS sprites for the first time, using tutorials and adapting the example code. After a colossal amount of fiddling I have got it all working in Firefox, but when I preview it in Internet Explorer 6 (and allow blocked content via the pop-up message), it puts a gap between the header section and the main page body where the text displays.

I presume this is something to do with the sprite image forcing the gap to appear, but I don't know why. I did read something about 'overflow:hidden' causing problems in Internet Explorer, but I have tried various different solutions and it hasn't made a difference.

Before I included the sprite navigation menu, the page all displayed correctly, so the problem with the gap appearing in Internet Explorer 6 must be to do with this sprite menu.


------------------------------

Here is my CSS file (I've included the whole file in case a mistake in a non-navigation section is causing a problem):
.hsg { }
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='page-body.png'); }

ul#topnav {
width:442px;
list-style:none;
height:41px;
position:relative;
left:10px;
top:128px;
}

ul#topnav li {display:inline;}

ul#topnav li a {
height:41px;
float:left;
text-indent:-9999px;
}

ul#topnav li#topnav-1 a {
width:60px;
background:url(navigation-sprite.jpg) no-repeat 0 0; /* X and Y position at 0 */
}

ul#topnav li#topnav-1 a:hover {
background-position:0 -46px; /* Y position -40px for Over instance image */
}
ul#topnav li#topnav-1 a.current {
background-position:0 -46px; /* Y position -40px for Current instance image */
}

ul#topnav li#topnav-2 a {
width:80px;
background:url(navigation-sprite.jpg) no-repeat -60px 0;
}
ul#topnav li#topnav-2 a:hover {
background-position:-60px -46px;
}
ul#topnav li#topnav-2 a.current {
background-position:-60px -46px;
}

ul#topnav li#topnav-3 a {
width:59px;
background:url(navigation-sprite.jpg) no-repeat -141px 0;
}
ul#topnav li#topnav-3 a:hover {
background-position:-141px -46px;
}
ul#topnav li#topnav-3 a.current {
background-position:-141px -46px;
}

ul#topnav li#topnav-4 a {
width:97px;
background:url(navigation-sprite.jpg) no-repeat -200px 0;
}
ul#topnav li#topnav-4 a:hover {
background-position:-200px -46px;
}
ul#topnav li#topnav-4 a.current {
background-position:-200px -46px;
}

ul#topnav li#topnav-5 a {
width:77px;
background:url(navigation-sprite.jpg) no-repeat -297px 0;
}
ul#topnav li#topnav-5 a:hover {
background-position:-297px -46px;
}
ul#topnav li#topnav-5 a.current {
background-position:-297px -46px;
}

ul#topnav li#topnav-6 a {
width:69px;
background:url(navigation-sprite.jpg) no-repeat -374px 0;
}
ul#topnav li#topnav-6 a:hover {
background-position:-374px -46px;
}
ul#topnav li#topnav-6 a.current {
background-position:-374px -46px;
}

body {
background-color: #42633c;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: top center;
margin-top: 0px;
text-align: center;
}

#container {
margin-top: 0px;
margin: 0 auto;
width: 882px;
text-align: left;
position: relative;
}

#header {
background: url(header.jpg);
width: 882px;
height: 169px;
background-repeat: no-repeat;
background-position: top center;
}

#header h1 {
width: 882px;
height: 169px;
font-size: 0px;
color: #000000;
border: none;
margin-bottom: 0;
}

#page-background {
position: absolute;
margin-top: 0;
background: url(page-body.png) top left repeat-y transparent;
_background-image: none;
width: 882px;
display: block;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='page-body.png');
}

#footer {
position: relative;
bottom: 0;
background:#42633c;
background-image: url(footer.jpg);
width: 882px;
height: 128px;
}

#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
letter-spacing: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right:60px;
margin-left:60px;
clear: left;
padding: 0px 0px 0px 0px;
}

#content h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
letter-spacing: 0px;
font-size: 160%;
clear: left;
padding: 0px 0px 0px 0px;
}

----------------------------------------

Here is my code from the HTML page:

<body>
<div id="body">
<div id="container">
<div id="header">
<ul id="topnav">
<li id="topnav-1"><a href="home.html" title="Home">Home</a></li>
<li id="topnav-2"><a href="about.html" title="About Us">About Us</a></li>
<li id="topnav-3"><a href="news.html" title="News">News</a></li>
<li id="topnav-4"><a href="information.html" title="Information">Information</a></li>
<li id="topnav-5"><a href="contact.html" title="Contact">Contact</a></li>
<li id="topnav-6"><a href="links.html" title="Links">Links</a></li>
</ul>
<h1>Page Title</h1>
</div>

<div id="page-background">
<div id="content">
<h2>Page heading</h2>
<p>Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer"></div>
</div>

</div>
</div>
</body>
</html>


-------------------------------------


Also, for some unknown reason, if I set my sprite image size to its correct size (it's 436 pixels wide), it won't display the rollover effect for the last button (Links button), but, if I increase the width to 442 pixels (as shown in CSS above), it works properly. It won't work if set between 436 and 441, but works if set to 442 and above.

Thanks very much if you can advise me on how to get rid of this annoying gap being caused in Internet Explorer 6.

:-)

[edited by: alt131 at 11:17 am (utc) on Dec 6, 2011]
[edit reason] Thread Tidy [/edit]

[Durnovaria]

I forgot to add, there's an annoying blue border appearing round the navigation buttons in Firefox when I preview the page. It doesn't appear in Internet Explorer. The border only affects the button pressed and everything to the left of it, not any buttons to the right.

It doesn't appear until I click on one of my links, then use the back button to go back to the page. There is a blue border around the button that leads off the page to the left, so I presume it's something to do with the CSS text indent that puts it 9999px off the page. Incidentally, as I click on each button, the border appears red until I release the mouse button.

I have read everything I can find on related issues and they all give advice about using the "border:none" element, or to use border="0" in the html's image tag.

I haven't got any image tags in the html, so I can't put anything there. I have tried putting the border:none element in every part of the CSS, in various combinations of places, but nothing makes any difference.

I've no idea what to try next.

[Durnovaria]

Right, I've solved the blue border problem. Just in case it helps anyone else, I solved it by adding this extra section to my CSS file:

ul#topnav li a {
float:left;
outline:none;
overflow:hidden;
}


I found that section as part of a different tutorial, which wasn't present in my example, so I tried it. I presume it's either the outline or overflow element doing the work. Or maybe both?

I'm still stuck with the problem described in my original post though!


:-)

[alt131]

Hi Durnovaria,

Try removing height:169px from #header h1 to resolve the "gap" in ie6.

Can you explain what you mean by "not working" if you reduce the width of the sprite image below 442px a bit more? Did you mean you are seeing a "gap" where the background-image sprite does not fully cover the width of the <a>?

Finally, yes, I expect the border when you activate the link is the outline, but overflow shouldn't be required to remove it as well. It is good practise to try to use the minimum styles required - so have you tried with only outline:none?

[Durnovaria]

Hello and thank you for your reply :-)

Okay I'll give that a try with the height value. That was previously displaying the dimensions of my header image before I got to the stage of getting my image sprite navigation working.

Regarding the "not working" comment, if I set the width of the sprite image to its actual dimension (which is 436 pixels), the last button in the row (the Links button) is dead - i.e. it doesn't show as an active link upon mouse-over, nor does it show any image swap from the sprite image. I don't know if it's actually failing to show the sprite image at all as I'm positioning them over my background image that shows buttons as part of the layout, so it may be displaying no button and I'm just seeing the one that's already part of my background image.

Anyway, if I gradually increase the image width, the final Links button won't start working (and showing mouse-over image swap) until I get to 442 pixels. It'll work at values over that too (I tried it up to 480 pixels just to see).

Okay, I'll try removing overflow from my extra CSS section to see if it still works. I previously tried inserting outline:none everywhere I could think of, but it didn't work at the time.

I'll report back with my findings in case any of this is of help to anyone else.

Thanks again for your help.

:-)