homepage Welcome to WebmasterWorld Guest from 54.211.180.175
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Padding-bottom problem in IE5/Win
There is a value for padding-bottom, but IE5/Win gives it a value of 0px
12inch




msg:1213536
 3:18 pm on May 7, 2003 (gmt 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>

 

aspr1n




msg:1213537
 9:18 pm on May 7, 2003 (gmt 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

grahamstewart




msg:1213538
 10:52 pm on May 7, 2003 (gmt 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 :)

12inch




msg:1213539
 9:53 am on May 8, 2003 (gmt 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.

12inch




msg:1213540
 9:54 am on May 8, 2003 (gmt 0)

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

SuzyUK




msg:1213541
 11:04 am on May 8, 2003 (gmt 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]

12inch




msg:1213542
 12:02 pm on May 8, 2003 (gmt 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.:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved