Css giusto su IE sbagliato su Firefox

[fra diavolo]

Salve a tutti.
Sto progettando un sito web con CSS+xhtml
Paradossalmente la visualizzazione in html viene perfetta, mentre se visualizzo lo stesso su Firefox non viene visualizzato affatto con i parametri da me richiesti.

Il CSS in questione è questo:



body {
background: #66FFFF repeat;
font-family: Verdana, Arial,"Helvetica";
font-size: 12px;
color: #333;
}
/*GENERALE*/
img {border:0;display:block}
/*GENERALE END*/


#main_container {
margin: auto;
width: 777px;
}


/*HEADER*/
#header {
margin:auto;
width: 777px;
}

#logo {
margin-top: 21px;
width: 277px;
height: 218px;
float: left;
background:#fff;
}

#logo img {
vertical-align: middle;
}

#side_head {
float: right;
margin-top: 21px;
}
/*HEADER END*/

#down_head
{
margin:auto;
width: 777px;
background-color:#06799F;
}
#menu03o{
width: 100%;
font: 100% Arial, Helvetica, sans-serif;
}
#menu03o ul{
margin: 0;
padding-left: 0;
list-style: none;
}
#menu03o li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu03o a:link, #menu03o a:visited{
float:left;
background: 0 0 repeat;
background-color: #06799F;
color: white;
margin: 0em;
padding: 7px 12px 10px 12px;
font-weight: bold;
text-decoration: none;
border-top: 4px solid #06799F;
}
#menu03o a:hover, #menu03o a:focus, #menu03o a:active{
color: #66FFFF;
background: 0 0 repeat;
background-color: #06799F;
border-top: 4px solid #66FFFF;
}
/*PARTE TESTO*/
#container {
margin:auto;
width: 777px;

background: #fff url("images/backcontainer.gif") repeat
}

#fotopres
{
float:left;
width: 481px;

}
#testo
{width: 296px;
height: 359px;
float:right;


}
#testo p, #fotopres p
{
padding: 5px 10px;
text-align:justify;
line-height: 18px;

}
/*bordi arrotondati*/
b.rtop, b.rbottom{display: block; background: #66FFFF repeat }
b.rtop b, b.rbottom b{display: block; height: 1px; overflow: hidden; background: #06799F}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.r5{margin: 0 1px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 10px}
.testo2{margin: 0 1px; background: #06799F; color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-align:center}
/* fine bordi arrotondati*/

#fotopres img, #testo img
{
border-color: white;
border-style:dashed;
border-width:2px;
display:block;
}


Innanzitutto perchè succede questo? lo chiedo perchè ho un altro sito al quale son riuscito a dare un effetto con firefox e chroome ma su IE questo effetto non esce.

[stevieray]

mi associo alla richiesta, anche io ho un css che funziona correttamente su IE6 e non su Firefox3.5. Per ragioni di lavoro devo usare queste due versioni dei browser.
Grazie per l'aiuto!

ecco il mio css:
#container {
border-width: thin;
border-color: #003366;
border-style: solid;
position: absolute;
font-size: 10pt;
color: #003366;
font-family: Verdana;
height: 745px;
width: 100%;
padding: 3p;
text-align:center;
}

#header {
padding-top: 7px;
border-width: thin;
border-color: #003366;
border-style: solid;;
position: relative;
height: 40px;
width: 100%;
margin: 1px
}

#toolbar {
border-width: thin;
border-color: #003366;
border-style: solid;;
height: 25px;
width: 100%;
margin: 1px
}

#sidebar {
position: relative;
border-width: 0px;
border-color: #003366;
border-style: solid;;
margin-right: 0px;
width: 23%;
min-width: 10px;
min-height: 10px;
height: 100%;
top: 10px;
margin-bottom: 1px;
margin-top: 1px;
}

#box {
position: relative;
border-width: thin;
border-color: #003366;
border-style: solid;;
width: 97%;
height: 26%;
margin-bottom: 6px;
margin-top: 1px;
}

#content {
position: relative;
border-width: thin;
border-color: #003366;
border-style: solid;
float: left;
width: 75%;
min-width: 20px;
min-height: 20px;
height: 100%;
margin: 1px
}

[fra diavolo]

A me la versione di Ie è la 7 grazie

[fra diavolo]

Ciao Stevieray e ciao a tutti volevo solo avvisarvi che ho risolto il problema
In pratica quando usi l'attributo float devi anche utilizzare l'attributo clear.

Mettendo nei posti adatti la stringa clear:both; la visualizzazione dovrebbe diventare uguale a quella di Internet Explorer.

Spero di esserti stato d'aiuto

[tapu]

Ciao , anche io ho dei problemi su questi 2 browser , ie legge il css mentre firefox me lo ignora, non ho provato ancora con opera... non volevo strapparmi i pochi capelli rimasti

cmq , come mai fa questo ?
css non è uno standard che i browser leggono?
come si fa a risolvere questo problema?

io non ho fatto gran che , mi sono limitato al posizionamento dei div con per ogni tag ho inserito :

position
top
right
middle
left
widgth

ovviamente i valori sono leggermente diversificati.

grazie delle risp e della pazienza!

[ispuk]

ragazzi per chiedere aiuto è sempre meglio mostrare un link con il sito incriminato

[tapu]

per ora il mio gira in localhost e sto cercando di risolvere la questione , ma non trovo nulla di strano , inserisco correttamente i valori anche perchè in ie li vede ...
ma non riesco a capire , un'aplicativo simile lo fatto in java e i css hanno preso sia in ie che in firefox!

ho cercato un po sull rete un adiscussione ('ben fatta') sull'incopatibilità di css in alcuni casi , ma non ho trovato nulla!

ho il plugin di firefox per i css e lui dice che manco li vede ...

inseriti sono inseriti correttamente , ho fatto copia incolla dall'altra apllicazionie del <link>

ciao

[ispuk]

secondo me se neanche lilegge c'è un problema di fondo,non di dichiarazione regole

hai messo un link a un foglio.css o hai i css interni alla pagina?


che non li legga proprio mi sembra strano,forse li legge e li interpreta in maniera diversa e allora entriamo in un'altro discorso



io non credo che il clear risolva tutto, ho molti layout con i float senza clear che funzionano perfettamente su ogni tipo di browser(testati)

non voglio dire che sono un genio,ma che usando codici puliti ,senza tanti margin ,position etc si riesce bene a fare ciò che si vuole ,per me il trucco è usare meno regole possibili

nel tuo caso vedo molte dichiarazioni di margin,top,etc etc,è un macello partire ad aiutarti senza neanche vedere come lavora la pagina sul browser