IE aggiunge 1 px di margin di testa sua !

[Darksky]

Salve.

Sto cercando di convertirmi ai css e ho intenzione di iniziare con la nuova versione del mio sito. Farlo alla vecchia maniera non mi costerebbe nulla ma voglio farlo coi css.

Sto avendo un problema con internet explorer. In pratica sembra aggiungere un margine di 1 pixel a sinistra di ogni layer, anche se io gli impongo 0 pixel di margine.

In pratica ho dei layer che corrispondono alle 3 colonne. Dentro ci metto dei layer box per definire il testo. Se inserisco delle immagini ( per fare le intestazioni di ogni blocco/box ) queste immagini in IE sono shiftate di 1 pixel a destra e si vede quindi questa linetta di spazio libero.

Di seguito il codice:

CSS:

<div id="Contenitore1">


  <div id="Corpo">
      <div id="Colonna162">
           <div id="CE_home">[img]immagini/titolo_guide.jpg[/img]
<span> TESTO TESTO TESTO  </span></div>

        </div>
	
	
        <div id="Colonna512"><div id="CE_home">[img]immagini/titolo_rilievo.jpg[/img]
<span>TESTO TESTO TESTO</span></div></div>
	
        <div id="Colonna302"><div id="CE_home">[img]immagini/titolo_ultime.jpg[/img]

	  <span>CTESTO TESTO TESTO</span></div></div>
<div style="clear:left;"></div>
</div>
<div style="clear:left;"></div>

</div>

CODICE CSS:

div#Contenitore1{ width: 980px;
    margin: 0 auto;   /* centra browser caccolosi*/
    }
#Corpo {
	border-top: 1px solid #686868;
	border-bottom: 1px solid #686868;
	background: transparent url("immagini/backgroundcorpo.gif");
	padding: 0px;
	margin: 0px;
	clear: both;
	width: 980px;
		}
	

#Colonna162 {	
	width:162px; 
	margin-left: 1px;
	float:left;
	
	}
	
		
	

#Colonna512 {
	width:512px; 
	float:left;
	margin-left: 1px;
	
}



#Colonna302 {	
	
	width: 302px; 
	float: left;
	margin-left: 1px;
}


#CE_home span { 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.4em;
	color: #575757;
	padding: 0px;
	

}

[cemsal]

Ma sei sicuro che quel pixel, non sia quel margin-left:1px che hai dato su ogni elemento css colonna? Perchè a me, sù Mozilla, mi da lo stesso effetto che su IE.

P.S. Che palle quando il CODE allarga la pagina!!!

[Darksky]

eh ma quel margin left mi serve per scalare volutamente di un pixel a destra in modo da non sovrascrivere le linee verticali che dividono le 3 colonne ( sx, corpo centrale, dx )
Le linee verticali le ho ottenute con uno sfondo a 4 punti opportunamente distanziati che si ripete in tutto il layer contenitore dei layer relativi alle 3 colonne.
Sembra che IE ci voglia cmq mettere del suo, aggiungendo un ulteriore pixel

PS: scusate per lo splafonamento della pagina, vedo di rimediare

edit: azz...c'è un limite di un ora dal post per le modifiche degli stessi..mi spiace

[Darksky]

Giuro che erano quasi 3 settimane che sbattevo la capoccia su tale problema e facevo ricerche su internet.
Poco fa ho trovato un articolo non proprio relativo a tale mio problema ma ho carpito un "display: inline" da inserire nel layer....ed ho risolto tutto !

[dimitrij]

Originariamente inviato da Darksky
Giuro che erano quasi 3 settimane che sbattevo la capoccia su tale problema e facevo ricerche su internet.
Poco fa ho trovato un articolo non proprio relativo a tale mio problema ma ho carpito un "display: inline" da inserire nel layer....ed ho risolto tutto !

A volte e cosi'... Ci si sbatte tanto e la soluzione e' dietro l'angolo