...

View Full Version : IE not respecting margin-top



SRD75
05-21-2012, 02:32 PM
This site (http://boldandbeautiful.doig.com.au)'s logo is part of a header div, which has margin-top set to 15px.

IE does not show this margin.

Do you know why?

_Aerospace_Eng_
05-21-2012, 02:56 PM
I'm not seeing any top margins in your CSS for the logo. It also looks the same to me in IE aside from the fact that the logo is a completely different image.

SRD75
05-21-2012, 03:01 PM
header {
margin-top: 15px;
}

I think you're seeing a cached page in IE.

You helped me out with this site about a week ago (with transparency).

_Aerospace_Eng_
05-21-2012, 03:39 PM
Ahh you were right. I'm seeing the exact same thing in IE9 and Chrome. You may be experiencing collapsing margins: http://reference.sitepoint.com/css/collapsingmargins

SRD75
05-21-2012, 03:55 PM
In an effort to give <header> a 'layout', I gave it a width of 1020px, but this failed to make a difference.

_Aerospace_Eng_
05-22-2012, 04:53 AM
Again the margin appears fine to me in IE. What version of IE are you using? Can you post a screen shot?

SRD75
05-22-2012, 05:05 AM
Using IE8.

http://i112.photobucket.com/albums/n180/SRD001/screenshots/boldandbeautiful.jpg

SRD75
05-22-2012, 05:17 AM
IE8 Developer Tools shows it is following this rule on Line 5 in /wp-content/themes/responsepro/css/style.css (http://boldandbeautiful.doig.com.au/wp-content/themes/responsepro/css/style.css):


*, html, body{padding:0;border:0;margin:0;}

However, below this entry on line 173 is:


header {
margin-top: 15px;
}

Why is IE8 not respecting this second rule?

_Aerospace_Eng_
05-22-2012, 05:56 AM
Remove the white space before your doctype. Also why not use a padding-top instead? It will give you the same result. But I still think you have some collapsing margin issues going on.

SRD75
05-22-2012, 07:15 AM
If the margin is collapsing, then setting a width should give the element a layout, which stops the margin from collapsing.

When I gave the element a width, the symptom remained in IE8.

Does this not imply the cause is not collapsing margins?

_Aerospace_Eng_
05-22-2012, 07:32 AM
This appears to be a bug in IE8. This page explains it. http://www.inventpartners.com/ie8_margin_top_bug

Also you have two <html> tags in your code. Remove the second one. With one of their solutions your markup would look like this

<header>
<div id="header">
<div class="container">
<div class="row">
<div class="seven columns">

<!-- Begin @Core header sitename hook -->
<div id="logo"> <a href="http://boldandbeautiful.doig.com.au/"><img src="http://boldandbeautiful.doig.com.au/files/2012/05/logo.png" alt="logo"></a> </div>
<!-- End @Core header sitename hook -->

</div>
<div id ="register" class="five columns">

<!-- Begin @Core header social icon hook -->

<div id="social">
<div class="icons"> <a href="http://facebook.com" target="_blank" rel="me"><img src="http://boldandbeautiful.doig.com.au/wp-content/themes/responsepro/images/social/default/facebook.png" alt="Facebook" /></a> <a href="http://twitter.com" target="_blank" rel="me"><img src="http://boldandbeautiful.doig.com.au/wp-content/themes/responsepro/images/social/default/twitter.png" alt="Twitter" /></a> <a href="http://plus.google.com" target="_blank" rel="me"><img src="http://boldandbeautiful.doig.com.au/wp-content/themes/responsepro/images/social/default/gplus.png" alt="Gplus" /></a> <a href="http://boldandbeautiful.doig.com.au/feed/" target="_blank"><img src="http://boldandbeautiful.doig.com.au/wp-content/themes/responsepro/images/social/default/rss.png" alt="RSS" /></a> </div>
<!--end icons-->

</div>
<!--end social-->
<!-- End @Core header contact social icon hook -->

</div>
</div>
<!--end row-->
</div>
<div class="container">
<div class="row">
<div class="twelve columns" id="menu">
<div id="nav" class="twelve columns">
<div class="menu-top-menu-container">
<ul id="nav_menu">
<li id="menu-item-2407" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-2407"><a href="http://boldandbeautiful.doig.com.au/">Home</a></li>
<li id="menu-item-2406" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2406"><a href="http://boldandbeautiful.doig.com.au/event.html">The Event</a></li>
<li id="menu-item-2405" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2405"><a href="http://boldandbeautiful.doig.com.au/members.html">Members</a></li>
<li id="menu-item-2404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2404"><a href="http://boldandbeautiful.doig.com.au/corporate-sponsors-and-packages.html">Corporate Sponsors and Packages</a></li>
<li id="menu-item-2403" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2403"><a href="http://boldandbeautiful.doig.com.au/category/gallery/">Gallery</a></li>
<li id="menu-item-2402" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2402"><a href="http://boldandbeautiful.doig.com.au/category/news/">News</a></li>
<li id="menu-item-2435" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2435"><a href="http://boldandbeautiful.doig.com.au/contact-us.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>

and your CSS would be

#header {
margin-top:15px;
}
and then you should remove the margin from your header element. If you rather not add another div then try their other solutions but a top padding of 15px would also give you the same look.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum