Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post

    IE not respecting margin-top

    This site'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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Code:
    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).

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    In an effort to give <header> a 'layout', I gave it a width of 1020px, but this failed to make a difference.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Again the margin appears fine to me in IE. What version of IE are you using? Can you post a screen shot?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Using IE8.


  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    IE8 Developer Tools shows it is following this rule on Line 5 in /wp-content/themes/responsepro/css/style.css:

    Code:
    *, html, body{padding:0;border:0;margin:0;}
    However, below this entry on line 173 is:

    Code:
    header {
      margin-top: 15px;
    }
    Why is IE8 not respecting this second rule?

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    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?

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <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
    Code:
    #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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •