problema di sovrapposizione con ie

[rebelia]

ciao

ho fatto un layout che prevede un posizionamento assoluto e tutto funziona come dovrebbe, tranne che per una cosa: a volte ie sposta la decorazione sopra il testo e lo fa random

la cosa buffa e' che se muovo il mouse vicino alla decorazione, questa torna a posto!

il sito e' questo, il problema e' questo:



la versione di ie e' questa:



le pagine sono state fatte con un cms, quindi non c'e' possibilita' di errore nel ricopiare l'html: sono sicura che qualche parte del css non funziona come dovrebbe, ma non riesco a trovare l'errore: qualcheduno con l'occhio piu' allenato puo' provarci?

grazie mille

body, div, table, ul, ol, h1, h2, h3, h4, h5, h6, img {
   border: 0px;
   margin: 0px;
   padding: 0px;
   }

body {
   background: #fff;
   color: #606060;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 80%;
   text-align: center;
   background: url(../files/modello/texture.gif);
   }

hr, h1, #indirizzofooter, #divlogo, .salta {
   display: none;
   }

#esterno {
   border: 1px solid #999;
   width: 760px;
   margin: 50px auto 30px auto;
   position: relative;
   background: #fff;
   color: #606060;
   }

#deco {
   position: absolute;
   top: -40px;
   right: 1px;
   width: 149px;
   height: 582px;
   background: url(../files/modello/deco.gif) no-repeat center center;
   }

#interno {
   margin: 10px 150px 20px 10px;
   text-align: left;
   }

#header {
   height: 100px;
   background: url(../files/modello/logo_verde_acido.gif) no-repeat top left;
   }

#menu {
   border-bottom: 1px solid #999;
   padding-bottom: 10px;
   text-align: center;
   margin-bottom: 20px;
   }

   #menu ul {
      list-style: none;
      }
  
      #menu ul li {
         display: inline;
         }

         #menu ul li a {
            color: #606060;
            background: #fff;
            text-decoration: none;
            padding-left: 2%;
            padding-right: 2%;
            border-left: 5px solid #fff;
            border-right: 5px solid #fff;
            }

            #menu ul li a:hover {
               border-left: 5px solid #9db535;
               border-right: 5px solid #9db535;
               }

#contenuti {
   float: left;
   width: 90%;
   margin-left: 2%;
   }

   #contenuti a {
      color: #748511;
      background: #fff;
      }

      #contenuti a:hover {
         color: #fff;
         background: #748511;
         }
      
   #contenuti ul {
      margin: 20px;
      }
 
      #contenuti ul li {
         margin-bottom: 10px;
         }

   #contenuti h2 {
      background: url(../files/modello/decotitoli.gif) no-repeat bottom center;
      padding-bottom: 25px;
      text-align: center;
      margin-bottom: 20px;
      }


/******** classi *************/

.chiudifloat {
   clear: both;
   }

.destra {
   text-align: right;
   }

.sinistra {
   text-align: left;
   }

.centrato {
   text-align: center;
   }

.img_dx {
   float: right;
   margin-left: 10px;
   }

.img_sx {
   float: left;
   margin-right: 10px;
   }


/**************versione*****************/

#versione {
        text-align: right;
	}
	
	#versione ul {
		list-style: none;
                height: 30px;
		}
	
		#versione ul li {
                        display: inline;
			}
			
			#versione ul li a {
				border-bottom: 5px solid #fff;
                                text-decoration: none;
				}

			#versione ul li a:hover {
				border-bottom: 5px solid #9db535;
				}

			#versione ul li span {
                                display: none;
				}

[thomas_anderson]

E' uno dei problemi che compaiono quando si inserisce un box assoluto in uno relativo: http://gabrieleromanato.altervista.o...inglayout.html il box deco ha sia una width che un'height. prova a togliere la height da #deco.

ps.

body, div, table, ul, ol, h1, h2, h3, h4, h5, h6, img {
border: 0px;
margin: 0px;
padding: 0px;
}

puoi scrivere solo:

* { margin: 0; padding: 0; }

non credo che ci sia ancora qualcuno che usi Netscape 4.

[rebelia]

Originariamente inviato da thomas_anderson
puoi scrivere solo:

* { margin: 0; padding: 0; }

non credo che ci sia ancora qualcuno che usi Netscape 4.

eccesso di cautela

non posso togliere l'altezza da quel div, altrimenti non visualizza la decorazione usata come background, unico scopo del div stesso

[thomas_anderson]

allora metti un altro div all'interno di deco a cui darai questa volta anche l'altezza. usa deco solo come contenitore.

[rebelia]

Originariamente inviato da thomas_anderson
allora metti un altro div all'interno di deco a cui darai questa volta anche l'altezza. usa deco solo come contenitore.

ok, grazie: provo subito

[rebelia]

niente, non funziona

<div id="esterno">
   <div id="deco"><div id="albero"></div></div>
...
</div>

#esterno {
   border: 1px solid #c0c0c0;
   width: 760px;
   margin: 50px auto 30px auto;
   position: relative;
   background: #fff;
   color: #606060;
   }

#deco {
   position: absolute;
   top: -40px;
   right: 1px;
   }

#albero {
   width: 149px;
   height: 582px;
   background: url(../files/modello/deco.gif) no-repeat center center;
   }

edit: sistemato, ho fatto casino io ( :rollo: ) inserendo un posizionamento float (contenuti) a fianco di un posizionamento assoluto (deco)

troppi cambi di idee e troppe sovrapposizioni a ore tarde portano a ciofecate simili

[thomas_anderson]

no, secondo le specifiche si può fare. nulla vieta che due box siano così posizionati. il casino l'ha fatto IE.

[rebelia]

Originariamente inviato da thomas_anderson
no, secondo le specifiche si può fare. nulla vieta che due box siano così posizionati. il casino l'ha fatto IE.

ad ogni modo e' bastato togliere il float dal div dei contenuti (dove obiettivamente non mi serviva) e il problema si e' risolto

grazie ancora per l'aiuto