Soliti IE+Mozzilla

**poeta1978** · 09-01-2005, 11:27

codice:

body {
margin: 0 1px 0 0;
padding: 0;
font: .80em verdana;
background: #FECCFF;
color: #000;
}
#corpo {
width: 100%;
\width: 100%;
w\idth: 100%;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#alto {
padding: 0;
margin-bottom: 1px;
}
#centro {
padding: 1px;
background-color: #FFF;
width: 100%;
\width: 100%;
w\idth: 100%;
height: 443px;
\heght: 443px;
h\eight: 443px;
}
#sx {
float: left;
width: 160px;
\width: 160px;
w\idth: 160px;
margin: 5px;
margin-right: 1px;
padding: 0;
background: #FECCFF;
}
#dx {
float: right;
width: 160px;
\width: 160px;
w\idth: 160px;
margin: 5px;
margin-left: 1px;
padding: 0;
background: #FECCFF;
}
#sotto {
background: #FECCFF;
clear: left;
line-height: 1em;
}
#articolo {
}
#articolo div.immagine {
padding: 1px;
float: left;	
}

Questo foglio di stile non da' problemi con IE mentre con Mozzilla la parte centrale si espande, cioè va a finire sotto lo sfondo delle colonne laterali, anche se la faccio in px. Come si può fare?

**carp** · 09-01-2005, 11:58

#centro {
padding: 1px;
background-color: #FFF;
width: 100%;
height: 443px;
padding: 0 160px; //padding dx e sx pari alla larghezza di dx e sx
}

**poeta1978** · 09-01-2005, 12:03

Dovevo copiare com'è? Non va!

**carp** · 09-01-2005, 12:16

sostituisci #centro d che avevi prima con questo
#centro {
padding: 1px;
background-color: #FFF;
width: 100%;
height: 443px;
padding: 0 160px;
}

non va?

**carp** · 09-01-2005, 12:17

e anche questo

#sotto {
background: #FECCFF;
clear: both;
line-height: 1em;
}

**poeta1978** · 09-01-2005, 12:20

Nada

**carp** · 09-01-2005, 12:37

puoi postare il codice html?

**poeta1978** · 09-01-2005, 12:59

Divido in 2 post

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">
<head>
<title>Titolo</title>
<meta name="robots" content="noindex">
<link rel="stylesheet" type="text/css" href="stile.css">
</head>

<body>
<div id="corpo">
<div id="alto">

<table bgcolor="#FFFFFF" width="100%"><tr><td width="50%">
Descrizione</td><td width="50%"><form action="http://www.sito.it/ricerca/" method="post" style="margin:0" name="ricerca"><font size="+1">Cerca</font> <input name="Termine" type="text" size="20" style="background: #FECCFF;" />  <sup>Ricerca avanzata</sup></form></div></div></td></tr></table>
</div>
<div id="sx">
<div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Homepage</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Politica</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Sport</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Scienza</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Tecnologia</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Medicina</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Cultura</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Musica</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Solidarietà</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Dal Mondo</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Iniziative</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Curiosità</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Gossip</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Due-Risate-Due</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Iscriviti</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Forum</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Chat</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Guestbook</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Link amici</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Link consigliati</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Effettua Login/Logout</div><div style='background-image:  url(http://www.sito.it/images/sfondo.jpg); border: solid 2px; width: 160px;' align=center>Area Riservata</div></div>

<div id="dx">
<div style="background: #FFFFFF; border: solid 1px; width: 160px; height: 165px"><div style="background-image:  url(http://www.sito.it/images/sfondo.jpg);" align="center"><font color="#FFFFFF">Sondaggio</font></div>
<form action="http://www.sito.it/sondaggi/vota.php" method="post" name="Sondaggi" style="margin: 0;">
Primo sondaggio del sito, ecco il testo.
<input type='radio' name='Opzione' value='Opzione1'>Risposta1
<input type='radio' name='Opzione' value='Opzione2'>Risposta2
<input type='radio' name='Opzione' value='Opzione3'>Risposta3
<input type='radio' name='Opzione' value='Opzione4'>Risposta4
<input type="hidden" name="Sondaggio" value="1" />

<div align="center"><input name="Vota" type="image" value="submit" src="http://www.sito.it/images/vota.jpg" alt="Vota" border="0"></div>
</form></div>

<div style="background: #FFFFFF; border: solid 1px; width: 160px; height: 125px;"><div style="background-image:  url(http://www.sito.it/images/sfondo.jpg);" align="center"><font color="#FFFFFF">NewsLetter</font></div><font size="-2">Iscriviti alla NewsLetter per essere sempre informato sulle novità del sito.</font>
<form action="http://www.sito.it/newsletter/" method="post" style="margin: 0;" name="NewsLetter"><div align="center">Email
<input type="text" size="15" name="Email" style="background: #FECCFF;" maxlength="255" />
<input name="Invia" type="image" value="submit" src="http://www.sito.it/images/invia.jpg" alt="Invia"></div></form></div>


