[CSS] semplice div contenitore

[side-server]

ciao a tutti, ho creato questo:

<div id="container">
<div id="text">Testqua</div><div id="img">xxx</div>
<div id="text2">ciaociaociaociaociaociao</div>
</div> 

questo è il suo CSS:

#container
{
    position: static;
    width: 402px;
    border: 1px solid red;
}
#text
{
    float: left;
    width: 300px;
    border: 1px solid red;
}
#img
{
    float: left;
    width: 100px;
    border: 1px solid red;
}
#text2
{
    clear: both;
    width: 400px;
    border: 1px solid red;
} 

Il problema? da => IE 5.5 e 7 compreso si vede perfetto, con Firefox invece il div #img va a capo e non rimane in linea, come mai? eppure le misure dei pixel sono corrette

[Giupap]

ciao, prova a dare al div #img l'attributo position col valore "absolute", specifichi anche left e top (in pixel) e dovrebbe rispettarti le posizioni con qualunque browser provi a vedere la pagina

[side-server]

ora è il contrario, con FF tutto ok ma non si vede con IE

[Mega69]

E' una soluzione idiota, ma funziona: metti tutto ciò che deve stare in una riga nel tag <nobr></nobr>

[fcaldera]

a occhio direi invece che c'è un errore sulle misure del box:

quello più esterno ha width 402px (i bordi poi lo portano a 404 ma nel discorso non importa)
dentro hai un blocco da 300 + 2 = 302
e un'altro blocco da 100+2 = 102

firefox aggiunge correttamente 2px sui bordi mentre IE li incorpora nella larghezza (IE pensa che ad esempio i blocchi siano di 298+2 e 98+2)

il totale dei blocchi interni è quindi largo 404px
Pertanto o aumenti di due px il contenitore oppure togli almeno una coppia di bordi ad uno dei due div

Ciauz

[side-server]

Originariamente inviato da fcaldera

posto il codice che sto usando io ora per la prova;
con IE, 5.5, 6 e 7 nessun problema, FF invece mi da 2px in eccesso, di conseguenza se tolgo dal div i 2px in eccesso con FF si vede bene e con IE no, i ruoli si invertono
Non ne vengo fuori

ev. anche qui: http://www.radium.cc/test.htm

<style>
body
{
background-color: #EEEADE;
}

#container
{
    width: 402px;
    border: 1px solid black;
    background-color: #EEEADE;
}
#text
{
    float: left;
    width: 300px;
    background-color: green;
    border-bottom: 1px solid black;
}
#img
{
    float: left;
    width: 100px;
    background-color: green;
    border-bottom: 1px solid black;
}
#text2
{
    clear: both;
    width: 400px;
    background-color: #EEEADE;
    height: 100px
}
#text3
{
    clear: both;
    width: 400px;
    background-color: #EEEADE;
    border-top: 1px solid black;
}
</style>

<div id="container">
<div id="text">Testqua</div><div id="img">xxx</div>
<div id="text2">ciaociaociaociaociaociao</div>
<div id="text3">altrotesto</div>
</div> 

[fcaldera]

dovresti inizare a inserire un doctype valido (ti suggerisco xhtml 1.0 strict) e validare la pagina in base a quel doctype. Infatti senza doctype IE può comportarsi in modo anomalo ed è possibile che facendo questo il problema si risolva da solo.

[side-server]

Originariamente inviato da fcaldera
dovresti inizare a inserire un doctype valido (ti suggerisco xhtml 1.0 strict) e validare la pagina in base a quel doctype. Infatti senza doctype IE può comportarsi in modo anomalo ed è possibile che facendo questo il problema si risolva da solo.

sto usando xhtml 1.1 ma il problema c'è sempre.


edit: il mio editor prima della dichiarazione della DTD mi ha messo <?xml version="1.0"?>
se la pagina è XHTML cosa centra XML
cmq togliendo la dichiarazione di documento XML ora è tutto ok.
solo su IE 5.5 ho ancora quel problema ma risolvo facendo caricare un .css differente e via.

tutte ste differenze di interpretazione degli standard da parte dei browser a volte è un delirio

[fcaldera]

IE ha problemi noti quando si utilizza il prologo XML, però l'esempio che avevi postato prima aveva solo stile e codice html

[side-server]

Originariamente inviato da fcaldera
IE ha problemi noti quando si utilizza il prologo XML, però l'esempio che avevi postato prima aveva solo stile e codice html

Errore mio non aver postato per praticità tutto il codice già dall'inizio.