Log in

View Full Version : 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.... :eek: 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
*{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
mburt
08-02-2006, 11:55 PM
You should anyway, to make it more clear.
mwinter
08-03-2006, 12:01 AM
You should anyway, to make it more clear.One should make a value of zero more clear by adding a unit to it that neither makes sense nor has any effect upon it at all?

If you want to do so, fine, but please don't suggest that it's either necessary or a good idea.

Mike