Name that IE6 CSS Bug!
September 19, 2007 8:30 PM Subscribe
Help, CSS bugs! What IE6 bugs are these?
The site looks fine in Firefox, Safari, and IE7. I've searched through the lists of bugs, but I'm not sure what bugs these are classified as, so I'm not sure how really to fix them.
Particularly:
1) why is the navigation spilling onto two lines;
2) why is the background of the text disappearing (I've tried removing the float without resolution)
3) why is the footer not lining up tightly against the bottom of the container?
Thanks in advance!
The site looks fine in Firefox, Safari, and IE7. I've searched through the lists of bugs, but I'm not sure what bugs these are classified as, so I'm not sure how really to fix them.
Particularly:
1) why is the navigation spilling onto two lines;
2) why is the background of the text disappearing (I've tried removing the float without resolution)
3) why is the footer not lining up tightly against the bottom of the container?
Thanks in advance!
I can view thickbox.css in a browser, but the validator doesn't like it. There are minor errors in style.css.
Position Is Everything is a good resource for IE-specific bugs.
posted by kirkaracha at 10:37 PM on September 19, 2007
Position Is Everything is a good resource for IE-specific bugs.
posted by kirkaracha at 10:37 PM on September 19, 2007
Response by poster: Yeah, only styles.css is being used currently. Just didn't know if someone could eyeball the page and say immediately "Oh, this is obviously bug X." The nav is essentially 5 float:left's with an image on the right, and the width of the images adds up, but IE is putting it onto two lines.
posted by gramcracker at 11:18 PM on September 19, 2007
posted by gramcracker at 11:18 PM on September 19, 2007
You can fix the header with a rule such as "#nav img { float: left }". Not sure about the other things.
posted by Rhomboid at 11:30 PM on September 19, 2007
posted by Rhomboid at 11:30 PM on September 19, 2007
I don't have access to IE right now, but I have some ideas.
First of all, read this article.
Try removing any spaces or breaks between the <li>, even if the whole list is in a single line. Sometimes IE adds the space of the breaks/whitespace. If you want to keep each <li> in a single line, you can try this:
Use an id for your footer and specify its margin, padding and height.
Also, in the future, use Reset Reloaded instead of margin and padding = 0 for all the elements. That way you don't have to restyle some elements that need margin and padding, like form inputs, and you have a good base for all the elements.
Hope this helps!
posted by clearlydemon at 12:05 AM on September 20, 2007
First of all, read this article.
Try removing any spaces or breaks between the <li>, even if the whole list is in a single line. Sometimes IE adds the space of the breaks/whitespace. If you want to keep each <li> in a single line, you can try this:
<ul><li>blah</li ><li>blah</li ><li>blah</li></ul>You can fix some weird behaviours by adding "display: relative" to the element, have you tried it for your text container?
Use an id for your footer and specify its margin, padding and height.
Also, in the future, use Reset Reloaded instead of margin and padding = 0 for all the elements. That way you don't have to restyle some elements that need margin and padding, like form inputs, and you have a good base for all the elements.
Hope this helps!
posted by clearlydemon at 12:05 AM on September 20, 2007
This thread is closed to new comments.
This will let you rule out any possible tag mismatches that one browser may be fixing for you one way, but IE fixes for you another.
Step 2: Come back when Step 1 is complete.
posted by alana at 8:51 PM on September 19, 2007