Bug 3px + Commenti condizionali

[Sonikag]

Ho questa barra a sinistra:

#sidebar-a2 {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 182px;
	padding-top: 6px;
	}

Su explorer (sia 7 che il 6) ho il bug dei 3px sul paragrafo che sta a fianco, ho quindi optato per risolverlo con i commenti codizionali.

<!--[if lte IE 6]>
<style type="text/css">
#sidebar-a2 {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 182px;
	padding-top: 6px;
margin-right:-3px;
}
</style>
<![endif]-->

Il problema che no funzionano... ho provato pure con <!--[if IE 7]> ma con entrambi i broswer non vedo cambiamenti.

[Myaku]

hai inserito un margin: 0px assieme a un margin-right: -3px

[Mich_]

Potrebbe essere un problema di ordine dei vari CSS.

Il CSS per IE DEVE essere inserito DOPO l'altro, altreimtni viene sovrascritto.
Infatti IE legge tutti i CSS, per cui non serve neppure riscrivere tutto, basta inserire (nel tuo caso) la riga con il margin-right negativo.

[Sonikag]

Grazie...
Ho fatto alcune correzioni.

<link href="miocss.css" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
<style type="text/css">
#sidebar-a2 {
margin-right:-3px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#sidebar-a2 {
margin-right:-3px;
}
</style>
<![endif]-->

Però continuo ad avere il problema sia su ie 6 che 7!

[Mich_]

Le due condizioni si possono integrare, naturalmente:
<!-- [if lte IE 7]><style ...>
...
</style><![endif]-->

C'e` pero` un potenziale problema:
l'uso del carattere - (meno) in un nome: i browser potrebbero interpretarlo come segno matematico.
Anche il carattere _ (underscore) ha probelmi in qualche versione di IE, per cui non conviene usarlo. Nel tuo caso io scriverei: sidebarA2 (ma ricorda che i CSS sono case-sensitive).

Devi anche capire dove sta il problema: se nel CSS o nel commento condizionale.
Per questo mettici dentro anche un bel
background-color:red;
cosi` capisci dove sta il problema (poi quado funziona lo togli)

[Sonikag]

Grazie mitch_

Qui l'arcano si complica...

1- Ho cancellato il contenuto della sidebar per assicurarmi che dentro non ci siano stili che sballano e ho sostituito il tutto con alcuni caratteri e


2- Nel css ora è così:

#sidebara2 {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 182px;
	padding-top: 6px;
	background-color:#ccf;
	}

mentre nella pag:

<!--[if lte IE 7]>
<style type="text/css">
#sidebara2 {
margin-right:-3px;
background-color:#fcf;
}
</style>
<![endif]-->

---

Con ff visualizzo la barra color lilla (#ccf), mentre con IE la visualizzo rosa (#fcf), però non ha corretto il bug dei 3px!!!

[Mich_]

OK, quindi ora il problema e` proprio di IE (era importante escludere altri problemi, tipo un banale errore di sintasi).

Come dire che il margin-right: -3px non serve per togliere quello spazio.
Io non ho esperienza con IE (uso linux e IE non gira), ma non ho mai visto hack che modificavano il margin-right. Invece a volte viene modificato il margin-left (probabilmente del blocco successivo); altre volte il bug dei 3 px viene tolto con un pleonastico
display:inline;
(ove questo non crei problemi di altro tipo)

Tra i "link utili" del forum c'e` una sezione per i problemi di IE ...

[Sonikag]

Grazie mille!
Se trovo la soluzione la posterò!

Sonia

[Sonikag]

Dunque... ho risolto il problema ma ne ho creato un altro!!!

Ho seguito questo articolo: http://css.html.it/articoli/leggi/53...a-e-pratica/4/ e per la precisione questo esempio: http://html.it/articoli/esempi/artic...perf/es5c.html

---

L'html ora è così:

<div id="cont">

<div id="sidebara2">
fff

ffff

fff

fff

fff
</div>

<div id="contenuto">  
    

ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp.</P>
    

ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp ppp.</P></div>

</div>

CSS:

	#contenuto {
	padding: 0px;
	margin: 0px;
	text-align:left;
	width: 573px;
	float: right;
	}
	
	#cont {
	background-color: #fff;
	width:100%;
	}

#sidebara2 {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 182px;
	padding-top: 6px;
	background-color:#fcf;
	}

Adesso su IE va che è una meraviglia mentre su FF non vedo lo sfondo bianco del cont!

Sonia

[Mich_]

Mi par di capire che vuoi le colonne #sidebara2 e #contenuto affiancate.
Per poterle ottenere e` necessario che la larghezza totale del #cont sia maggiore di 755 px.
Quindi in una situazione di quel tipo io aggiungerei a #cont min-width: 755px;

Poi lo sfondo del #cont lo puoi vedere:
- tra le colonne (se il #cont e` piu` largo di 755)
- in fondo alla colonna piu` corta (se le colonne non sono alte uguali).

Ma per un problema di FF (e browser della stessa famiglia) devi anche inserire un footer (eventualmente anche di un solo px), cha abbia il clear: both;.
In alternativa puoi dare il float anche a #cont.