SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: IE7 bottom margin on float issue
-
Aug 30, 2007, 07:42 #1
- 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.
-
Aug 30, 2007, 08:26 #2
- 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..?
-
Aug 30, 2007, 08:44 #3
- 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
-
Aug 30, 2007, 08:46 #4
- 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 10:27.
-
Aug 30, 2007, 09:30 #5
- 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.
-
Aug 30, 2007, 09:43 #6
- 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>
-
Aug 30, 2007, 09:59 #7
- 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.
-
Aug 30, 2007, 10:04 #8
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 30, 2007, 10:14 #9
- 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.
-
Aug 30, 2007, 10:21 #10
- 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).
-
Aug 30, 2007, 10:24 #11
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks