IE8 - padding-bottom on <div> not showing up when scrolled

HTML & CSS
1

http://www.luxtechn.com/tokio/menu_appet.html

if you scroll to the bottom of #menu_contents, there is no padding at the bottom even though a ‘padding-bottom: 30px’ is specified in the .css.

this problem is unique to IE8 and even IE7 has the correct padding at the bottom being shown. does anyone know off the top of their head what is causing this?

thanks :rolleyes:

2

Try using margin-bottom:30px as well.

3

You should keep the padding inside child elements. Alter their box model to force the parents box model behave the way you want.

4

Wow, what a perfect example of what I’m talking about with endless classes and DIV’s wrapping elements for NOTHING. Paragraphs around non-paragraph elements, spans doing B’s job, classes on them for no good reason, clearing DIV’s, total lack of graceful degradation for images off users, jquery bloat for nothing useful, tranny doctype…

Though the core of your problem is the classic “declaring padding on the same element as width and height” which has NEVER worked properly cross browser. As noonope said pad the kids, not the parent wrapper.

Though I would HIGHLY suggest throwing 90% of the markup away as useless/redundant/pointless containers, and getting rid of the fixed-height container with overflow-y given what a train wreck that is… something I would NEVER do in a design in the first place! You’ve basically got 8k of markup doing four and a half K’s job.

5

Hi,

Yes it’s a known IE8 bug and the bottom padding is lost on elements which have scrollbars.

Simplest example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE8 bug</title>
<style>
p {
    margin:1em 0 0;
}
.test {
    width:500px;
    height:200px;
    padding:0 0 100px;
    overflow:scroll;
}
</style>
</head>
<body>
<div class="test">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>

Therefore as others have said above make the space with the last child element instead.

6

there are a lot of things i could have done different, but i guess i was trying to finish pretty quick. for example using sprites for the navi would have been much better, but…

do you have any resources that talk about basic css design principles? just basic stuff like parents, children, margins, paddings. i will be the first to admit i have to get back to the basics even if the output looks how i want it.