<div style="background: #FFFFFF; border: solid 1px; width: 160px; height: 108px"><div style="background-image:  url(http://www.sito.it/images/sfondo.jpg);" align="center"><font color="#FFFFFF">Utenti</font></div><div align="center">Ci sono:

1 iscritti
0 connessi
1 ospiti
Ultimo iscritto ciao</div></div></div>

**poeta1978** · 09-01-2005, 13:00

codice:

<div id="centro">
<div style="border: solid 1px; height: 130px; \height: 130px; h\eight: 130px; clear: center;"><h3 style='margin: 0;'>Titolo nuovo</h3><font size=-2>Descrizione</font><div id="articolo"><div class="immagine">[img]images/prova.jpg[/img]</div><p align="justify" style="margin: 0;">Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuovo Articolo fresco e nuov ...continua</p></div></div>

<table align="center"><tr><td>
<div style="width: 130px; border: solid 1px; height: 100px; float: left; margin: 3px; clear: left;"><div style="background-image:  url(images/sfondo.jpg);" align="center"><font color="#FFFFFF">Primo Piano</font></div><font size="-2">Titolo7
<p align="justify">Ecco il testo completo dell'articolo Ecco il testo completo  ...continua</p></font></div>

<div style="width: 130px; border: solid 1px; height: 100px; float: left; margin: 3px; clear: center;"><div style="background-image:  url(images/sfondo.jpg);" align="center"><font color="#FFFFFF">Primo Piano</font></div><font size="-2">Titolo6
<p align="justify">Ecco il testo completo dell'articolo Ecco il testo completo  ...continua</p></font></div>
<div style="width: 130px; border: solid 1px; height: 100px; float: left; margin: 3px; clear: right;"><div style="background-image:  url(images/sfondo.jpg);" align="center"><font color="#FFFFFF">Primo Piano</font></div><font size="-2">Titolo5
<p align="justify">Ecco il testo completo dell'articolo Ecco il testo completo  ...continua</p></font></div>
</td></tr><tr><td>
<div style="width: 130px; border: solid 1px; height: 100px; float: left; margin: 3px; clear: left;"><div style="background-image:  url(images/sfondo.jpg);" align="center"><font color="#FFFFFF">Primo Piano</font></div><font size="-2">Titolo4
<p align="justify">Ecco il testo completo dell'articolo Ecco il testo completo  ...continua</p></font></div>
<div style="width: 130px; border: solid 1px; height: 100px; float: left; margin: 3px; clear: center;"><div style="background-image:  url(images/sfondo.jpg);" align="center"><font color="#FFFFFF">Primo Piano</font></div><font size="-2">Titolo3
<p align="justify">Ecco il testo completo dell'articolo Ecco il testo completo  ...continua</p></font></div>

<div style="width: 130px; border: solid 1px; height: 100px; float: left; margin: 3px; clear: right;"><div style="background-image:  url(images/sfondo.jpg);" align="center"><font color="#FFFFFF">Primo Piano</font></div><font size="-2">Titolo articolo2
<p align="justify">Ecco il testo completo dell'articolo Ecco il testo completo  ...continua</p></font></div>
</td></tr></table>
</div>
<div id="sotto"><table align="center" border="1" bordercolor="#000000" bordercolordark="#000000" bordercolorlight="#000000">
<tr><td width="150" background="http://www.sito.it/images/sfondo.jpg" align="center"><font size="-2">Homepage</font></td><td width="150" background="http://www.sito.it/images/sfondo.jpg" align="center"><font size="-2">Segnala questo sito</font></td><td width="150" background="http://www.sito.it/images/sfondo.jpg" align="center"><font size="-2">Community</font></td><td width="150" background="http://www.sito.it/images/sfondo.jpg" align="center"><font size="-2">Redazione</font></td><td width="150" background="http://www.sito.it/images/sfondo.jpg" align="center"><font size="-2">Credits</font></td><td width="150" background="http://www.sito.it/images/sfondo.jpg" align="center"><font size="-2">Contatti</font></td></tr>
</table></div>
</div>

</body>
</html>

**carp** · 09-01-2005, 13:30

..allora inizia con l'eliminare tutti i tag <font> sono proprietari di IE e con l'XhTML non c'entrano nulla...
puoi formattare il testo con i CSS

poi ci sono delle nidificazioni errate fra tabelle e div.

Utilizza le tabelle per cio per cui sono state concepite, e cioé intabellare dati e non strutturare un lay out.

elimina per quanto possibile i
.

e riposta il codice, così praticamente dovrei copiarmelo
riadattarlo e non servirebbe a molto, invece corregendolo passo passo magari è più semplice e comprensibile

Discussione: Soliti IE+Mozzilla

Strumenti discussione

Ricerca discussione

Visualizza

Soliti IE+Mozzilla

Permessi di invio