bug del padding di colonne laterali dimensionate percentualmente

[nourdine]

ciao

mi date un occhio a questo layoput fluido: http://www.nourdine.net/rep/reposito...otale3Col.html

le colonne laterali sono flottanti (a destra e a sinistra) e di larghezza percentuale, mentre quella centrale e dimensionata tramite i margin destro e sinistro sempre in percentuale pari alla larghezza delle colonne laterali.

Con firefox tutto ok. Con ie6/7 invece, il padding delle colonne laterali va a farsi benedire! Cioè spiego meglio: il padding applicato ai testi presenti nei paragrafi contenuti nelle colonne laterali è corretto. E' solo applicando il colore allo sfondo dei p che si nota come essi si estendano per tutta la larghezza delle colonne lkaterali.

che razza di bug è?

[gabar-el]

non riesco a capire bene qual è il tuo problema, forse ti riferisci al bug dei 3px di ie?

[nourdine]

No non è il 3px jog!

se guardi i paragrafi (in blue) delle 2 colonne laterali con firefox ed IE vedi la differenza e capisci di quello cxhe parlo. I paragrafi non dovrebbero estendersi fino ai confini delle colonne laterali ma dobvrebbero arrestarsi a dove comincia il padding.

invece in IE6/7 i paragrafi vanno fino al bordo oltrepassando il padding. Il testo contenuto nei paragrafi invece, si conmporta correttamente e rispetta il padding delle colonne.

[gabar-el]

probabile dipenda dai padding di ie, che vengono considerati in maniera diversa. prova a lavorare sui margin del contenuto invece che sui padding del contenitore....

[nourdine]

I padding di IE6/7 lavorano come tutti gli altri padding della galassia. il box model di questi browser è, di default, sano!

quello li è un bug!

Tra l'altro nota come il padding della colonna centrale sia rispettato dai p interni (il fenomeno non si presenta qui). Questo significa che il fatto che le due colonne laterali siano flottanti gioca un ruolo chiave.

Quale che sia nello specifico questo ruolo solo Dirk Gently lo può svelare.

[gabar-el]

credo ci siano errori nella scrittura del css. A mio avviso non puoi rendere la proprietà di un elemento width in percentuale, poichè la domanda a riguardo è sempre: "percentuale di cosa?" e la risposta è "del suo contenitore", che se non erro tu rendi auto, quindi come fa a basarsi su una percentuale (se vuoi tenerlo fluido, direi che dovresti dare una percentuale anche alla larghezza del primo div, e poi magari agire sui min-max width). Ho provato infatti a modificare un attimo il css a riguardo e precisamente questo passo:

div#navigation2 {
	font-size: 1.4em;
	float: left;
	width: 200px;
	background-color: transparent;
	color: #fff;
	padding: 9px;
	border-bottom: 3px solid blue;
	margin-bottom: 2em;			
}

le modifiche sono atte giusto a far vedere bene la cosa, ma così facendo non ci sono i problemi di cui prima. Probabilmente scrivendo meglio questo passo si potrebbe ottenere un buon risultato anche in altri modi, magari agendo sui margin auto o altro. cmq, ora dovresti avere qualche info in più per risucire da te a trovare la soluzione migliore in base alle tue esigenze....

[nourdine]

errori? l'unico errore è usare ie!

bella pensata comunque; ho messo a 100% il width del contenitore ma niente. secondo me è il float e il width percentuale: ie non ce la fa!!! poverino ...

[gabar-el]

mmmhhh... io rimango della mia, anche perchè come ti ho postato ho risolto. ie vede bene con quella parte di codice modificato come ti ho scritto, devi solamente trovare la soluzione migliore per te. io non ho esperienza di layout fluidi, quindi più di tanto non so.
Resta vero che ie non gliela fa....

[nourdine]

Originariamente inviato da gabar-el
mmmhhh... io rimango della mia, anche perchè come ti ho postato ho risolto. ie vede bene con quella parte di codice modificato come ti ho scritto, devi solamente trovare la soluzione migliore per te. io non ho esperienza di layout fluidi, quindi più di tanto non so.
Resta vero che ie non gliela fa....

si ho capito che fissando la larghezza delle colonne funziona. ma l'essenza del layout fluido è proprio quella di essere fluido! fissandpo la larghezza sono capace anch'io ... hihihi

senza offesa eh!

grazie lo stesso ...

[gengix]

Se te lo dico quanto mi dai? =)

Il problema è il padding in %. La motivazione chiedila al tuo amico investigatore=).
Prova copiarti questo codice che ho fatto, il padding è settato in em che è cmq una misura da layout fluido:

css:

*
{
margin:0;
padding:0;
}
html
{
font-size:100%;
}
body
{
font: 1em Arial, Verdana, Tahoma;
text-align:center;
}
#cont
{
width:100%;
text-align:left;
}
#head
{
width:auto;
background: yellow;
}
#left
{
width:20%;
float:left;
padding: 1em;
background: red;
color:#fff;
}
#left p, #right p
{
background:gray;
margin-bottom:5%;
}
#cent
{
background: blue;
color:#fff;
}
#right
{
float:right;
padding: 1em;
width:20%;
background: green;
color:#fff;
}
#footer
{
clear:both;
width:100%;/*bug col padding IE*/
background:gray;
color:#fff;
}

xhtml:

<div id="cont">
<div id="head">
<h1>This is Head</h1>
</div>
<div id="left">



left left left left left left right right left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>
</div>
<div id="right">



right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>





right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>




right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>




right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>




right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>





right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>




right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>




right right right right right right right right right
right right right right right right right right right
right right right right right right right right right
</p>
</div>
<div id="cent">



center center center center center center right right center
center center center center center center center center center
center center center center center center center center center
</p>



center center center center center center center center center
center center center center center center center center center
center center center center center center center center center
</p>



center center center center center center center center center
center center center center center center center center center
center center center center center center center center center
</p>



center center center center center center center center center
center center center center center center center center center
center center center center center center center center center
</p>



center center center center center center center center center
center center center center center center center center center
center center center center center center center center center
</p>



left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>



left left left left left left left left left
left left left left left left left left left
left left left left left left left left left
</p>
</div>
<div id="footer">


This is the footer</p>
</div>
</div>