I have a div with a a few paragr’s inside, very simple stuff… div has padding:12px; but IE is ignoring the padding-bottom…
(even if I gave bottom paragr mgn-btm:0 )
code:
#privacy {height:164px; width:882px; overflow:auto; border:solid 3px #ccc; background:#FFF; color:#666;
padding: 12px; line-height:normal; position:relative; }
<div id="privacy">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
</div>
(why is the gray box for the code so narrow? surely it can be made wider… and it would be good if text in it wrapped…
I am seeing the issue you described in IE8, unable to test in IE9 at the moment.
I believe this is going to be a variant of the many overflow:auto bugs that are found in IE8. If you remove the fixed height and overflow:auto from the parent then the bug is not present.
Looking through James Hopkins’ site I was not able to find the exact bug (I may have overlooked it) but this one seems similar.
To fix IE8 and make it work the same in all other browsers you would need to set a bottom-padding or border on the last child element. You will have to set a class on it since IE8 does not understand :last-child
Here is your code with and without the fix.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
.privacy, [COLOR=Blue].privacy2[/COLOR] {
width: 600px;/*882px;*/
[COLOR=Red]height: 164px;
overflow: auto;[/COLOR]
border: solid 3px #ccc;
background: #FFF;
color: #666;
margin:10px;/*added for test case*/
[COLOR=Red]padding: 12px;[/COLOR]
line-height: normal;
position: relative;
}
p {margin:0 0 12px; background:lime}
/*--- Fix the IE8 Bug ---*/
[B][COLOR=Blue].privacy2[/COLOR][/B] {
[COLOR=Blue]padding: 12px 12px 0;[/COLOR]/*removed bottom padding for test case*/
}
[B][COLOR=Blue]p.last[/COLOR][/B] {
margin-bottom:0;
[COLOR=Blue]border-bottom:12px solid #FFF;[/COLOR]/*or padding-bottom*/
background:cyan;
}
</style>
</head>
<body>
<div class="privacy">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
</div>
<div class="[COLOR=Blue]privacy2[/COLOR]">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
[COLOR=Blue]<p class="last">[/COLOR]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
</div>
</body>
</html>
There is another way to fix this without needing a class on the last child element.
My example above required the extra class because of the background colors I was using on the <p> tags. I was using margins to create visual separation with BG colors.
You can do this with padding only by removing the bottom padding from the parent and setting bottom paddings on the <p>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
#privacy {
width: 600px;/*882px;*/
height: 164px;
overflow: auto;
[COLOR=Blue]padding: 12px 12px 0;[/COLOR][COLOR=DarkGreen]/*fix IE8*/[/COLOR]
background: #FFF;
border: solid 3px #ccc;
}
#privacy p {
[COLOR=Blue]margin: 0;[/COLOR]
[COLOR=Blue]padding: 0 0 12px;[/COLOR][COLOR=DarkGreen]/*fix IE8*/[/COLOR]
color: #666;
}
</style>
</head>
<body>
<div id="privacy">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros.
Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus
ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros.
Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus
ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros.
Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus
ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer.</p>
</div>
</body>
</html>
I have that bug in my personal list of IE8 bugs which came from a similar question in this thread last year. (I’ll add it it to the tips in the reference.)
I knew I had seen that bug once before. Now that you pointed it out, I remember following along with that thread when it was active.
>>I’ll add it it to the tips in the reference
Good idea
I see that James got tied up on the CSS3 project and hasn’t had time to keep the IE8 bug-list updated. He does mention that he will carry on with the IE8 bug updates (even after IE9’s release) so it will be a solid reference.
