IE6 – ul Background Color & Border Missing – Fixed!
So the bug I was working on today had to do with the error messages. In Firefox 2 & 3, and IE7, they show up great! Nice yellow background, red text, red border. Nothing fancy, but it definitely sticks out. IE6 gives me the fancy red text, but no background and no border. So off I go on the hunt to figure out why, oh why IE6 has cursed me so.
During my stalking of the interwebs, I came across the adobe forum and someone who had problems with their disc showing up on their <li> elements. Okay says I, how can I use this to my advantage? I read through the comments and the IE6 background bug strikes me like a brick in the forehead. Of course! I’ve solved THAT one before.
So the simple problem boils down to this code:
<span id=”errorMessage”>
<ul class=”errorMessage”>
<li>Some Error Message Goes Here</li>
</ul>
</span>
At first glance, there’s nothing really wrong here. The span has a display:block on it, so it should be great right? Yeah, not so much. Since IE doesn’t expect that a span would ever be used as a block, an explicit width must be set (the background bug solution). So my CSS now looks like this:
span#errorMessage {
display: block;
width: 590px;
}
Now just to be retentive, I’ve also set the <ul> and <li> elements:
ul.errorMessage {
/* added to correct IE6 error styling */
display: block !important;
display: inline;
}
ul.errorMessage {
display: auto !important;
display: block;
}
So now, my IE6 has some specific settings and my FF and IE browsers completely ignore it, thus solving the problem.
Hope this helps!
Other references to this and similar IE bugs:
Missing Backgrounds Bug
The IE7 CSS Hack | iBloom Studios
IE7 Repaint Bug
