Padding-bottom problem in IE5/Win

There is a value for padding-bottom, but IE5/Win gives it a value of 0px

[12inch]

I have a problem with the padding-bottom. I have created a DIV.subhead to which I gave a set of styles. Then I created a DIV.subhead_content to give padding to this DIV. The padding-bottom should be 6px, as well as for the padding-top.

In IE6/Win, Opera, Mozilla, it views ok. But when I view it in IE5/Win, then the padding-border seems to have no value at all. I tried to solve it with a spacer DIV, but that didn't work. I know IE5/Win has problems with inline elements, so I made the A-selector for links a block-level element. But it still doesn't work.

Can anyone shine some light to this dark IE/Win problem.

div.subhead {
margin: 0;
padding: 0;
background-repeat: repeat;
background-image: url('../images/bg_nav.gif');
border-top: 3px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}

div.subhead_content {
padding: 6px 12px;
}

a.nav {
margin: 0;
padding: 0;
border: 1px solid #000;
display: block;
font-weight: bold;
color: #339;
text-decoration: underline;
}

<div class="subhead">
<div class="subhead_content">
<a href="test.html" class="nav">CD</a>
<a href="test.html" class="nav">DVD</a>
</div>
</div>

If I use the following code, then the problem doesn't occur:
<div class="subhead">
<div class="subhead_content">
<a href="test.html" class="nav">CD</a>
</div>
</div>

[aspr1n]

Seem to recollect this is the IE box-model bug.

The general style for a fix is using the IE parsing bug.

checkout: [tantek.com...]

asp

[grahamstewart]

A couple of asides....

Don't use quotes in url('image') - its optional in the CSS spec and I've heard it causes problems for some browsers.

Consider using more shorthand CSS..

e.g.

background-repeat: repeat;
background-image: url('../images/bg_nav.gif');
border-top: 3px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;

could be written as

background: url(../images/bg_nav.gif) repeat;
border: 1px solid #000;
border-top-width: 3px;

There! No real help at all, but at least your code is smaller :)

[12inch]

Thanks for the reply aspr1n, but I don't think it is a box-model bug. Because this bug only occurs when you use a width and padding and/or borders. And I haven't used a width.

[12inch]

Also thanks graham, for the shorter code.
Makes it a lot compacter.

[SuzyUK]

I think this is the same problem as another recent thread [webmasterworld.com] pointed out...msg#12 has a suggestion although it's not yet confirmed that it does actually fix IE5's problem

Suzy

[edited by: SuzyUK at 12:58 pm (utc) on May 8, 2003]

[12inch]

Wow Suzy, thanx!
That was it, it was the underscore that caused the parsing error.

Thanx for the link to the previous thread. From now on I'm gonna put my CSS through the W3C CSS Validator.:)