Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2008
    Messaggi
    28

    Problema padding / margin su IE 6 e precendenti

    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.

  2. #2
    Utente di HTML.it
    Registrato dal
    Nov 2008
    Messaggi
    28
    Nessuna idea?!
    Heeelp me

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2008
    Messaggi
    28
    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.