Problema padding / margin su IE 6 e precendenti

**c4rd0** · 10-02-2009, 18:16

Ciao a tutti,
sto sviluppando il layout di un sito. In breve, vorrei avere 1 div per l'header, 1 div "slogan" ( dove mettere il "motto" del sito ), 1 div per la pagina vera e propria, 1 per la navigazione ( a destra) e 1 per il footer. Ho preparato un abbozzo e l'ho messo online qui .
il mark-up utilizzato è questo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>CIRDIS s.a.s.</title>
	<link rel="stylesheet" href="./css/maybe_definitive.css" type="text/css" media="screen" />
</head>

<body>
    <div id="wrapper">
	    
	    <div id="header">
		    <h1>Qui l'header</h1>
	    </div>
	
	    <div id="slogan">
	        <h5>Il nuovo concetto di disinfestazione.</h5>
	    </div>
	

		    <div id="page_content">
		        <h2>Qui il titolo</h2>
		        <h3>Titolo secondario</h3>
		        
		        

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
		        accumsan tortor a augue. Mauris ac odio. Pellentesque a sapien ac
		        odio euismod gravida. Aliquam eleifend. Sed lacinia sapien
		        consectetur orci. Mauris bibendum, libero at fringilla suscipit,
		        felis arcu adipiscing quam, a blandit neque arcu eget neque. Duis
		        erat. Ut lacinia elit ut arcu pellentesque ornare. Morbi imperdiet,
		        urna et vehicula luctus, nunc nibh vulputate felis, in consectetur
		        orci risus sed dolor. Vivamus dignissim pede ac sapien. Nullam sed
		        orci. Aliquam tempus erat.</p>
		        
		        

Nulla felis. Morbi interdum velit non velit. Nunc ultrices erat
		        et est. Fusce lobortis, velit non tristique venenatis, justo dolor
		        convallis magna, quis pretium nunc felis a magna. Curabitur posuere
		        fermentum elit. Phasellus ultricies tortor vitae tortor euismod
		        auctor. Pellentesque ornare tortor in metus. Integer nisi. Quisque
		        mattis, purus ac mattis commodo, felis erat tristique turpis, vel
		        fermentum arcu arcu et ligula. Maecenas nisi dui, facilisis
		        ullamcorper, consectetur ornare, porta sed, lectus. Donec nec ligula
		        ut mauris auctor interdum. Aliquam pretium odio. Pellentesque ligula
		        neque, facilisis eu, faucibus at, laoreet vel, dolor. Aliquam eu
		        leo. Curabitur ut nunc quis nunc suscipit vestibulum. Duis non
		        ligula in felis ultrices gravida. Cras sit amet lectus. Pellentesque
		        viverra enim at metus molestie sollicitudin.</p>
		    </div>
		
		    <div id="navigation_box">
		        <ul>
		[*]Pellentesque
		[*]condimentum
		[*]est
		[*]ac
		[*]diam
		[*]congue
	[/list]
		    </div>

	
	    <div id="footer">
            <h5>Qui il footer</h5>
	    </div>
	    
    </div>

</body>
</html>

il foglio CSS è questo.

codice:

/* ********** GENERAL SETUP ********** */
/* ********** Tipografia ************* */

body{
    font: 100.01% Arial, Helvetica, sans-serif
}

h1{
    font-size: 2.4em
}

h2{
    font-size: 1.8em
}

h3{
    font-size: 1.4emj
}

h4{
    font-size: 1.2em
}

h5{
    font-size: 1em
}

h6{
    font-size: 0.85em
}


/* ********** Line-Height ************ */

p, blockquote, pre, ol, dl, ul, form {
    line-height:1.5
}


/* ********** Whitespace ************* */

html, body
{
	margin: 0;padding: 0; border: 0
}

h1, h2, h3, h4, h5, h6
{
	margin: 0.7em 0 0.2em
}

address, blockquote, dl, form,fieldset, ol, table, p, pre, ul
{
	margin-top: 0.2em;
	margin-bottom: 1.2em
}



/* ******* TEMPLATE SETTINGS ********* */
/* ******* General ******************* */

body {
    background: #ececed url(../img/bg.png) repeat-x top;
    color: #333 ;
    text-align:center
}

div#slogan *, div#footer *, div#page {
    margin: 0;padding: 0
}

div#wrapper {
    width:60.25em;
    background-color: #8B9AA3; 
    margin: 0 auto;
/*    padding-left: 20px;*/
/*    padding-right: 20px;*/
}




div#header {
    background: #608A00 ;

}

div#header h1 {
    text-align: left;
    margin: 0 auto;
}

div#slogan {
    background: #007AAE ;
    margin: 0 auto;
    clear: both;
    text-align: right
}


div#page_content {
    text-align: left;
    background: #99FF33 ;
    float: left;
    width: 700px;
	margin-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

div#navigation_box {
    text-align: left ;
    background:#FF6600 ;
    float: right;
    width: 200px;
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

div#footer {
    background: #FFFF33;
    clear: both;
    
}

Ora, aprendolo con Firefox o con Internet Explorer 7, non si hanno problemi. I 2 box centrali ( page_content e navigation_box ) stanno al loro posto. Come da CSS controllo il loro posizionamento tramite i vari settaggi della proprietà margin.
Il problema si presenta aprendolo con Internet Explorer 6 o precedenti.

Come posso rendere uniforme la resa cross-browser di questo layout ( magari senza utilizzare hack, che compremetterebbero la validazione ) ?

Ciao,
Marco.

**c4rd0** · 10-02-2009, 23:33

Nessuna idea?!
Heeelp me

**c4rd0** · 11-02-2009, 02:16

ho parzialmente risolto...
...praticamente ho messo un nuovo div, page, che raccoglie sia il div page_content, che il div navigation_box ed ho agito sul padding di page. Ora tutto funziona bene. Solo che su IE 5 e su IE 5.5 il div page appare più piccolo di quello che sia. So che è un problema di IE "congenito"... volevo sapere se c'è un modo, a parte gli hack per evitarlo.

Grazie in anticipo.

Discussione: Problema padding / margin su IE 6 e precendenti

Strumenti discussione

Ricerca discussione

Visualizza

Problema padding / margin su IE 6 e precendenti

Permessi di invio