css: problema width e cross browser

[LA VALE]

HO realizzato una pagina web, e per testarla avevo a disposizione IE 5 ( )

La pagina è in xhtml, e la formattazione è fatta attraverso un css.

La larghezza della pagina è di 780px.

Dentro questi 780px, ho realizzato due box di 390px (la metà) uno accanto all'altro...

E qui iniziano i problemi: nonostante ho aplicato il box bodel hack, la pagina non funzionava correttamente con IE5 (che avevo a disposizione, e non potevo in nessun modo cambiare ): i due box non occupavano l'intero box da 780px, rimaneva molto spazio sulla destra...

Così ho iniziato a mettere margin di qui e di là.. e tadà... Adesso con IE5 la pagina si vede alla perfezione.. Ma con gli altri browser non ne parliamo...

Avevo visto fin da subito che non avrebbe funzionato un lavoro del genere, ma d'altronde dovevo risolvere il problema come grande capo voleva...

questo è il css incriminato (Per favore non mi dite che i conti non tornano, perchè lo so già da sola):

body {
text-align: center;
margin: 10px 0px;
padding: 0px;
background: url(sfondo.gif);
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
color: #000000;
}
#logo {
margin: 10px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
height: 100px;
font-size: 0px;
text-align: left;
border: 0px;
background: #006600;
overflow: hidden;
}
#main {
margin: 0px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
text-align: left;
border: 0px;
}
#introduzione {
margin: 0px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
border: 0px;
}
#introduzione img {
border: 1px solid #000000;
}
.testointroduzione {
width: 390px;
w\idth: 370px;
\width: 370px;
padding: 5px;
margin: 0px 0px 0px 0px;
text-align: justify;
background-color: #99cc99;
float: left;
height: 250px;
}
.testointroduzione2 {
width: 390px;
w\idth: 370px;
\width: 370px;
padding: 5px;
margin: 0px 0px 0px 40px;
text-align: justify;
background-color: #99cc99;
float: left;
height: 250px;
}
#introduzione2 {
margin: 0px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
border: 0px;
font-weight: bold;
}
#introduzione2 img {
border: 1px solid #000000;
}
.infoprenotazioni {
width: 390px;
w\idth: 370px;
\width: 370px;
padding: 5px;
margin: 0px 20px 0px 0px;
text-align: justify;
float: left;
}
.infoprenotazioni2 {
width: 390px;
w\idth: 370px;
\width: 370px;
padding: 5px;
margin: 0px 0px 0px 20px;
text-align: justify;
float: left;
}
#clearer {
clear: both;
}
#info {
width: 150px;
w\idth: 148px;
\width: 148px;
padding: 1px;
margin: 10px 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #0000000;
text-align: center;
border: 1px solid #000000;
display: block;
background-color: #99cc99;
clear: both;
}
#info2 {
width: 150px;
w\idth: 148px;
\width: 148px;
padding: 1px;
margin: 10px 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #0000000;
text-align: center;
border: 1px solid #000000;
display: block;
background-color: #99cc99;
clear: both;
}
.contenuto {
margin: 10px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
text-align: left;
}
.immagini {
float: left;
width: 390px;
w\idth: 380px;
\width: 380px;
padding: 0px;
margin: 5px 0px 5px 0px;
text-align: justify;
}
.immagini img {
border: 1px solid #ffffff;
}
.immaginidestra {
float: left;
width: 390px;
w\idth: 380px;
\width: 380px;
padding: 0px;
margin: 5px 0px 5px 30px;
text-align: right;
}
.immaginidestra img {
border: 1px solid #ffffff;
}
.testo {
float: left;
width: 390px;
w\idth: 370px;
\width: 370px;
padding: 5px;
margin: 5px 0px 5px 0px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
background-color: #99cc99;
}
.testodestra {
float: left;
width: 390px;
w\idth: 370px;
\width: 370px;
padding: 5px;
margin: 5px 0px 5px 30px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
background-color: #99cc99;
}
.testo img {
border: 1px solid #000000;
}
#footer {
claer: both;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
margin: 20px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
text-align: center;
border-top: 1px solid #000000;
background-color: #99cc99;
}
a {
color: #000000;
}
a:hover {
color: #ffffff;
}
a.info {
color: #000000;
font-weight: bold;
text-decoration: none;
}
a.info:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
}

E questa è la pagina in questione:

[LA VALE]

E questo il codice html della pagina:

<body>

<div id="logo">

[img]Logo-Il-Cerro-2.gif[/img] [img]immagini-garfagnana.gif[/img] [img]logo-parco-apuane.gif[/img]

</div>


<div id="main">

<div id="introduzione">

<div class="testointroduzione">

[img]ita.gif[/img] testo
</div>


<div class="testointroduzione2">

[img]eng.gif[/img] testo
</div>




</div>





<div id="clearer">

</div>

<div id="introduzione2">

<div class="infoprenotazioni">

<div id="info">


<a class="info">info e prenotazioni</a>


</div>

testo

</div>

<div class="infoprenotazioni2">

<div id="info2">


<a class="info">info and reservations</a>


</div>

Mario:


tesato


</div>

</div>






<div class="contenuto">

<div class="immagini">

[img]esterno.jpg[/img]

</diV>

<div class="testodestra">

[img]ita.gif[/img]






[img]eng.gif[/img]






</diV>


</div>


<div class="contenuto">


<div class="testo">

[img]ita.gif[/img]





[img]eng.gif[/img]




</diV>

<div class="immaginidestra">

[img]struttura.jpg[/img]

</diV>


</div>


<div class="contenuto">

<div class="immagini">

[img]parco.jpg[/img]

</diV>

<div class="testodestra">

[img]ita.gif[/img]






