Div Border creates Padding Problem in Firefox

**theitalianone** · 08-02-2006, 12:48 AM

I have 2 <div>'s one inside the other. When I put a border around the outer <div> I get unwanted padding in Firefox between the outer <div> and inner <div>. It works fine in IE.

In order to explain this better an example is at the URL below:
http://www.fuse11.com/examples/test.html

The red border of the outer <div> should touch both the blue background of the outer <div> and the green background of the inner <div>.

I have no padding or margins that should create spacing between the border of the outer <div> and the top of the inner <div>. If the border is taken off the extra padding goes away. The source code of the example is very similar to the code of my original file.

I'm at a loss on what the problem is... Thanks,

Anthony

**mburt** · 08-02-2006, 01:02 AM

Whoa....

I have no idea. (This probably confuses me more than you)

**theitalianone** · 08-02-2006, 06:52 AM

I got the solution for anyone who is interested.

It's the padding on your hx and p tags which is creating the space. The reason you're seeing it with the border is because of collapsing margins. Without border or padding, adjacent margins will collapse

Thanks

**Girard Ibanez** · 08-02-2006, 01:04 PM

*{margin:0px; padding:0px}

try this ... I use it as the gobal reset for padding and margins.

**mburt** · 08-02-2006, 08:25 PM

He already has that done

**Girard Ibanez** · 08-02-2006, 09:11 PM

#content {
PADDING-RIGHT: 20px; PADDING-LEFT: 20px; MARGIN: 0px 150px; WIDTH: 300px; BACKGROUND-COLOR: #009966
}
</STYLE>

<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY>
<DIV id=contentContainer>
<DIV id=content>
<H1>“Title” </H1>
<H2>Sub-Title</H2>
<P>Lots of text</P>
<P>and more and more </P></DIV></DIV></BODY></HTML>

Mike, I don't see the

*{margin:0; padding:0}

Something about the * (global reset) that does the trick when using different engine browsers.

He does have margin:0 but that doesn't solve the issue.

**mburt** · 08-02-2006, 10:11 PM

Oops.. Stupid mistake, I missed the asterix. Sorry about that one.

**mburt** · 08-02-2006, 10:12 PM

Also..

Mike, I don't see the

*{margin:0; padding:0}

When using a number like that, you have to say what it is. Whether it's px , em, percentages, elephants, etc. Sometimes browsers don't read "margin:0" right.

^^ My 200th Post

^^

**Girard Ibanez** · 08-02-2006, 11:32 PM

Mike you are correct ... forgot about that ...

It's the * that I was trying to convey.

**mwinter** · 08-02-2006, 11:38 PM

Originally Posted by mburt

*{margin:0; padding:0}

When using a number like that, you have to say what it is. Whether it's px , em, percentages, elephants, etc.

No, you don't. Non-zero length values require units, but zero (0) pixels is exactly the same as zero percent: zero.

Sometimes browsers don't read "margin:0" right.

Not that I've ever seen, and if so, those browsers are broken. A browser has every right (in fact, a duty) to ignore "margin: 10", but not a value of zero.

Mike

Thread: Div Border creates Padding Problem in Firefox

Thread Tools

Search Thread

Div Border creates Padding Problem in Firefox

Bookmarks

Bookmarks

Posting Permissions