Problema CSS con IE6

**i@nn@** · 18-04-2008, 10:01

Premetto che sono un dilettante con i css. Sto provando a realizzare un layout con i css e da qualche giorno sto sbattendo la testa su un problema di compatibilità con IE6. Ho testato il mio codice sia con Opera, Safari, FF, IE7 e funziona tutto alla perfezione, mentre con IE6 il layout "sbraga".
Posto il codice del CSS e dell'HTML, se qualcuno sa darmi una mano..

codice:

/*stili per il layout fisso con posizionamenti assoluti*/
html,body{
	margin: 0;
	padding:0
}

body{
	font-family: arial,sans-serif;
	font-size: 76%;
	text-align: center;
	background-color: #bdd9ea;
}

div#container{
	position:relative;
	width: 1024px;
	height: 744px;
	margin: 0 auto;
	text-align: left;
	background-color: #ffffff;
}

/*stili generici, su header e footer*/

div#header{	
	background-color:#ffffff;
	color: #ff0;
	background: url(../image/testata.jpg) no-repeat;
	height: 133px;
}
	
h1,h2{
	margin: 0;
	padding:0;
}

h1{
	padding-left:0.5em;
	font: bold 2.3em/80px arial,serif;
}

h2{
	color: #999;
	font-size: 1.5em;
}

div#footer a{
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
}

/*stili specifici per il layout*/
div#navigation{
	background-color: #ffffff;
	width: 274px;
	height: 593px;
	background-image: url(../image/bg_menu.jpg);
	background-repeat: no-repeat;
	float: left;
}

div#menu{
	width: 267px;
	height: 320px;
	z-index: 11;
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: black;
	float: left;
	margin-left: 100px;
	margin-top: 50px;
}

div#content{
	background-image: url(../image/bg_nutriben.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 593px;
	float: right;
}

div#testo{
	width: 267px;
	height: 320px;
	z-index: 11;
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: black;
	float: left;
	margin-left: 150px;
	margin-top: 150px;
	overflow: hidden;
	text-align: justify;
}

div#flash{
	width: 286px;
	height: 445px;
	float: right;
	z-index: 10;
	background-color: transparent;
	margin-right: 47px;
}

div#footer{
	height: 24px;	
	text-align:right;
	padding: 0.5em;
	padding-left: 10px;
	padding-right: 10px;
	background-image: url(../image/bg_footer.jpg);
	color: #ffffff;
	font-size: 9px;
	background-repeat: no-repeat;
	clear: both;
}

/*stili per la navigazione*/
div#navigation ul{
	margin: 1em 0 1em 1em;
	padding: 0;
	list-style-type: none;
}

div#navigation li{
	margin: 0;
	padding: 0;
}

div#navigation a{
	color:#369;
	font: normal bold 1.2em/1.6em arial,sans-serif;
	text-decoration: none;
}

div#navigation a:hover{
	color: #033;
	text-decoration: underline;
}

div#navigation a#activelink{
	color: #033;
	text-decoration: none;
}

ed ecco l'html:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Prova CSS</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="generator" content="HAPedit 3.0">
	<script language="javascript">AC_FL_RunContent = 0;</script>
	<script src="swf/AC_RunActiveContent.js" language="javascript"></script>	
	<style type="text/css">
		@import url("css/main.css");
		a#viewcss{color: #00f;font-weight: bold}
	</style>
</head>

<body>




<div id="container">
    <div id="header">

    </div>
	
	<div id="navigation">
		<div id="menu">
			<table border="1">
				<tr>
					<td>
						Ciccio


						Pasticcio


						Via le dita da naso


					</td>
				</tr>
				<tr>
					<td bgcolor="#ff00ff"></td>
				</tr>
			</table>
			
		</div>
	</div>
    
	<div id="content">
		<div id="testo">
			Lorem ipsum dolor sit amet, fames mauris nisl amet, lacus sapien convallis elit ullamcorper pede. Amet senectus, tempus sit, elementum magna at nunc, quis est ultricies congue. Diam nulla quam, purus vulputate pellentesque urna non vitae, adipiscing suscipit est, justo semper pellentesque convallis auctor nec, lacus justo lacus. Nunc semper ac eu ullamcorper proin duis. lorem quam et in mauris quis. Eu tellus enim aliquam consectetuer eget. 
			justo semper pellentesque convallis auctor nec, lacus justo lacus. Nunc semper ac eu.
			Lorem ipsum dolor sit amet, fames mauris nisl amet, lacus sapien convallis elit ullamcorper pede. Amet senectus, tempus sit, elementum magna at nunc, quis est ultricies congue. Diam nulla quam, purus vulputate pellentesque urna non vitae, adipiscing suscipit est, justo semper pellentesque convallis auctor nec, lacus justo lacus. Nunc semper ac eu ullamcorper proin duis. lorem quam et in mauris quis. Eu tellus enim aliquam consectetuer eget. 
			justo semper pellentesque convallis auctor nec, lacus justo lacus. Nunc semper ac eu.
		</div>
		<script type="text/javascript" src="swf/swfobject.js"></script>
        <div id="flash">
			animazione flash
		</div>	
    </div>
   
    <div id="footer" align="right">
		Footer
	</div>

