SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 bottom margin on float issue

    The problem

    I have a div floated left, applying margin-bottom, and a clearing div beneath it applying margin-top.

    In Firefox, the margins are collapsed, in IE7 they are combined. I've googled for an elegant solution but so far no luck. (Possible solutions I've come across are applying padding instead of margin, creating extra non floated markup and applying the margin to that).

    Demo

    I've created a demo here: http://joshamos.com/css/ie7-float-margin.html

    The gap between the black and red boxes is double in IE7 than in Firefox.

    Forgive me if this exact issue has been addressed previously.

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can you just remove the margin-top on the footer and make the margin-bottom on the header 40px? This has the effect of making the margin between the two boxes a standard 40px on both ie7 and firefox.

    ...maybe I'm over simplifying matters..?

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm actually after the collapsed margin effect (the 20px) due to the way I use them throughout my site.

    I could use an IE specific stylesheet and adjust the margins of one div to emulate collapsing, but it would be just apples if there was a display:inline type of fix out there

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    The top margin collapse on the first container after a float (or in a container) in FF, and other standard compliant browsers think this is Funy , like ninjabiscuit mentioned set margins on floats only

    for demo only
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    	<head>
    		
    		<title>ie7-float-margin</title>	
    		
    		<style type="text/css" media="screen">
    			* {
    				margin: 0;
    				padding: 0;
    			}	
    		
    			#header {
    				float: left;
    				width: 100px;
    				height: 100px;
    				margin-bottom: 20px;
    				background-color: black;
    
    			}
    			
    			#footer {
    				width: 100px;
    				height: 100px;
    				margin:20px 0;
    				background-color:red;
    			}
    			.x{height:0px;background:#0000ff;overflow:hidden;clear:left;}
    		</style>
    		
    		
    	</head>
    	
    	<body>
    		
    		<div id="container">
    			<div id="header">
    
    			
    			</div>
    			<div class="x"></div>
    			<div id="footer">
    				
    			</div>
    		</div>
    		
    	</body>
    </html>
    Last edited by all4nerds; Aug 30, 2007 at 09:27.

  5. #5
    SitePoint Member
    Join Date
    May 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my demo where we are talking about a single div, that's a nice easy solution, but it's really along the same lines as applying padding instead of a margin, or adding extra markup. I'm after something that forces the margins to collapse in IE as it saves a lot of messing around creating custom styles for things that have common margins. I'm starting to think it doesn't exist, but thanks for your help so far though guys.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You can always re arange things a margin bottom ?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>ie7-float-margin</title>
    <style type="text/css" media="screen">
    
    *{margin: 0;padding: 0;}
    
    .header,.footer{width:100px;height:100px;margin-bottom:20px;}
    
    .header {float:left;background:black;}
    
    .footer{clear:left;background:red;}
    
    </style>
    </head>
    <body>
    
    <div id="container">
    
    <div class="header"></div>
    
    <div class="footer"></div>
    <div class="footer"></div>
    <div class="footer"></div>
    <div class="footer"></div>
    <div class="footer"></div>
    
    </div>
    
    
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    May 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's another option, I'll experiment with only applying bottom margins throughout a site. cheers.

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jbanger View Post
    That's another option, I'll experiment with only applying bottom margins throughout a site. cheers.
    Hello

    If this is for space between lines ? Tags ? padding is far saver to use

  9. #9
    SitePoint Member
    Join Date
    May 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I think it all comes back to the actual benefit that comes with collapsing margins. I had a quick test with the bottom margins only and it doesn't seem practical. A heading following a paragraph lacks adequate space for example.

    I really like the idea of collapsing margins. It means you can apply your margins in one place and regardless of what follows what (except of course a float it seems) things work out smashingly. I'm on a quest to find a real solution to this as they make things so much better.

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jbanger View Post
    Yeah, I think it all comes back to the actual benefit that comes with collapsing margins. I had a quick test with the bottom margins only and it doesn't seem practical. A heading following a paragraph lacks adequate space for example.

    I really like the idea of collapsing margins. It means you can apply your margins in one place and regardless of what follows what (except of course a float it seems) things work out smashingly. I'm on a quest to find a real solution to this as they make things so much better.
    Hello

    There is an other problem with margins (and default tag margins) on top they work outside/on there containers, and in some cases on the bottom of , older FF's are notorious for this behavior

  11. #11
    SitePoint Member
    Join Date
    May 2006
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hold up a minute, is it Firefox that has this wrong?

    According to the w3c spec: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
    Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).


Bookmarks

Posting Permissions

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