Css – IE6 border-bottom: 0 & padding CSS issue

bordercssinternet-explorer-6padding

I just encountered a IE6 bug that I don't seem to identify over the net.

Basically this is when the behavior is triggered: a block element has border, on all sides except bottom, and top/bottom padding. and inside it there's another block element.

My entire code is to big to fit in here, but I narrowed it down to this simple example:

<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
    <p>adasasasdas</p>
</div>
Following stuff

Now the thing that goes wrong is that the "Following stuff"'s position (whatever that is), will be altered weirdly. In this case a few pixels to the left.

To disable that weird behavior I can either keep the bottom border, get rid of the padding or make the contained element inline. But I kinda want them both. Before I have to give them up, I wanted to see if there is knowledge about this bug and if there is an alternative fix.

Thanks!

Best Answer

This is a pretty good fix to the bug:

<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
    <p style="font-size:16">adasasasdas</p>&nbsp
</div>
Following stuff

Basically, there has to be some inline text at the end of the div for IE6 to render it correctly. Since the &nbsp added an extra line to the bottom, I changed the font size to 0 in the div, then back to 16 (or whatever you'd normally use) inside the <p>. This has a very minimal effect on the height of the div (about 2 pixels in all major browsers) but it shouldn't be at all noticeable to users. Alternatively, you can try altering the line-height variable to 0% in the div, then back to 100% in the p, but that seemed to change the div's height by a few more pixels than the font-size method when I tried it.

Related Topic