Weird Collapsing Margin in Chrome

HTML & CSS
1

I just went into Google Chrome - Thank God!! - to check on something for another thread of mine, and to my dismay, my Home Page is broken in Chrome?! :eek:

The 25px margin between the Header and Body is collapsing in Chrome for some unknown reason?!

My website and code is almost done, so it is hard to provide everything here, but below is what I feel is the relevant code…


!-- PAGE HEADER -->
<div id="pageHeader">

	<!-- COMPANY BRANDING -->
	<!-- WELCOME MESSAGE -->
	<!-- TOP MENU -->

</div><!-- End of #HEADER -->

<!-- PAGE BODY -->
<div id="pageBody_Home">



#pageHeader{
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0 0 0 0;
	border-top: 50px solid #F00;
}


/* Wrap Body Components to provide easier way to style Page Body. */
#pageBody_Home{
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 25px 0 0 0;
}

What is going on???

Sincerely,

Debbie

2

Hi Debbie,

You’re gonna need to provide a bit more of your code. I just created a quick test page of the code you provided and I see the 25px margin-top just fine in Chrome version 27.0.1453.94 m on Windows Vista. Could you provide the full HTML and CSS for a page of your site?

3

Unfortunately for a lot of reasons, I can’t just post all of my code even for my Home Page.

But I am willing to provide a little more code if I knew what more to provide?

Maybe some wrapper containers?

Where is Ralph at?! :slight_smile:

Sincerely,

Debbie

4

Is there any chance that the contents of the #pageHeader is/are floated but #pageHeader is not cleared? That’s just a wild guess…:slight_smile:

5

From a quick glance of my code - which is somewhat involved - I don’t see that I’m using Floats on these or any Parent containers, so that wouldn’t apply.

My understanding is that Margins “collapse” - between two Elements - to the smaller one, but I didn’t think that applied to a Margin of zero.

For example…


top_box{
	margin: 0 0 20px 0;
}

bottom_box{
	margin: 30px 0 0 0;
}

In that case, the spacing between the two boxes would be 20px, right?

But in the code I posted, I thought between there is a Bottom Margin of “0” in the Header, and a Top Margin of “25” in the Body, that the spacing would be 25px since the “0” doesn’t count?! :-/

My code works in FireFox, Opera, and Safari, just not Chrome…

Sincerely,

Debbie

6

Your understanding of vertical margins applied to block objects is correct. Floats can appear to cause an “exception” as can a few other things. We haven’t guessed the right one, yet. :slight_smile:

7

Here is a little more code, but I’m not sure what you guys want…


html,
body{
	height: 100%;
}

#pageWrapper{
	position: relative;
	z-index: 0;
	min-height: 100%;
	max-width: 1200px;
	min-width: 842px;
	margin:	0px auto;
	margin-top: -50px;
}

* html #pageWrapper{                        
		height: 100%;
}

#pageInner{
	position: relative;
	z-index: 0;
	width: 100%;
	overflow: hidden;
}

#pageHeader{
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0 0 0 0;
	border-top: 50px solid #F00;
}

#sectionHeading{
	position: relative;
	float: left;
	z-index: 2;
	width: 100%;
}

#pageBody_Home,
#pageBody_Section,
#pageBody_Subsection,
#pageBody_Article{
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 25px 0 0 0;
}

/* And so on... */



<body>
  <div id="pageWrapper" class="clearfix">
    <div id="pageInner">
			
			<!-- PAGE HEADER -->
			<div id="pageHeader">

				<!-- COMPANY BRANDING -->
				<!-- WELCOME MESSAGE -->
				<!-- TOP MENU -->

			</div><!-- End of #HEADER -->
			
			<!-- PAGE BODY -->
			<div id="pageBody_Home">

					<!-- LEFT COLUMN -->
					<div id="pageLeftCol">
							<!-- Today's Topic -->

Hope that helps some, because I am completely stuck on how to fix this Google Chrome issue… :frowning:

Sincerely,

Debbie

8

What we REALLY want is something that demonstrates the problem. A seriously cut-down version of your actual code. Only enough so we can replicate the issue on our PC’s. Starts with <!DOCTYPE…>, ends with </html>, in the middle only stuff necessary to replicate the problem. If it presents the problem in your browser, we should be able to see it, too, and hopefully identify a fix. Ultra basic. Nothing else. That would make us orgasmically happy. :slight_smile:

9

RonPat,

This is sooo strange…

I was trying to put together a working stripped down copy - per your request - and some how when I went back to my original, it started working in Google Chrome?! :-/

I swear that I didn’t change any code…

And since I posted this issue last night, any caching issues should have cleared up when I checked things today.

I am besides myself?!

It is nice to see things working in FireFox, Safari, Opera, and Google Chrome, but it is also a little disconcerting to not know why things are now working in Chrome?! (:

Sincerely,

Debbie

10

Sounds GREAT! Yeah, I’m not too fond of “came clear by magic”, either. But, maybe you fixed it yesterday but the fix didn’t cache until today. That’s a nice consolation prize :slight_smile: You can live with it, can’t you?

Keep the test code that you were constructing in a safe place “just in case” the problem shows up again before you go live.

Cheers and have a great evening!!

11

I’ve had LOTS of caching issues with FireFox, but never between days and reboots. (And since I rarely test with CHROME, I can’t speak to whether there are any caching issues, but again, across days and reboots would seem impossible?!)

Will just have to keep an eye on things, but apparently things are okay…

Thanks,

Debbie