Questo codice è corretto ?

[Mauro gol]

Vi spiego il mio problema:

Lavoro in ambinete MAC, utilizzando Safari la pagina si vede come la voglio io, senza alcun tipo di problema... usando IE, nel terzo e quarto div della pagina ( chiamati entrambi "prodotti" ), compare un strano spazio in basso, io penso sia dovuto al padding-top: 15px, però io penso di aver scritto il codice nel modo corretto.

se avete voglia di dargli un occhiata...

foglio di stile:

div.menu_prodotti { 
	width: 760px;
	border: 1px solid #cccccc;
	margin: 1px;
	margin-left: auto;
	margin-right: auto;
}
div.menu_prodotti_antifurto { 
	width: 248px;
	height: 285px;
	margin: 0px;
	border: 1px solid #333333;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding-left: 5px;
	padding-top: 15px;
	text-align: left;
	float: left;
	background-image: url(immagini/sfondo_menu_antifurto.png);
}
div.menu_prodotti_automazione { 
	height: 285px;
	border: none;
	margin: 0px;
	margin-left: 253px;
	margin-right: 253px;
	padding-left: 5px;
	padding-top: 15px;
	text-align: left;
	background-image: url(immagini/sfondo_menu_automazione.png);
}
div.menu_prodotti_antincendio { 
	width: 248px;
	height: 285px;
	margin: 0px;
	border: 1px solid #333333;
	border-top: none;
	border-bottom: none;
	border-right: none;
	padding-left: 5px;
	text-align: left;
	padding-top: 15px;
	float: right;
	background-image: url(immagini/sfondo_menu_antincendio.png);
}
div.menu_prodotti_videocontrollo { 
	width: 248px;
	height: 135px;
	margin: 0px;
	border: 1px solid #333333;
	border-top: none;
	border-bottom: none;
	border-left: none;
	padding-left: 5px;
	padding-top: 15px;
	text-align: left;
	float: left;
}
div.menu_prodotti_parti_ricambio { 
	height: 135px;
	margin: 0px;
	border: none;
	margin-left: 253px;
	margin-right: 253px;
	padding-left: 5px;
	padding-top: 15px;
	text-align: left;
}
div.menu_prodotti_linceenergy { 
	width: 248px;
	height: 135px;
	margin: 0px;
	border: 1px solid #333333;
	border-top: none;
	border-bottom: none;
	border-right: none;
	padding-left: 5px;
	padding-top: 15px;
	text-align: left;
	float: right;
}

la pagina html:

<div class="menu_prodotti">
<div class="menu_prodotti_antifurto">
<span class="Stile1">ANTIFURTO VIA FILO</span>
<ul>[*]Centrali[*]Antifurti in kit[*]Sensori[*]Segnalatori[*]Org. di comando[*]Contatti[*]Alimentatori[*]Batterie[*]Schemi di coll.[/list]
<span class="Stile1">ANTIFURTO VIA RADIO</span>
<ul>[*]Genio Allarme[/list]
</div>
<div class="menu_prodotti_antincendio">
<span class="Stile1">ANTINCENDIO</span>
<ul>[*]Convenzionale[*]Indirizzato[/list]
</div>
<div class="menu_prodotti_automazione">
<span class="Stile1">AUTOMAZIONE</span>
<ul>[*]Geniomatic[*]Idromatic[*]Undermatic[*]Slide[*]Rotomatic[*]Lifmatic[*]Accessori comuni[/list]
</div>
</div>

<div class="menu_prodotti">
<div class="menu_prodotti_videocontrollo">
<span class="Stile1">VIDEOCONTROLLO</span>


In allestimento</p>
</div>
<div class="menu_prodotti_linceenergy">
<span class="Stile1">ILLUMINAZIONE DI EMERGENZA</span>


Accedi al sito ufficiale</p>
</div>
<div class="menu_prodotti_parti_ricambio">
<span class="Stile1">PARTI DI RICAMBIO</span>
<ul>[*]Parti di ricambio[/list]
</div>
</div>

p.s. sinceramente mi sono stufato dell'incompatibilità tra i vari browser, quindi se mi dite che il codice così come è scritto è corretto, vado avanti per la mia strada...

[IDS]

Per quanto ne so io due <div> non si possono incorporare, ne apri uno, lo chiudi e poi ne apri un altro.

Comunque controlla il codice dal sito W3C



Anzi, già fatto, se usi un html 4.01 transitional mi dice che il tuo codice è corretto...

[Mauro gol]

sicuro dei div ?

il w3c non mi da problemi...