[img]eng.gif[/img]






</diV>


</div>



<div class="contenuto">


<div class="testo">

[img]ita.gif[/img]





[img]eng.gif[/img]



</diV>

<div class="immaginidestra">

[img]salacolazione.jpg[/img]

</diV>


</div>



<div class="contenuto">

<div class="immagini">

[img]camera1.jpg[/img]

</diV>

<div class="testodestra">

[img]ita.gif[/img]





[img]eng.gif[/img]
</diV>


</div>





<div class="contenuto">


<div class="testo">

[img]ita.gif[/img]




[img]eng.gif[/img]





</diV>

<div class="immaginidestra">

[img]camera2.jpg[/img]

</diV>


</div>



</div>

<div id="footer">


</div>



</body>

</html>

>>>>>> Come posso risoolvere in modo che la pagina sia visualizzata in modo correttamente su tutti i browser??? Se tolgo i margin ai due box da 390px, IE 5 non me li allunga per tutto il box da 780px... HELP!! <<<<<<<<<<<<<<<

[LA VALE]

HO modificato il css in questo modo:

body {
text-align: center;
margin: 10px 0px;
padding: 0px;
background: url(sfondo.gif);
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
color: #000000;
}
#logo {
margin: 10px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
height: 100px;
font-size: 0px;
text-align: left;
border: 0px;
background: #006600;
overflow: hidden;
}
#main {
margin: 0px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
text-align: left;
border: 0px;
}
#introduzione {
margin: 0px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
border: 1px solid #000000;
}
#introduzione img {
border: 1px solid #000000;
}
.testointroduzione {
width: 380px;
w\idth: 390px;
\width: 380px;
padding: 5px;
margin: 0px 0px 0px 0px;
text-align: justify;
background-color: #99cc99;
float: left;
height: 250px;
}
.testointroduzione2 {
width: 375px;
w\idth: 390px;
\width: 375px;
padding: 5px;
margin: 0px 0px 0px 5px;
text-align: justify;
background-color: #99cc99;
float: left;
height: 250px;
}
#introduzione2 {
margin: 0px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
border: 0px;
font-weight: bold;
}
#introduzione2 img {
border: 1px solid #000000;
}
.infoprenotazioni {
width: 380px;
w\idth: 390px;
\width: 380px;
padding: 5px;
margin: 0px 0px 0px 0px;
text-align: justify;
float: left;
}
.infoprenotazioni2 {
width: 380px;
w\idth: 390px;
\width: 380px;
padding: 5px;
margin: 0px 0px 0px 0px;
text-align: justify;
float: left;
}
#clearer {
clear: both;
}
#info {
width: 148px;
w\idth: 150px;
\width: 148px;
padding: 1px;
margin: 10px 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #0000000;
text-align: center;
border: 1px solid #000000;
display: block;
background-color: #99cc99;
clear: both;
}
#info2 {
width: 148px;
w\idth: 150px;
\width: 148px;
padding: 1px;
margin: 10px 0px;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #0000000;
text-align: center;
border: 1px solid #000000;
display: block;
background-color: #99cc99;
clear: both;
}
.contenuto {
margin: 10px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
text-align: left;
border: 1px solid #000000;
}
.immagini {
float: left;
width: 390px;
w\idth: 390px;
\width: 390px;
padding: 0px;
margin: 5px 0px 5px 0px;
text-align: justify;
overflow: hidden;
}
.immagini img {
border: 1px solid #ffffff;
}
.immaginidestra {
float: left;
width: 385px;
w\idth: 390px;
\width: 385px;
padding: 0px;
margin: 5px 0px 0px 5px;
text-align: right;
overflow: hidden;
}
.immaginidestra img {
border: 1px solid #ffffff;
}
.testo {
float: left;
width: 380px;
w\idth: 390px;
\width: 380px;
padding: 5px;
margin: 5px 0px 5px 0px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
background-color: #99cc99;
overflow: hidden;
}
.testodestra {
float: left;
width: 375px;
w\idth: 390px;
\width: 375px;
padding: 5px;
margin: 5px 0px 0px 5px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
background-color: #99cc99;
overflow: hidden;
}
.testo img {
border: 1px solid #000000;
}
#footer {
claer: both;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;
margin: 20px auto;
width: 780px;
w\idth: 780px;
\width: 780px;
padding: 0px;
text-align: center;
border-top: 1px solid #000000;
background-color: #99cc99;
}
a {
color: #000000;
}
a:hover {
color: #ffffff;
}
a.info {
color: #000000;
font-weight: bold;
text-decoration: none;
}
a.info:hover {
color: #000000;
font-weight: bold;
text-decoration: none;
}

Così i conti sono tutti OK..
L'ho testato con IE6 e funziona bene, ma con IE5 ora si vede male (i box che stanno a destra non occpano tutto lo spazio del box grande (780px)..

Potreste testare questo codice css e html su altri browser per vedere se funziona bene?

E per IE5 come risolvo??

Grazie

[LA VALE]

Nessuno sa come risolvere per IE5?

[bagu]

nn ci metti online la pagina che è sabato sera e si fatica a copiare incollare salvare e fare le varie prewiew?

ciao paolo

[LA VALE]

http://www.affittacamereilcerro.com


Con IE6, che legge assai bene i css funziona bene...
Ma con IE5.. VVoVe:

[bagu]

.testointroduzione2 {
width: 375px;
w\idth: 390px;
\width: 375px;
padding: 5px;
margin: 0px 0px 0px 5px;
text-align: justify;
background-color: #99cc99;
float:right ;
height: 250px;
}

mica l'ho provato e sicuramente dovrai risistemare i margini ma dovrebbe allineare i box con la testata.
ciao paolo