Incompatibilità CSS con FireFox

**panoramix88** · 10-07-2008, 18:03

Nel sito che stò facendo , mi sorgono dei problemi con i CSS all'apertura delle pagine con Firefox mentre su IE6 e IE7 viene visualizzato tutto correttamente.
IL testo nel body si disallinea a sinistra e i colori che ho definito nel CSS si resettano tutti a "nero".
URL: www.arcieridellagironda.it

Codice CSS:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

.thrColElsHdr #container {
width:66em;
height:auto;
background: white;
margin: 0 auto;
border: 1px solid;
text-align: left;
background-color: white;
}

.thrColElsHdr #header {
margin: 0;
padding: 2px 0;
border-color:#0000FF;
background: #FFCC33;
border:double;
}

.thrColElsHdr #sidebar1 {
float: left;
width: 13em;
background:#FFCC33;
padding: 15px 0;
border-color:#0000FF;
border:double;
height:56em;
}
.thrColElsHdr #sidebar2 {
float: right;
width: 13em;
background:#FFCC33;
padding: 15px 0;
border-color:#0000FF;
border:double;
height:56em;
text-align:center;
}
.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
margin-left: 10px;
margin-right: 10px;
}

.thrColElsHdr #mainContent {
margin: 0 12em 0 12em;
}

.thrColElsHdr #footer p {
margin: 0;
padding: 10px 0;
}

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

**fcaldera** · 10-07-2008, 18:06

IL testo nel body si disallinea a sinistra

.thrColElsHdr #container {
...
text-align: left;
}

e inoltre la tabella che usi per gli orari è più stretta rispetto alla colonna... prova a dargli una width

e i colori che ho definito nel CSS si resettano tutti a "nero".

body {
...
color: #000000;
}

edit: adesso ho capito come hai messo la colonna centrale...

**fcaldera** · 10-07-2008, 18:27

se tocco qualsiasi cosa della colonna centrale il layout deborda

ripensa ad un layout senza tabelle e progettato così

codice:

<body>

   <div id="contenitore">
       <div id="colsx" class="col">...contenuti colonna sx ... </div>
       <div id="colcent" class="col">...corpo centrale... </div>
       <div id="coldx" class="col">...contenuti colonna dx ... </div>
   </div>

</body>


#contenitore { height: auto; overflow: hidden; background: #fff; width: 66em;}
#contenitore div.col { float: left; display: inline; text-align: center;}
#colsx, #coldx { width: 13em; background: #fc3; }
#colcent { width: 39.99em; }

**panoramix88** · 10-07-2008, 19:29

se io ho un header di questo tipo:

#header {margin: 0; padding: 2px 0; border-color:#0000FF; background: #FFCC33; border:double;}

Perchè su IE7 il bordo diventa blu e su Firefox rimane nero? quello che non capisco

**fcaldera** · 10-07-2008, 20:28

prova a scrivere
border: 1px #00f double;

**panoramix88** · 11-07-2008, 00:17

Ho ritoccato il CSS e in oarte ho risolto. Però non capisco perchè le immagini in rollover con firefox..non visualizza l'immagine ma il contenuto del tag "alt"...

**panoramix88** · 11-07-2008, 00:53

mi rispondo da solo.. tutto risolto.. grazie fcaldera per i tuoi preziosi consigli

Mitico!!!

Discussione: Incompatibilità CSS con FireFox

Strumenti discussione

Ricerca discussione

Visualizza

Incompatibilità CSS con FireFox

Permessi di invio