Interpretazione margin e bordo disallineato fra explorer e firefox

**PierinoPipetta** · 03-01-2012, 17:18

Solite questioni, ma non sono riuscito a risolvere guardando fra vecchi post...

Layout a 3 colonne. In quella di destra e sinistra ci sono due immagini di sfondo che iniziano dopo un margin-top di CIRCA 90.

In sostanza il bordo alto del DIV "SX" e del DIV "DX" non si allineano con il bordo basso del DIV "MENU" allo stesso modo fra firefox ed explorer.

Ho inserito il codice per farli funzionare su explorer, ma per allineare il tutto su firefox invece di inserire "margin-top:89px" devo mettere "margin-top:91px" nei DIV incriminati. Se non faccio così il risultato è quello che vedete nell'allegato.

Ora.. come posso fare per far funzionare tutto indipendentemente dal browser utilizzato?

Questo è il codice HTML:

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=utf-8" />
<title>Untitled Document</title>
<link href="oneColFixCtrHdr_tableless.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container_super">
       	  
    <div class="sx" style="height: 500px"></div>
    
    <div class="container">
    
        <div class="header">
         
                <div id="MENU">
                  <div class="MENU_sx_dx"></div>
                  <div class="MENU_link"> Home</div>
                  <div class="MENU_link">Chi siamo</div>
                  <div class="MENU_link">Prodotti</div>
                 
                  [img]stemma.gif[/img]
                    
                  <div class="MENU_link">Storia</div>
                  <div class="MENU_link">Trovaci</div>
                  <div class="MENU_link">Contattaci</div>
                  <div class="MENU_sx_dx"></div>
                </div>
        
        </div>
    
        <div class="imageheader"></div>
                
        <div class="content">

Testo</p></div>
        
    </div>
     
    <div class="dx" style="height: 500px"></div>

</div>

</body>
</html>

IL CSS:

codice:

@charset "utf-8";
body {
	font: 75%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff;
	margin: 0;
	padding: 0;
	color: #666666;
	text-align: center;
	
}

.container_super {
	width: 950px;
	border: 0;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;

}

.sx {
	width: 120px;
	background: #ffffff;

	margin-top: 89px;
		
	text-align: center;
	background-repeat:no-repeat;
	background-image:url(sx.jpg);
	background-position:bottom;
	float: left;

	border-top:#000 solid 1px;
}

.dx {
	width: 120px;
	background: #ffffff;
	margin-top: 89px;
	background-repeat:no-repeat;
	background-image:url(dx.jpg);
	background-position:bottom;
	float: left;
	
	border-top:#000 solid 1px;
}

.container {
	width: 710px;
	background: #ffffff;
	margin: 0;
	padding: 0;
	float: left;

}

.header {
	background: #ffffff;
	text-align:center;
}

.imageheader {
	clear:both;
	margin-top:5px;
}

.content {
	background: #ffffff;
	padding-top: 10px;

	margin:0;
	width: 710px;
	text-align:left;
}

#MENU {
	overflow: hidden;
	margin:0 auto;

}

.MENU_link {
	overflow: hidden;
	display:block;
	float:left;
	width:80px;
	height:40px;

	margin-top:50px;
	
	border-top:#000 solid 1px;
	border-bottom:#000 solid 1px;
	
	font: 75%/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	color:#000000;
	
	line-height:40px;
}


.MENU_sx_dx {
	float:left;
	width:48px;
	height:40px;
			
	margin-top:50px;

	border-top:#000 solid 1px;
	border-bottom:#000 solid 1px;
}

#MENU a{
	display:block;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	color:#000000;
	
	line-height:40px;
}

**PierinoPipetta** · 04-01-2012, 21:32

Nessuna idea?

**ResianTaxidrive** · 05-01-2012, 13:31

hai provato ad usare un doctype di tipo strict anzichè transitional? Di solito, così facendo, si risolvono parecchi problemi di compatibilità.

**PierinoPipetta** · 06-01-2012, 00:39

Si provato. Non cambia nulla... ho provato con questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Discussione: Interpretazione margin e bordo disallineato fra explorer e firefox

Strumenti discussione

Ricerca discussione

Visualizza

Interpretazione margin e bordo disallineato fra explorer e firefox

Permessi di invio