Differente visualizzazione sito web su Firefox

[jurij74]

Salve
verificando il mio sito internet www.scuolavelanapoli.it ho notato le seguenti differenze tra explorer e firefix:

1. il testo del footer si accavalla in firefox;
2. distanza tra blocco sup dx e inf dx differente rispetto a blocco sup sx e blocco inf sx in firefox e tra due pagine in explorer (base e chisiamo);
3. testo delle immagini di dx sgranato;

infine in firefox sono visibili le barre di scorrimento vert- ed oriz.

Grazie in anticipo per i consigli.

Di seguito css:

*{
margin:0px;
padding:0px
}

img{border:0px}

html
{
width:100%;
height:90%;
padding:52px 0px 0px 155px;
}

body
{
width:1000px;
padding:0;
background-repeat: no-repeat;
}

a, a:active, a:visited
{
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}

.slogan
{
width:728px;
float:left;
padding:8px 0px 0px 0px;
}

ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 728px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {

margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 260px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul li {

float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {

padding: 0px 11px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
/*background: #AE2B3D;*/

background: #ED0417;
color: #FFFFFF;


font: bold 9px/20px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 100%; /*For IE*/

}

#content
{
float:left;
margin:0px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;

width: 1000px;

}



.block3
{
width:708px;
height:173px;
float:left;
display:inline;
border: 1px solid #d1d1d1;
background-color:#AAE0EF;
background-repeat: repeat-y;
padding:2px 9px 16px 10px;
margin:5px 4px 0px 0px;
color:#000000;
}

.block3 img
{
float:left;
}


.block4
{
width:185px;
height:300px;
float:left;
display:inline;
/*background-image:url(images/1.jpg);*/

background-color: #ffffff;
padding:0px 9px 26px 0px;
background-repeat: repeat-y;
margin:0px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#636363;}

.block4 img
{
float:left;
/*margin:0px 7px 5px 19px*/
margin:3px 0px 2px 0px;

}


.block5
{
width:180px;
height:157px;
float:left;
display:inline;
/*background-image:url(images/1.jpg);*/

background-color: #F5F4F4;
padding:0px 9px 16px 0px;
/*padding:17px 9px 16px 15px;*/
background-repeat: repeat-y;
margin:2px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#636363;
}

.block5 img
{
/*float:right;
margin:0px 7px 5px 20px*/
float:left;

margin:0px 0px 1px 0px;
}


.block6
{
width:708px;
height:159px;
float:left;
display:inline;
background-color:#ffffff;
background-repeat: repeat-y;
padding:1px 6px 31px 0px;
margin:3px 4px 6px 0px;
color:#636363;
}


.block7
{
width:180px;
height:159px;
float:left;
display:inline;
/*background-image:url(images/1.jpg);*/
background-color: #ffffff;
padding: 1px 0px 16px 0px;
background-repeat: repeat-y;
margin:2px 0px 0px 0px;
color:#636363;
}

#rigth
{
width:224px;
height:17px;
float:left;
/*border-top:13px solid #AE2B3D;*/

padding:1px 33px 0px 3px;
margin:3px 0px 0px 3px
}

.item
{
width:171px;
height:205px;
float:right;
clear:both;
padding:14px 0 6px 15px;
}

.item img
{
float:right;
margin:0 5px 0 20px
}





#footer
{
float:left;
height:19px;
width:968px;
background-color:#ffffff;
margin:3px 0 0 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px
}

.copy
{
float:right;
color:#e4e4e4;
margin:-10px 27px 0px 0px;
}

.terms
{
color:#e4e4e4;
margin:3px 0px 0px 17px;
float:left;
font-weight:bold
}

[Mich_]

Anzitutto un codice di quel tipo va postato usando i tag VB (bottone # sopra l'area di inseirmento).
Secondo: un CSS senza la marcatura cui si riferisce ha poco senso.

Comunque vedo dei float senza i corrispondenti clear, per cui e` probabile che il problema sia quello.

[jurij74]

Ho realizzato questo sito in base ad un template che ho scaricato da internet
non sono bravo con i css.
cosa intendi per marcatura di riferimento del css e come devo utilizzare il clear per eliminare gli spazi
grazie per la pazienza

[Mich_]

La marcatura e` il codice HTML (==HyperText Markup Language = linguaggio di marcatura ipertestuale)
Il codice CSS senza lo schema dei tag cui si riferisce non e` interpretabile

Se ci sono degli elementi float, questi escono dal flusso degli elementi e vivono di posizione propria.
Se alla fine dei float ci metti un clear (all'interno del contenitore che contiene i float, prima della sua chiusura) allora forzi il contenitore a racchiudere i vari elementi flottati.
Vedi ad esempio: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

Non e` che il clear elimini gli spazi, ma fa in modo che il layout si comporti come presumibilmente lo avevi pensato (e che IE interpreta in modo difforme dalle specifiche W3C)