</div>
</body>
</html>

**fcaldera** · 18-04-2008, 10:47

innanzitutto utilizza un doctype strict in modo tale da assicurarti una resa consistente del box model anche su IE6

Poi, dove hai scritto float: left (o right) aggiungi anche display: inline (per evitare il double margin bug proprio di IE6, cerca nel forum)

**i@nn@** · 18-04-2008, 11:52

ti ringrazio, provo a cercare nel forum qualcosa.
Sai per caso indicarmi dove poter trovare alcuni parametri addizionali per IE6?

**i@nn@** · 18-04-2008, 12:50

ho provato a inserire il codice che mi hai suggerito, ora su IE6 il mio problema è che il div "navigation" lo vedo corretto, mentre il div "content" non lo vedo allo stesso livello.
ti allego un'immagine di esempio per farti capire meglio...

**i@nn@** · 18-04-2008, 13:05

risolto... avevo sbagliato a dare un valore alla larghezza del div menu contenuto all'interno del div navigation.
Ti ringrazio ancora per la dritta! ;-)

**i@nn@** · 18-04-2008, 14:23

pensavo di aver risolto tutto invece ora lo stesso problema mi si pone con Firefox...

**pikadilly** · 18-04-2008, 20:49

Ciao,
ho visto il css di questa pagina, non è il massimo...
Prova così:

Togli il margine sinistro al div menu, al massimo crei questo se proprio vuoi che quella tabella sia spostata un pò verso destra.

div#menu table{
margin-left: 100px;
}

Se metti del margine, e dichiari la larghezza al div menu, è logico che il content si sposti in basso perchè non ha materialmente spazio per estendersi. In questi casi metti solo un contenitore per il menu, quì lo hai chiamato navigation, poi il div menu lo lasci senza larghezza e te lo sposti dove vuoi con padding e margini. Dichiarando il margine e larghezza fai sì che il div menu esca da navigation e vada a dar fastidio al contenitore dei testi.
Evita di dichiarare l'altezza al contenitore madre e utilizza un clear per far sì che il contenitore madre si adatti all'altezza del suo contenuto.

**i@nn@** · 21-04-2008, 10:34

Grazie per la dritta ;-)

Ora però ho un problema che mi si riscontra solo con IE6.
ho un div contenitore (content) il quale contiene il div "testo" e il div "prodotto" che occupano la sua intera larghezza.
Dunque.. io vorrei mettere una ltro div "titolo" al di sopra di questi ultimi due. Mentre con FF, opera, IE7, va tutto bene, con ie6 non lo visualizzo.
Riporto a seguito il codice CSS che utilizzo per dichiarare questi DIV:

codice:

div#content{
	background-image: url(../image/body/bg_ptodotti.jpg);
	background-repeat: no-repeat;
	width: 749px;
	height: 593px;
	float: right;
	display: inline;
}

div#titolo{
	width: 340px;
	height: 100px;
	background-color: transparent;
	margin-left: 150px;
	margin-top: 0px;
	position: absolute;
}

div#testo{
	width: 267px;
	height: 320px;
	z-index: 11;
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: black;
	float: left;
	display: inline;
	margin-left: 150px;
	margin-top: 150px;
	overflow: hidden;
	text-align: justify;
}

div#prodotti{
	width: 286px;
	height: 445px;
	float: right;
	display: inline;
	background-color: transparent;
	margin-right: 46px;
}

**i@nn@** · 21-04-2008, 11:40

per capire meglio allego un'immagine.
Il mio problema è solo in IE6 con il div del titolo. Sugli altri principali browser è tutto ok

**i@nn@** · 21-04-2008, 13:01

spero di non aver fatto una cavolata, però ora ho risolto cosi:
All'interno dell div content ho creato una tabella nella quale metto i miei contenuti (testo e prodotti). il titolo l'ho inserito nella posizione che volevo io con un div.

Discussione: Problema CSS con IE6

Strumenti discussione

Ricerca discussione

Visualizza

Problema CSS con IE6

Permessi di invio