[html]: IE sovrappone i div..

**Whitecrowsrain** · 27-09-2006, 12:02

salve a tutti ho una pagina web con questo foglio CSS che fa da struttura:

codice:

/* CSS Document */
/*stili per il layout fisso con posizionamenti assoluti*/
html,body
{
  margin: 0;padding:0
}
body
{
  font-family: arial,sans-serif;
  font-size: 76%;
  text-align: center
}
div#container
{  
  position: relative;
  width:760px; 
  margin: 0 auto;
  border-left: 1px solid #ccc; 
  border-right: 1px solid #ccc;
  background: url(pictures/3rightcol.jpg) repeat-y top right
}
div#container2
{
  background: url(pictures/3leftcol.jpg) repeat-y top left;
  text-align: left
}

/*stili generici, su header e footer*/
div#header
{
  height: 80px;
  background-color:#36C;
  color: #ff0;
  background: url(pictures/testataAdmin.jpg) 
}

h1,h2
{
  margin: 0;
  padding:0
}
h1
{
  padding-left:10px;
  font: bold 2.3em/80px arial,sans-serif
}
h2
{
  color: #69f;
  font-size: 1.5em
}

div#footer a
{
  color:#fff;
  font-weight: bold;
  text-decoration: underline
}

/*stili specifici per il layout*/
div#navigation
{  
  position: absolute; 
  top: 80px; 
  left: 0;
  width: 160px;\width:170px;w\idth:160px;
  padding: 1em 0 0 10px
}

div#extra
{
  position: absolute; 
  top: 80px; 
  right: 0;
  width: 160px;\width:170px;w\idth:160px;
  padding: 1em 5px
}

div#content
{
  margin: 0 170px;
  padding: 1em 10px;
  background-color: #fff ;
  height: auto !important;
  height: 300px;
  min-height: 300px;
}

div#footer
{
  text-align:center; 
  padding: 5px 0;
  background-color:#00009D;
  color: #FFFFFF ;
}

/*Stili per i contenuti   */

div#content a
{
  color:#3366FF;
  text-decoration: none;
  font-weight:bold;
}

div#content p
{
  text-align:justify;
}
div#content a#activelink
{
   color: #000080;
  text-decoration: none
}
/*stili per la navigazione*/
div#navigation ul
{
  margin: 0;
  padding: 0; 
  list-style-type: none
}

div#navigation li
{
  margin: 0;
  padding: 0
}

div#navigation a
{
  color:#369;
  font: normal bold 1.1em/1.3em arial,sans-serif;
  text-decoration: none
}

div#navigation a:hover
{
  color: #033;
  font: normal bold 1.2em/1.3em arial,sans-serif;
  text-decoration: none;
}

div#navigation a#activelink
{
  color: #033;
  text-decoration: none
}
div#navigation p
{
  font-size: 90%
}

/*stili per la sezione extra*/
div#extra div.newsbox
{
  font-size: 90%;
  margin-bottom: 2em
}

div#extra div.newsbox h2
{
  color: #999;
  font-size: 1.2em
}
div#extra div.newsbox p
{
  margin: 0
}
div#extra a
{
  color:#FF6600;
  font: normal bold 1em/1.3em arial,sans-serif;
  text-decoration: none
}

div#extra a:hover
{
  color: #993300;
  font: normal bold 1.1em/1.3em arial,sans-serif;
  text-decoration: none;
}

div#extra a#activelink
{
  color: #993300;
  text-decoration: none
}

div#extra ul
{
  margin: 5px 10px 0px 15px;
  padding: 0;
  list-style-type: none
}

div#extra h2
{
  color: #033;
  margin:0px 0px 0px 5px;
  font-size: 1.1em ;
}

/* classe per la tabella*/
.tabella
{
  font-family: arial,sans-serif;
  font-size: 90%;
  //color: #666666;
}

quindi il codice html è il seguente:

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">
 <html>
   <head>
     <title>Pagina di prova</title>
   </head>
   <body>
     <div id="container">
       <div id="container2">
         <div id="header">
         </div>
         <div id="content">
           <h2> Contenuto</h2>
           

           


             Contenuto pagina
             
           </p>
         </div>
         <div id="extra">
         </div>
         <div id="navigation">
           <ul>[*]Opzione1[*]Opzione 2[*]Opzione 3[/list]
         </div>
         <div id="footer">
           

 Sito a cura di Whitecrowsrain </p>
         </div>
       </div>
     </div>
   </body>
 </html>

il problema sta che se lo visualizzo con il solito internet explorer mi stampa il footer su sfondo bianco(dovrebbe essere blu) e con il testo bianco.. se cambio colore al testo questo cmq rimane sovrapposto ai div navigation ed extra...perchè?(ovviamente con firefox fila tutto liscio!!)

**webdemo** · 27-09-2006, 12:25

sposto in CSS

ciaux

**Whitecrowsrain** · 27-09-2006, 13:02

bhe in effetti è sia un problema di CSS sia un problema di HTML ...grazie!

**Whitecrowsrain** · 28-09-2006, 17:13

up

**erredeco** · 29-09-2006, 10:00

Da quel che ho potuto vedere, c'è un comportamento strano di IE: quando la pagina viene caricata la prima volta, il footer è invisibile; quando ridimensiono la finestra del browser, invece compare.

Questo comportamento richiama molto quello del cosiddetto peek-a-boo bug, che però di solito si presenta in presenza di elementi float...

Mi sembra che mettendo

div#footer
{
text-align:center;
padding: 5px 0;
background-color:#00009D;
color: #FFFFFF ;
position: relative;
}

La cosa si aggiusti; ti suggerisco tuttavia di testarlo in maniera esaustiva su più browser per vedere che la cosa non dia fastidio; al limite usa un commento condizionale per mascherarla.

P.S. consiglio: è inutile scrivere

div#footer {....

tanto l'id identifica un elemento univoco: non avrai mai nella stessa pagina un <p id="footer"> o cose simili, per cui tanto vale scrivere

#footer {....

Discussione: [html]: IE sovrappone i div..

Strumenti discussione

Ricerca discussione

Visualizza

[html]: IE sovrappone i div..

Permessi di invio