[smal]

Originariamente inviato da Mauro gol
il w3c non mi da problemi...

Beato te! Io ho sempre problemi col Consorzio.

[Jerry Masslo]

i div si possono annidare

i problemi li riscontro anche con opera

devi considerare i problemi di ie col box model

se dai un width o un height a ie in quirk mode (usando un doctype per cui funziona in modalità retrocompatibile) un eventuale padding o border non verrà aggiunto all'ingombro totale come invece dice lo stantard e come fanno i browser standard

se provi ad ingrandire i caratteri poi noterai altri problemi, il testo uscirà fuori dai box, perché height stabilisce un'altezza fissa, è solo ie che lo legge come min-height e allunga il box all'aumentare dell'ingombro del testo


spero che queste indicazioni ti siano utili

[Mauro gol]

il quirk mode sinceramente non lo conosco...

il tuo discorso mi è certamente utile, perchè hai centrato il mio problema... però io non so tradurre questa tua analisi in codice...

per il carattere che mi consigli di fare ?

[Jerry Masslo]

il tuo modello è complicato dall'uso di più di due pseudo colonne di colore diverso, senza usare tabelle per avere questo effetto di tipo tabellare occorre o un annidamento preciso o altro (tipo una cosa che ho fatto io che sfruttava il colore dei bordi per la simulazione) in tutti i casi non si ha mai la interdipendenza delle altre colonne ma si può solo ottenere che vi sia una colonna (quella più lunga) che trascina le altre, ti cerco il link per questo tipo di cose.

te l'ho trovato fra i segnalibri

per il quirk e standard mode, guarda qui i browser hanno comporatamenti differenti a secondo del doctype.

per il min-height, nel caso ti servisse, si usa uno stratagemma per cui si ha il min-height con tutti i browser:


.AltezzaMinima {min-height:400px;/*per i browser standard*/
height:auto!important /*important viene letto dai browser
standard e serve per sovrascrivere la riga successiva che invece sarà quella attiva in ie che non legge l'important*/
height:400px; /*questa è quello che leggerà ie che e facendolo funzionare come fosse un min-height si comporterà come gli altri browser*/
}

in questo modo qualora l'ingombro dei caratteri superi lo spazio assegnato essendo quello lo spazio minimo lo stesso il box seguirà i caratteri


se ti accontenti di soli due colori o anche vuoi usare immagini di sfondo ti conviene farti fare un layout da questi ed eventualmente lo adatti

[Mauro gol]

Mi sono impelagato in un problema niente male... VVoVe: a saperlo lasciavo la tabella!

seriamente, ho letto il dibattito del primo post che hai linkato... mi sembra di aver capito, che la soluzione trovata da shores ( ?! ) sia quella adatta a me... giusto ?

per quanto riguarda gli altri due argomenti...

cioè tu mi dici di impostare il doctype in quik mode ? per farla breve

il min-height che mi hai spiegato è relativo alla dimensione del carattere, se ho capito bene se il carattere supera le dimensioni del box, il box si allarga di conseguenza... per questo forse ce la posso fare da solo

scusami se sono un pò di coccio, ma mi trovo di fronte per la prima volta ad argomenti per niente banali per me... abbi un pò di pazienza!

[Mauro gol]

Ho provato a leggere il codice di Shores, mani nei capelli per me...

Io sto lavorando con un foglio di sitile esterno, e non ho la più pallida idea di come impostare il codice nei css e di come richiamrlo nell'html... VVoVe:

[Jerry Masslo]

il min-height si riferisce all'altezza dei box non dei caratteri, cioè col min-height puoi impostare un'altezza che non sia fissa ma che nel caso s'ingrandiscano i caratteri, (cosa che consentono di fare alcuni browser sempre e ie quando webmaster approssimativi non usano misure in px o pt giusto per fissare i caratteri) il box non rimarrà come un fesso a guardare i caratteri che gli escono fuori ma li seguirà.

il mio consiglio è di non ricorrere a quel tipo di soluzioni a meno che non se ne possa fare a meno, ma molto più semplicemente contentarsi di due soli colori diversi e farsi fare la struttura dal link che ti ho dato, o usare un'immagine si sfondo che simula le colonne, possibile con layout fissi.

per quanto riguarda quirk e standard mode, personalmente preferisco avere i browser standard appunto in standard e gli ie in quirk, questo perché solo ie6 ha lo standard mode gli altri restano comunque in quirk e quindi aumenterebbero le tipologie di comportamento e per di più non è che lo standard di ie6 sia na' bellezza.