FireFox Padding - Is there a workaround?

[wfernley]

Hi everyone,

I was curious how I can fix the bug with CSS Padding and FireFox. If I specify padding-top: 15px; It works great in IE but FireFox will pad the top and bottom. Is there a way I can only pad the top in FireFox while making it still compatible with IE?

Thanks in advance for your help!

Wes

[Robin_reala]

Include the doctype - it puts it into standards compatible mode and makes it work the same as Firefox.

[wfernley]

Should I specify the site to be like IE in the DOCTYPE?

[wfernley]

I added the doctype but now IE shows the same as FireFox, like you mentioned.

How can I fix the CSS padding problem?

This is the CSS:

.blue_box_boxhead h2 {
background: url(http://www.mysite.com/images/mn_box_hdr_l.gif) no-repeat top left;
margin: 0;
padding: 7px 0px 0px 10px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
height: 29px;
}

[Fotiman]

Can you post the corresponding HTML code as well? Any other styles?

[Fotiman]

I think the problem is that you have specified a height.

padding: 7px 0px 0px 10px;
font-size: 14px;
height: 29px;

So, height - top padding = 22px remaining
22px - font-size = 8px remaining

That 8px is what you think is your bottom padding. At least, I think that's what's happening. Here's a diagram to help explain:

+------------- 
¦````````````^ 
¦````````````¦ 
¦````````````¦ 7px 
¦````````````v 
¦``¦\````¦```^ 
¦``¦`\```¦```¦ 
¦``¦``\``¦```¦ 14px 
¦``¦```\`¦```¦ 
¦``¦````\¦```¦ 
¦````````````¦ 
¦````````````¦ 
¦````````````v 
¦````````````^ 
¦````````````¦ height - padding - font size 
¦````````````¦ 29px - 7px - 14px = 8px 
¦````````````v 
+------------- 

[grandula]

maybe you have the same problem with me..
try to add
p {margin: 0; padding: 10px 0;}
in your style sheet

mozilla have different style to handle <p> than ie

[Light_Gear]

Instead of using --> padding: 7px 0px 0px 10px;

do
padding-left:
padding-right:

I find it works beter with firefox

[Fotiman]

Instead of using --> padding: 7px 0px 0px 10px;

do
padding-left:
padding-right:

I find it works beter with firefox

Can you elaborate? I have never had any problems with the shorthand version.

[DrDoc]

Just to correct a few things: padding is in addition to the height.

So, an element with 100px height and 20px top and bottom padding will have a total height of 140px.

[Fotiman]

What was I thinking?!

padding: 7px 0px 0px 10px;
font-size: 14px;
height: 29px;

So instead, that would look more like this:

+---------------------  
¦````````````^  
¦````````````¦  
¦````````````¦ 7px  
¦````````````v  
¦``¦\````¦```^```````^ 
¦``¦`\```¦```¦```````¦ 
¦``¦``\``¦```¦ 14px `¦ 
¦``¦```\`¦```¦```````¦ 29px  
¦``¦````\¦```¦```````¦  
¦````````````¦```````¦  
¦````````````¦```````¦  
¦````````````v```````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````¦ 
¦````````````````````¦ 
¦````````````````````¦ 
¦````````````````````¦ 
¦````````````````````¦ 
¦````````````````````v 
+---------------------  

[DrDoc]

+---------------------  
¦````````````^  
¦````````````¦  
¦````````````¦ 7px  
¦````````````v  
¦``¦\````¦```^```````^  
¦``¦`\```¦```¦```````¦  
¦``¦``\``¦```¦ 14px `¦  
¦``¦```\`¦```¦```````¦ 29px  
¦``¦````\¦```¦```````¦  
¦````````````¦```````¦  
¦````````````¦```````¦  
¦````````````v```````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````¦  
¦````````````````````v  
¦````````````^  
¦````````````¦  
¦````````````¦ 10px  
¦````````````¦  
¦````````````v  
+---------------------

;)

[Fotiman]

No, the 10px is on the LEFT, not the bottom.

[doodlebee]

Just for the rocord, Firefox isn't the browser you should be trying to "fix". IE is.

Make it right in Firefox (which is a more standards-compliant browser than IE) and then make a conditional comment to fix IE - that's you real culprit! :)

[DrDoc]

Yes, you're right, Foti.

Instead of:
padding: 7px 0px 0px 10px;
font-size: 14px;
height: 29px;

Try:
padding: 7px 0px 0px 10px;
font-size: 14px;
height: 22px;

[wfernley]

Thanks everyone for your replies! Sorry it took me a while to get back to you, I was having PC issues.

I tried your suggestions and by changing the height to 22px it works great in both IE and Firefox.

Thank you again for all your help and suggestions!

Wes

[Kufu]

Generally I fix padding issues like that by adding a padding <div>

Ex:

<div class="main content">
<div class="padding">
Content goes here
</div>
</div>

and then instead of applying the padding to 'main content' apply it to 'padding'.

Anyone else use this method?

[SuzyUK]

kufu..

Anyone else use this method?

frequently... it's called the Box in a Box method of the "box model" hack and is generally the easiest way to get to grips with the Box Model regardless of Quirks or Strict rendering Modes. Is very useful when using container divs for columns that might need to be precisely dimensioned in order to help a layout remain stable.

it can be simplified too in some cases by just using the container div and then padding/margining all the elements inside it, <p>, <hx> etc.. but for ease inserting a secondary (nested) container allows flexibility later even if not used initially

Many CMS/Blog software templates have this built in and though it is often touted by hand coders (me included) as extraneous code it is very useful ;)

Suzy

[Robin_reala]

We use the box-in-a-box setup on a lot of our templates partially because it gives you an easy fix to the box model problem, but also becuase it gives you another element to hang styling off :) Of course, as Suzy says, when I'm coding my own projects I use the minimum HTML and work around it in the CSS. Well, actually, I don't any more - I've decided that I don't care about IE5 any more. But if I did I would.