Extra padding on DIV tag in Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

Extra padding on DIV tag in Firefox

lateatnight

2:26 am on Sep 15, 2006 (gmt 0)

I have a DIV tag that is giving me grief. Even though I have no top padding on the DIV tag, Firefox is displaying it with what looks like 20px at the top. Works fine in IE. Have double checked that nothing else in my CSS would add any padding.

icantthinkofone

2:45 am on Sep 15, 2006 (gmt 0)

The default margin among browsers is different. It's best just to set all margins and padding to zero. *{margin:0;padding:0} and then put them into each element as needed.

penders

10:04 am on Sep 15, 2006 (gmt 0)

What's inside the DIV?

lateatnight

3:58 am on Sep 16, 2006 (gmt 0)

Thanks, the *{margin:0;padding:0} did the trick. However, instead of my DIV being 380px wide in Firefox, it looks more like 390px. How to pad just what's inside the DIV without affecting anything else?

icantthinkofone

1:03 pm on Sep 16, 2006 (gmt 0)

You pad inside the box by using 'padding'.

Are you saying the padding inside the box is different than in IE? If so, then it's possible you are using IEs broken box model. What doctype are you using?

The Box Model [w3.org]

penders

1:57 pm on Sep 17, 2006 (gmt 0)

How to pad just what's inside the DIV without affecting anything else?

<p>Don't style this paragraph... leave as default</p>
<div id="mydiv">
<p>Pad and style this paragraph</p>
<p>... and this one too.</p>
</div>

div#mydiv p {
padding:1em;
font-size:larger;
color:#f00;
}

This will pad (and style) just the <p> tags that are within the div id="mydiv"

SuzyUK

3:21 pm on Sep 17, 2006 (gmt 0)

I think it sounds like a collapsing margin, hence the removal of them made it look the same.

To contain collapsing margins consistently x-browser in non-positioned elements, usually all that's needed is to add 1px top/bottom padding to the div (or a top/bottom border) - this stops the div margin adjoining with the elements inside it, and stops any collapsing

In all cases, especially floated and positioned elements thi above might not be enough for IE because it sometimes collapses them entirely, to goodness knows where!
(this is what's happening using the example above I think, not sure as I don't know what was inside it)

Rule of thumb for IE, don't rely on the default margins of the <p>, <hx>, <ul>, <form> elements (any really) inside the div, explicitly give them margins.. e.g. p {margin: 1em 0;}

try this for example of difference, then uncomment the p margin to see IE come into line with FF, if you then don't want a top gap you can just remove the margin from the top paragraph.

longwinded perhaps, but a least you know what's generating the "gap" and IE should be generating one too ;)

<style type="text/css" media="screen">
#text {
position:absolute;
top: 0;
left: 0;
width:380px;
height:92px;
background-color: #eee;
padding-left: 5px;
}
/*p {margin: 1em 0;}*/
/*p.topp {margin-top: 0;}*/
</style>
</head>
<body>
<div id="text">
<p class="topp">some text here</p>
<p>some text here</p>
</div>

[edited by: SuzyUK at 7:59 am (utc) on Sep. 19, 2006]