Welcome to WebmasterWorld Guest from 54.162.19.123

Forum Moderators: not2easy

Message Too Old, No Replies

Padding-bottom problem in IE5/Win

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

     
3:18 pm on May 7, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 25, 2003
posts:73
votes: 0


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>

9:18 pm on May 7, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 18, 2002
posts:161
votes: 0


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

10:52 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


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 :)

9:53 am on May 8, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 25, 2003
posts:73
votes: 0


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.
9:54 am on May 8, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 25, 2003
posts:73
votes: 0


Also thanks graham, for the shorter code.
Makes it a lot compacter.
11:04 am on May 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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]

12:02 pm on May 8, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 25, 2003
posts:73
votes: 0


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.:)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members