Padding and IE

[Mona]

Hi

I'm redesigning the website for where I work. I'm trying to make it work in most browers, but am having trouble with padding.

I have something on my pages where there is a border on the right hand side of my contents section, and a border on the bottom of my top section. I make these two lines intersect by having, for my contents section, the following code.

#contents2{
position: absolute;
width: 56%;
margin-top: 1%;
margin-left: 19%;
padding-top: 13%;
padding-right: 2%;
border-right: 2px solid #000080;
}

The problem is the padding-top of 13% is fine for internet explorer, but in Mozilla, Netscape and Opera the padding-top works fine when set at 7%.

Am I doing this all wrong? The page is not on the internet yet, so I can't show you. Please let me know how to make the padding work in all browsers if possible.

Thanks Mona

 

[Rowan W]

Internet Explorer in most cases is wrong, very wrong. I'm not sure, but this article may help: http://positioniseverything.net/explorer/percentages.html

Microsoft have recently announced they'll fix this particular bug in IE7, so one day in the distant future we won't have to worry about this.

 

[Mona]

The only way I could find to fix the problem was to change padding-top to em instead of a percentage. Now it works in all the browsers, and still works ok when I change the screen resolution.

padding-top: 4.5em

Mona