margin-bottom on ie7

121 Posts

samuele Reply #1, 19 years, 2 months ago

Hi,
I have a problem with a layout that i’m development. On Firefox 2, Opera 9 and Safari (win) work correctly. On Explorer 7, the margin-bottom:20px; of div #box-b don’t work.
Why, is a bug of explorer 7?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="stile.css" />
</head>

<body>


<div id="header">
	<h1>Header</h1>
</div>

<div id="zona-1" class="clearfix">
	<div id="box-a">
		<h3>Box a</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
	<div id="box-b">
		<h3>Box b</h3>
		<p>Content content content content content content content content content content content content content content content content content content</p>
	</div>
	<div id="box-c">
		<h3>Box c</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
	<div id="box-d">
		<h3>Box d</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
</div>

<div id="zona-2" class="clearfix">
	<div id="box-e">
		<h3>Box e</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
	<div id="box-f">
		<h3>Box f</h3>
		<p>Content content content content content content content content content content content content content content content content content content</p>
	</div>
	<div id="box-g">
		<h3>Box g</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
</div>

<div id="zona-3" class="clearfix">
	<div id="box-h">
		<h3>Box h</h3>
		<p>Content content content content content content content content content content content content content content content content content content</p>
	</div>
	<div id="box-i">
		<h3>Box i</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
</div>

<div id="wrapper" class="clearfix">

	<div id="col-sx">
		<h2>Colonna sx</h2>
		<p>Content content content content content content content content content content content content content</p>
	</div>
	
	<div id="content">
		<h2>Content</h2>
		<p>Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p>
	</div>
	
	<div id="col-dx">
		<h2>Colonna dx</h2>
		<p>Colonna dx content content content content content content content content content content content content</p>
	</div>
	
</div>

<div id="zona-4">
	<h3>Zona 4</h3>
</div>

<div id="zona-5">
	<h3>Zona 5</h3>
</div>

<div id="zona-6">
	<h3>Zona 6</h3>
</div>

<div id="footer" class="clearfix">
	<p>Footer</p>
</div>


</body>
</html>

CSS is:

* {margin:0; padding:0;}
body {background-color:#99CCCC;}

#header {width:100%; background-color:#CCCC66;}
#footer {width:100%; background-color:#CCCC66;}

#zona-1 {width:780px; margin:0 auto; background-color:#FFFF66; /*padding-top:10px; padding-bottom:10px;*/}
#zona-2 {width:780px; margin:0 auto; background-color:#FFFF33; /*padding-top:10px; padding-bottom:10px;*/}
#zona-3 {width:780px; margin:0 auto; background-color:#FFFF00; /*padding-top:10px; padding-bottom:10px;*/}
#zona-4 {width:100%; background-color:#FFFF66;}
#zona-5 {width:100%; background-color:#FFFF33;}
#zona-6 {width:100%; background-color:#FFFF00;}

#wrapper {width:780px; margin:0 auto; background-color:#CCCCCC; padding-top:10px; padding-bottom:10px;}
#col-sx {width:160px; float:left; border:1px solid #000000; background-color:#99CC33;}
#col-dx {width:160px; float:right; border:1px solid #000000; background-color:#99CC33;}
#content {width:440px; float:left; margin-left:7px; border:1px solid #000000; background-color:#669933;}

#box-a {width:180px; float:left; border:1px solid #000000; background-color:#99CC33;}
#box-b {width:180px; float:left; margin-left:17px; border:1px solid #000000; background-color:#99CC33; margin-bottom:20px;}
#box-c {width:180px; float:left; margin-left:17px; border:1px solid #000000; background-color:#99CC33;}
#box-d {width:180px; float:right; border:1px solid #000000; background-color:#99CC33;}
#box-e {width:240px; float:left; border:1px solid #000000; background-color:#99CC33;}
#box-f {width:240px; float:left; margin-left:27px; border:1px solid #000000; background-color:#99CC33;}
#box-g {width:240px; float:right; border:1px solid #000000; background-color:#99CC33;}
#box-h {width:380px; float:left; border:1px solid #000000; background-color:#99CC33;}
#box-i {width:380px; float:right; border:1px solid #000000; background-color:#99CC33;}


.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

___________________________________________________________________
..:: Samuele ::..

45 Posts

ram Reply #2, 19 years, 2 months ago

IE bugs ahoy! I haven’t bumped into this one myself, and it’s getting late so I haven’t had a chance to look in IE7 myself, other people have though:

See posts @

http://www.maratz.com/blog/archives/2006/11/11/ie-7-quirks-floats-and-margins/

http://blog.gkaindl.com/2007/05/07/ie7-floatmargin-bottom-annoyance/

121 Posts

samuele Reply #3, 19 years, 2 months ago

Thanks ram,

but what is the solution? How can I solve this problem?

___________________________________________________________________
..:: Samuele ::..

69 Posts

danielsl Reply #4, 19 years, 2 months ago

there is a solution

before your block

put

<style>
/**/
</style>

<div id="iefix"></div>

121 Posts

samuele Reply #5, 19 years, 2 months ago

hi danielsl,

I don’t understand where I put the code. In the head section of html file or in css file?

Than, what is .your code ? huh

* html .your code{
position: absolute;
}

___________________________________________________________________
..:: Samuele ::..

97 Posts

jamesehly Reply #6, 19 years, 2 months ago

For an easier fix just put <br style="clear:both" /> inside of your div. Like this:

<div id="zona-1" class="clearfix">
	<div id="box-a">
		<h3>Box a</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
	<div id="box-b">
		<h3>Box b</h3>
		<p>Content content content content content content content content content content content content content content content content content content</p>
	</div>
	<div id="box-c">
		<h3>Box c</h3>
		<p>Content content content content content content content content content content content</p>
	</div>
	<div id="box-d">
		<h3>Box d</h3>
		<p>Content content content content content content content content content content content</p>
	</div>

	<br style="clear:both" />

</div>

I tested in FireFox and IE 7 for windows and it works for me.

DEVTRENCH: web development blog :: EHLY DESIGN

121 Posts

samuele Reply #7, 19 years, 2 months ago

Great solution but, if I want more o less space?

___________________________________________________________________
..:: Samuele ::..

97 Posts

jamesehly Reply #8, 19 years, 2 months ago

Great solution but, if I want more o less space?

samuele, that doesn’t make any sense, please proofread your post. I’ll assume you meant "more or less".

Why don’t you try to add more or less margin-bottom to your #box-a and see what happens. Since you are floating elements, the break doesn’t act as a fixed size element.

James

DEVTRENCH: web development blog :: EHLY DESIGN

121 Posts

samuele Reply #9, 19 years, 2 months ago

If I add margin-bottom to #box-b works correctly on Firefox, Opera and Safary only. On Internet Explorer 7 the margin is not applied.

___________________________________________________________________
..:: Samuele ::..

39 Posts

Astronut Reply #10, 19 years, 2 months ago

I did a Google hunt yesterday and it’s a known bug for ie7 (not in ie6 oddly) and there’s no fix. Ie7 ignores bottom margins on floated elements... The usual workaround seems to be to do something different!

Given that your layout is basically divided by the zone divs - I’d say the best approach would be to abandon the bottom margin altogether and add padding to the containing div (I note you have this commented out). It won’t even fall apart if the window size drops too far because you have a fixed width layout.

Jon