[RESOLVED] Image Sprite causes bug in IE

[bulgarian388]

Hi doods,

I have a bit of a bug happening. I have website that has a navigation at the top. The navigation it self is built via sprites with CSS. The bug that happens is with IE, when you mouse over any button the layer bellow the navigation drops by about 30 px. Does anybody know how to fix this?

I will really appreciate any input into this.

Thanks in advance!

[Centauri]

Would need to see the code (complete page) or a link to the page in question - many variables could cause this.

[bulgarian388]

Wow, I'm sorry, I somehow forgot the most import part the topic, the website.

http://www.biofreshsolutions.com/

I feel pretty dumb right now, lol.

[Centauri]

My first suggestion, before I try and set this up locally, is to remove that xml declaration at the start of the page - this will throw IE into quirks mode.

Any particular reason you are identifying the page as xhtml 1.1, when it is being served from the server as text/html ? - personally, I can't see the point of using anything other than html 4.01 doctype.

Another question - why is the whole page a form when there are no form actions? Doesn't seem like a proper use for the form tag to me....

[bulgarian388]

The XML declaration does not appear in IE, it appears in everything else but IE.

Because I've been writing in XHTML 1.1 for a long time. I know that serving it as text/html as opposed to application/xhtml+xml is wrong, but I don't know how to server it that way and still have it function properly (or at all in IE's case). Suggestions appreciated.

As for the form, it is how Visual Studio creates web forms, and I just picked up on that. I personally like it better that way because I've had problems before when retrieving data from a database in a table wrapped by a form that is inline to the rest of content (like halfway through the page), the form would have huge amounts of padding on the top for absolutely no reason what so ever. As usual it is an IE bug. By having the form tag the first one in the page, I completely avoid the bug. And the other part is, I just copy and paste pages and rename them so the form tag just kinda caries over and I leave it alone. As far as I know, it's not breaking standards, so it works just fine.

Thanks for the reply tho. Now do you have any suggestion on the sprite issue that IE has. I hate IE so much. :mad:

[Centauri]

It seems to be due to IE6 not recognising the :after on the navigation ul. Replacing the .navigationLayer ul:after css with an explicit size on the ul seems to fix that .navigationLayer ul {
height: 38px;
display: block;
}


The other gaps that appear between the box tops and the body can be fixed by reducing the font size on the top divs .topTop {
background: url(../images/website/topTop.gif) top center repeat-x;
margin-top: 12px;
font-size: 1px;
}
.footerTopTop {
background: url(../images/website/footerTopTop.gif) top center repeat-x;
margin-top: 12px;
font-size: 1px;
}

[bulgarian388]

Sir, you are a god, thank you very much! :)

I never knew the solution for those gaps was that simple. I've had to write a lot more code in the past to handle those gaps, and the font-size hack just kicks ass.

Thanks again!