ciao a tutti,
mentre stavo sviluppando un nuovo layout, ho notato che ie7 sembra non capire bene la regola margin-bottom. Firefox, Opera e Safari invece funzionano bene.
Non so, si tratta di un bug?
Riporto qui il codice:
codice:<!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> Content content content content content content content content content content content</p> </div> <div id="box-b"> <h3>Box b</h3> 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> Content content content content content content content content content content content</p> </div> <div id="box-d"> <h3>Box d</h3> 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> Content content content content content content content content content content content</p> </div> <div id="box-f"> <h3>Box f</h3> 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> 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> 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> 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> Content content content content content content content content content content content content content</p> </div> <div id="content"> <h2>Content</h2> 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> 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"> Footer</p> </div> </body> </html>
Questo è il css
Rendering su ie7codice:* {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 */
Rendering su firefox
Soluzioni?
Rispondi quotando