Member Avatar for johnnycho

To illustrate the issue, I've created two HTML pages:

http://www.johnnycho.com/firefox_csstest01.html
http://www.johnnycho.com/firefox_csstest02.html

They are both exactly the same, with one exception. On the first page, the div class="topbox" has a padding of 1px. On the second page, the padding has been set to 0.

If you look at these two pages in Firefox 3.5+ on Mac and Windows (including Firefox 5), you'll see that div class="topbox" on the second page suddenly has the same top margin as the div class="bottombox" even though div class="topbox" is specified a top margin of 0. In fact, when I change the top margin of "bottombox" the top margin of "topbox" changes accordingly.

No other browser exhibits this problem. I've tried it on Chrome, Safari, IE8 -- even bumbling ol' IE7 doesn't add that extra margin at the top of div class="topbox".

Is this a well-known issue in Firefox? I've looked on Google and on DaniWeb and I haven't been able to find any mention of this specific issue. And can anyone suggest a solution or workaround for when I don't want any padding in div class="topbox"?

Thank you.

  • 2 Contributors
  • 5 Replies
  • 658 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder
Member Avatar for Arkinder

.floatleftbox is being floated left, which removes it from the normal flow of the page. Also, it's pointless to have display: inline; and float: left; . The float will be the only one taken into account.

The reason this is happening is because of margin: 100px auto; The browser is just compensating. If you remove the float: left; and display: inline; it should display correctly.

Regards
Arkinder

Member Avatar for johnnycho

Thanks for the input, Arkinder. I've been using

display:inline

with floats for years as a

hasLayout

concession for IE6. But I guess since IE6 is now for all intents and purposes defunct, I can probably stop doing that.

The larger question for me is why Firefox is the only browser that "compensates" for the

margin:100px auto;

as you describe it. But I guess I should put that question to Mozilla, not here. In any case, thanks again.

Incidentally, for anyone reading this post in the future, I'm removing the two pages linked above from my server. But for reference I'll post the HTML from one of the pages below. All you have to do is remove

padding:1px;

from

.topbox

and view the page in Firefox 3.5+ to replicate the problem. If you're interested.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 9.6">
	
	<style>
		#wrapper { position:relative; width:980px; margin:0 auto; }
		
		.topbox { position:relative; zoom:1; margin-top:0; padding:1px; background-color:#ffc; }
		.floatleftbox { float:left; width:200px; background-color:green; color:white; }
		.clearboth { clear:both; zoom:1; line-height:1%; font-size:1%; }
		
		.bottombox { width:400px; margin:100px auto; padding:15px; background-color:red; color:white; }
		
	</style>	
</head>
<body>

<div id="wrapper">

	<div class="topbox">
		<div class="floatleftbox">Testing</div>
		<div class="clearboth"></div>
	</div>

	<div class="bottombox">Testing</div>

</div>

</body>
</html>
Member Avatar for Arkinder

I realized this while taking a shower this morning. What Firefox is doing makes sense. div.floatleftbox is being parsed outside of the normal flow of the page, on its own layer so to speak. But this doesn't create a problem, it wouldn't make sense to. However, you have a clear: both; that forces the element below any floated element. After a quick check with the W3C, I was right. ^_^

Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge. This position is where the actual top border edge would have been if the element's 'clear' property had been 'none'.

If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.


The full documentation

Regards
Arkinder

Member Avatar for johnnycho

Thanks, Arkinder. I guess I would then rephrase my question: Why don't ALL browsers do it this way, esp. if it's in the W3C? Why is Firefox the only one?

In any case, I changed margin:100px auto; to margin:0 auto; and that did the trick. Thanks for your help!

Member Avatar for Arkinder

That's a good question, but it definitely shows why Firefox is the official browser of the W3C.

Regards
Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.