Missing margin-top in Safari?

HTML & CSS
1

I am probably overlooking something obvious. I would have thought that I could add some space between the two top elements ( the h1 and teh form) AND .slogan element (DIV) that follows by merely adding margin-top: ( and clear:both; for good measure).

This works fine in FF, but gets ignored in Safari. :confused: Oddly enough if REMOVE the two top elements all together the margin is there! Also, if I add MARGIN-BOTTOM to either floated element then I get the space I wanted; it seems odd that there would be an effect of a previous element’s bottom margin, but the element cant employ a margin-top to do the same thing.

At this point I thought I may have forgotten to close a tag somewhere but, the markup validates…

I think I am over-tired and making a stupid error somewhere… a fresh set of eyes and a wise opinion would be greatly appreciated.

2

Did you mean to post a link?

3

Hi,

It seems that Firefox is treating the display:table (on slogan) as a block formatting context and thus not collapsing the margins.

Display:table on its own doesn’t create a block formatting context so it seems Firefox may be confused as it generates an anonymous display:table-cell which does create block formatting context.

If you change the display:table to inline-block instead (or float) then other browers will observe the margin as inline-block creates a new block formatting context.

Looks like a bug or perhaps a different interpretation of the specs.

As mallory suggested above I always apply a bottom margin to floats to be sure that the margin is applied as some browsers treat clearance differently also where margins are concerned.

4

Answering my own question…

floating div.slogan seems to do the trick, of course I also had to clear:both ul.hNav

:slight_smile: this could come in handy tho

5

I was going full DS60… :slight_smile: and am endeavoring NOT to wrap the two elements if I can achieve the effect w/o it.

  #lgn {float:right; }/* i can get teh desired effect by  adding margin-bottom:20px here */

Anyway, somewhere Paul O’B has an article showing how sometimes a top-margin can slide up under Joe Float. While I’m surprised that the one acting different is Safari (prolly also Chrome then too) and not IE, that they use different rules to deal with floats and top margins doesn’t make my eyespoplikeamosquito

Yeah it wasn’t something that I was expecting… which is why i wanted to know if it was me… or some bizzare bug…

6

It does work when I put margin bottom on the form , instead of div.slogan, I dont know which of the two elements will be the tallest, so it seemed more logical to push with margin top, taht way i would know its THAT specific distance…

If both floats have 3em bottom margin for example, then whoever is lower will still give you 3em between them (whoever they are) and the slogan. If you always want 3em between slogan and whoever is lower.

Would suck though if the screen is allowed to shrink and then one float could sit above another, since you may not want 3em between them if they stack. If that’s the case, the quick and dirty is to wrap the floats in a box and let the box have the bottom margin.

Anyway, somewhere Paul O’B has an article showing how sometimes a top-margin can slide up under Joe Float. While I’m surprised that the one acting different is Safari (prolly also Chrome then too) and not IE, that they use different rules to deal with floats and top margins doesn’t make my eyespoplikeamosquito

7

Margin-tops like to slide up behind people and whack them in the back of the head with a stick. Clearing doesn’t stop this.

…Have you tried swapping to bottom margins? Those are less devious.

As a general rule I’d rather push down than push up. Padding-top on the body instead of margin-top on the body’s first kids, and margin-bottom on the h1 and form to push away the slogan.

8

Stomme! :slight_smile:
I thought I was pushing down. This was my SLEEPY thought process.
The H1 + FORM are floated ( left and right, respectively) at the top of the page, div.slogan clears both and is then pushed down by its margin top.

It does work when I put margin bottom on the form , instead of div.slogan, I dont know which of the two elements will be the tallest, so it seemed more logical to push with margin top, taht way i would know its THAT specific distance…

9

crap… I told you I was exhausted!.. i meant to post the code…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title></title>
		<style type="text/css">
		body, p, blockquote, ul, ol, h1,h2,h3,h4,h5,h6  {margin:0; padding:0;}
		#hed{width:926px; margin:10px auto 0 auto; }
		#logo {float:left; }
		#lgn {float:right; }/* i can get teh desired effect by  adding margin-bottom:20px here */
		.slogan { background:  url(rearview2.jpg) no-repeat left top #444;  width:100%; height:364px; clear:both;   display: table; margin-top: 20px; }
		.slogan>div, .slogan:after { display:inline-block; text-align: center;  }
		.slogan>div{width:100%; color:#fff; font-weight: bold; }
		.slogan:after { content:""; height:inherit; vertical-align: middle; width:0;  }
		#logo a{
			position:relative;
			overflow:hidden;
			display:block;
			zoom:expression(
				runtimeStyle.zoom=1,
				insertAdjacentHTML('beforeEnd','<span class="after"></span>')
			);	
		}
		#logo a:after{
			position:absolute;
			height:inherit;
			width:inherit;
		 	top:0;
			left:0;
			right:0;
			left:0;
			z-index:10;
			content:"";
		}
		/*images and sizes for IR'ed Elements*/
		#logo a{height:60px; width:234px; }
		#logo a:after{ background:url(slumberlandbanner.gif) no-repeat left top;  }
		#lgn p{ float: left; padding-top:60px; margin-top: -1.5em; padding-right:1em}
		#lgn p+p{padding-right:0}
		
		.hNav { overflow:hidden; padding:0; }
		.hNav li { float:left; margin:0; list-style:none;}
		.hNav a {display:block; padding:.6em; text-decoration:none;}
		.hNav li:hover {}
		.hNav a:hover {}
		</style>
	</head>
	<body>
	<div id="hed">	
		<h1 id="logo" ><a href="#">Logo Holder</a></h1>
		<form id="lgn" name="login" action="log.html">
			<p><label>Login <input type="text" name="logins"></label></p>
			<p><label>Passs <input type="text" name="pass"></label></p>
		</form>
		<div class="slogan" >
			<div>
					<p>this is a brand statement<p>
					<p>this is a brand statement<p>
			</div>
		</div>
		<ul class="hNav">
			<li><a href="#">item</a></li>
			<li><a href="#">item</a></li>
			<li><a href="#">item</a></li>
			<li><a href="#">item longer sample item</a></li>
			<li><a href="#">item</a></li>
		</ul>
	</div>	
</body>
</html>

sorry about that…