I have links on the top of my home page. Each link has a background image (a bullet) and the text of the link. The div for the text has a left padding of 30px to keep it from landing on top of the bullet in the background image. This is working perfectly on Mac Firefox and Safari, but is not yet working on IE 6. Oddly, the padding is ignored on the first link, but works properly on the other links.
Here's an illustration:
(Note- the illustration says the anomaly is in IE 6 and 7, but it may be only in IE6 at this point - I've been working on this for a day or so.)
I've replicated the anomaly on two small test pages.
http://www.flavorzoom.com/anomaly.html is fine and looks as expected.
http://www.flavorzoom.com/anomaly_b.html has the image for the left-most link ("Home") missing (in IE6).
The only difference between the two files, is a font-family specification for the body:
font-family: Arial, Helvetica, sans-serif;
How can I fix this?
This is a hasLayout
This is a hasLayout issue.
Add display:inline-block; in .selected and in #fz_menuin a
Alternatively, use a list for your navigation.
That fixed it. Thank you
That fixed it. Thank you very much!
Update: it fixed it in IE6
Update: it fixed it in IE6 and Mac FireFox, but broke it in Safari 3, as can be seen in the demo link I posted (which I have now updated) -
Is there a way to address the hasLayout issue that will also work in Safari?
Fixed! I just had to
Fixed! I just had to remove: