Safari padding problem

I’m using the following css to create padding within a div element:

#step1box {

padding:10px 21px 15px 25px;
border:1px solid #92A0AC;

This should result in a padding of 15px at the bottom of the div. In fact, it does just that, except in Safari for the Mac. In Mac Safari, there is zero bottom padding. Top, right, and left paddings look fine. There is just no bottom padding. I specify “Mac” Safari because I just downloaded the brand new Safari for PC and the problem does NOT show up in that browser.

When I change the padding to

padding:10px 21px 35px 25px; (changing bottom padding from 15 to 35px)

there is appropriate bottom padding in Mac Safari. However, there is now too much bottom padding in all the other browsers.

Why does Mac Safari bottom padding seem to differ by 20px from all the other browsers? While top, left, and right paddings work just fine?

is there an explanation? A safari hack? Any suggestions would be very much appreciated.


Are you testing in Safari 2.x/Mac or Safari 3 beta/Mac?

We really need to see more code to be able to diagnose that. A link to an example page would be best.

Safari 2.x/Mac is exhibiting the padding issues.

I should point out that since I posted here earlier, I tested a page with ONLY the following code on Safari 2.x/Mac…

<div style=“position:absolute;
padding:10px 21px 15px 25px;
border:1px solid #92A0AC;
font-size:1.1em;” >
blah, blah, blah, yadda, yadda (enough text to create a nice block)

and Safari 2.x/Mac displayed a comfortable 15px bottom-margin as it should. Yet this is exactly the same css that yielded NO bottom margin on my other page. So there must be something else on the page or in the css file that is creating this issue. Unfortunately, the page in question is on an intranet so I can’t post a link here.

I would suspect that there is some other bottom-margin css code that is overriding the intended bottom-margin code. But this can’t be the case because increasing the bottom margin from 15px to 35px solves the problem.

I am currently running a compromise (about 14px too little margin displayed in Safari 2.x/Mac and 6px too much margin displayed on all other browsers). But I’d love to figure out this puzzle because I like it when things make sense.

Obviously I’m in the best position to run tests since i have all the code. And I’ll do so when I get some free play time. But in the meantime, i’m curious to know if anyone has run into anything like this before.


I know that this post is already ancient, but in case anyone is having the same problem and finding this via Google search, I would say…

It’s all about line-height. Set a line height for whatever it is you want to match padding on and that will usually kick all of the browsers into shape.


Hey, thank you for taking the time to post this. I did, in fact, find this ancient post via Google and you solved my problem. Good Karma!

thanks again