Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

Discussione: Layout: errore con IE6

  1. #1

    Layout: errore con IE6

    sera a tutti,

    ho un layout così fatto:

    <div id="scatola">
    <div id="testata">...</div>
    <div id="laterale">
    <div class="laterale">menu...</div>
    </div>
    <div id="contentitore">
    <div id="contenuto">
    ...
    </div>
    <div id="navigazione">
    <ul>
    <li ...[/list]
    </div>
    <div id="piede">


    ...</p>
    </div>
    </div>
    </div>

    con questo CSS:

    div#testata {
    width: 1024px;
    height: 150px;
    background-image: url(immagini/aa.png);
    }
    div#scatola {
    width: 1024px;
    height: auto;
    margin: auto;
    }
    div#laterale {
    float: left;
    height: 300px;
    width: 32px;
    background: #99FF66;
    }
    div#contentitore {
    width: 960px;
    height: auto;
    background-color: #001849;
    margin: 0 0 0 32px;
    clear: right;
    }
    div#contenuto {
    width: 738px;
    height: auto;
    background-color: #252525;
    float: left;
    padding: 10px;
    border: solid #88d5ff 1px;
    font-size: 13px;
    line-height: 1.7;
    text-align: justify;
    }
    div#navigazione {
    width: 190px;
    height: 390px;
    float: left;
    background-color: #001849;
    background-image: url(immagini/nav-menu.gif);
    background-repeat: no-repeat;
    padding: 37px 5px 5px 5px;
    }
    div#piede {
    width: 960px;
    height: 50px;
    clear: both;
    background-image: url(immagini/piede.gif);
    text-align: center;
    color: #777;
    font-size: 10px;
    line-height: 1.6;
    }


    Su FF vedo tutto bene, il solito IE6 mi crea uno spazio tra #laterale e #contenuto, spostando quest'ultimo a destra di circa 2px.

    Ho anche provato a mettere display: inline; nel contenitore, ma mi serve la sua altezza per creare lo sfondo sotto al navigazione laterale, #scatola non posso darle uno sfondo perchè sotto #laterale deve essere trasparente.

    Qualche suggerimento? dove prende quello spazio IE6?

    Grazie
    Fcw
    SpeculumAtrum
    AutoCAD - Lavori Pubblici - Apnea

  2. #2

  3. #3
    Io ho provato tutto ma quei 3px non si sono mai tolti di lì, al più ho peggiorato sparando il contenitore centrale un pò ovunque.

    Ho cercato anche su google, testando altre regole, ma credo di non aver capito bene il concetto, quindi non so cosa scrivere esattamente e in quale contenitore.
    E' tutta la mattina che provo... non è che qualcuno può aiutarmi?

    Grazie
    Fcw
    SpeculumAtrum
    AutoCAD - Lavori Pubblici - Apnea

  4. #4
    Ma dai!
    Basta aggiungere solo per IE6 a #laterale un margin-right:-3px e il problema è risolto!

  5. #5
    L'ho fatto!

    ho copiato codici da stamani, compreso quello che dici tu, ma sto pensando che forse il mio non è il bug dei 3px

    Non sa più che fare
    Fcw
    SpeculumAtrum
    AutoCAD - Lavori Pubblici - Apnea

  6. #6
    Io ho copiato "paro paro" il codice che ci hai descritto.
    Se poi manca qualcosa... non ho la palla di vetro!

  7. #7
    Veramente lo hai risolto?

    Allora mi ci metto meglio... anzi facciamo prima :rollo: dove hai scritto esattamente la regola che mi hai detto, forse io non ho capito dove va inserita...


    Grazie 1000

    Fcw
    SpeculumAtrum
    AutoCAD - Lavori Pubblici - Apnea

  8. #8
    codice:
    #laterale {
    margin-right : -3px;
    }
    Solo per IE, quindi usa i commenti condizionali.

  9. #9
    Scusa tanto se insisto, ma avevo già scritto il codice come me lo hai suggerito, ora è una questione di principio, tu ci sei riuscito, devo riuscirci anche io!!

    HTML
    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>
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="icon" href="favicon.ico" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta name="author" content="Federica Milella"/>
        <meta name="Description" content="Allenare l'apnea"/>
        <meta name="Keywords" content="Allenare l'apnea, apnea, convegno scientifico  internazionale, Umberto Pellizzari, Michele Tommasi, Paola Parenti Paola Tagliabue, Monica Barbero, Stefano Tovaglieri, Dott. Danilo Cialoni "/>
        <meta name="robots" content="all"/>
        <meta name="language" content="it"/>
        <link href="aa.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="aa.js"></script>
        <script type="text/javascript" src="popup.js"></script>	
        
        <!--[if lt IE 7]>
         <style type="text/css">
          div#testata {
          background: transparent none;
          background-image: none;
          filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod="image", src="immagini/aa.png");}
          .linea-1 a, .linea-1 a:visited {
          height: 1%;}
          .linea-2 a, .linea-2 a:visited {
          height: 1%;} 
          div#laterale {
          margin-right: -3px; {
        </style>
       <![endif]-->
    	
    	<title>Allenare l'apnea</title>
    </head>
    
    <body>
    
    <div id="scatola">
        <div id="testata"></div>
        <div id="laterale"></div>
        <div id="contentitore">
           <div id="contenuto"></div>
           <div id="navigazione">
             <ul>
                 <li ...[/list]
          </div>
          <div id="piede">
              
    
    ...</p>
          </div>
       </div>
    </div>
    
    </body>
    </html>
    CSS
    codice:
    /*
         impostazioni generali della pagina
    ------------------------------------------------------------*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    }
    html {
    	background-image: url(immagini/grigio.gif);
    }
    body {
    	line-height: 1;
    	color: #aaa;
    	font-family: Arial, Helvetica, sans-serif;
    }
    ol, ul {
    	list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    /*
         stili dei contenitori
    ------------------------------------------------------------*/
    
    div#testata {
    	width: 1024px;
    	height: 150px;
    	background-image: url(immagini/aa.png);
    }
    div#scatola {
    	width: 1024px;
    	height: auto;
    	margin: auto;
    }
    div#laterale {
    	float: left;
    	height: 300px;
    	width: 32px;
    	background: #99FF66;
    }
    div#contentitore {
    	width: 960px;
    	height: auto;
    	background-color: #001849;
    	margin: 0 0 0 32px;
    	clear: right;
    }
    div#contenuto {
    	width: 738px;
    	height: auto;
    	background-color: #252525;
    	float: left;
    	padding: 10px;
    	border: solid #88d5ff 1px;
    	font-size: 13px;
    	line-height: 1.7;
    	text-align: justify;
    }
    div#navigazione {
    	width: 190px;
    	height: 390px;
    	float: left;
    	background-color: #001849;
    	background-image: url(immagini/nav-menu.gif);
    	background-repeat: no-repeat;
    	padding: 37px 5px 5px 5px;
    }
    div#piede {
    	width: 960px;
    	height: 50px;
    	clear: both;
    	background-image: url(immagini/piede.gif);
    	text-align: center;
    	color: #777;
    	font-size: 10px;
    	line-height: 1.6;
    }
    div#map {
    	height: 450px;
    	width: 600px;
    	margin: auto;
    }
    /*
         stili delle liste
    ------------------------------------------------------------*/
    
    /*
         stili delle testi
    ------------------------------------------------------------*/
    div#contenuto p {
    	line-height: 1.7;
    }
    .azzurro {
    	color: #0066cc;
    }
    .linea-0 {
    	color: #ccc;
    	font-size: 13px;
    	font-weight: bold;
    	display: block;
    	height: auto;
    	line-height: 1.5;
    	padding: 2px 0 2px 5px;
    	background-color: #00377e;
    }
    .img {
    	float: left;
    	margin: 20px 10px 0 0;
    }
    /*
         stili dei link
    ------------------------------------------------------------*/
    p a, p a:visited, ul a, ul a:visited {
    	color: #0066cc;
    	text-decoration: none;
    }
    p a:hover, ul a:hover {
    	text-decoration: underline;
    	color: #c00;
    }
    .linea-1 a, .linea-1 a:visited {
    	color: #ccc;
    	font-size: 13px;
    	text-decoration: none;
    	font-weight: bold;
    	display: block;
    	height: auto;
    	line-height: 1.5;
    	padding: 2px 0 2px 5px;
    }
    .linea-1 a:hover {
    	color: #fff;
    	background-color: #000d37;
    	text-decoration: none;
    	display: block;
    }
    .linea-2 a, .linea-2 a:visited {
    	color: #ccc;
    	font-size: 13px;
    	text-decoration: none;
    	font-weight: bold;
    	display: block;
    	height: auto;
    	line-height: 1.5;
    	padding: 2px 0 2px 5px;
    }
    .linea-2 a:hover {
    	color: #fff;
    	background-color: #002159;
    	text-decoration: none;
    	display: block;
    }
    Ora ho riportato proprio TUTTO il codice (togliendo i contenuti, ma io lavoro con questo file di prova), se ti servono anche le immagini dimmelo!
    Prova a copiare i codici nei 2 files e dimmi se vedi lo spazio tra il rettangolo (#laterale) verde e il #contenitore.
    A questo punto è chiaro che ho scritto qualche bestialità nascosta nel CSS.

    Grazie comunque

    Fcw

    P.S.: ho anche tolto tutte le immagini sostituendole con diversi colori, niente da fare, rimane lo spazio!
    SpeculumAtrum
    AutoCAD - Lavori Pubblici - Apnea

  10. #10
    Trovati almeno tre errori due dei quali rilevanti al fine del risultato:
    1 - elemento LI nell'HTML : <li....
    2 - <!--[if lt IE 7]> invece di <!--[if lt IE7]>
    3 - La dichiarazione nel CSS per div#laterale termina con una graffa aperta invece che chiusa.

    Il secondo punto evita ad IE di interpretare il codice così come il terzo.
    Corretti gli errori tutto funziona correttamente.

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.