Css funzionanti su Firefox ma non su IE

**davidl77** · 24-11-2008, 11:20

Ciao a tutti.

Ho una pagina molto semplice dovo voglio inserire una cornice (main) e al suo interno un'altra cornice (middle).

Ho creato du div, e con il css ho dato le posizioni in %. Il tutto su firefox funziona perfettamente, ma non su IE. Come mai? Come posso risolvere il problema?

Posto sotto il semplice codice. Grazie mille,

codice:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
body{background-image: url(../images/bg_darkgreen.gif);
background-repeat: repeat;
background-color: #9BD094;
}

a:link {
color: #CC3333;
}

a:visited {
color: #990033;

}

div#main {
background-image: url(../images/bg_lightgreen.gif);
background-repeat: repeat;
background-color: #EFFEED;
border: 1px solid #006600;
position: absolute;
width: 80%;
left: 10%;
right: 10%;
top: 15%;
bottom: 15%;

}
ul
{
    margin: 0px;
    list-style-type: None;
}
li
{
    display: Inline;
    float: Left;
    font: Normal 10px Verdana;
    width: 15%;
    padding: 1px;
    border-right: Solid 1px #000000;
    border-bottom: Solid 1px #000000;
}


div#middle {
position: absolute;
left: 0%;
top: 20%;
right: 0%;
bottom: 50%;
border: 0px solid #CC3300;
background-color: #9BD094;

}
.menu {
	width:199px;
	margin: 0;
	list-style: none;
	padding: 15px 0;
	border-right: 1px solid #94A9E6;
	text-align: right;
}
.menu li {
	position: relative;
	right: -3px;
}
.menu a {
	display: block;
	text-decoration: none;
	border-right: 5px solid;
	padding: 5px 10px 5px 0;
	background: #fff;
	color: #000;
}
.menu a:link, .menu a:visited {
	border-color: #94A9E6;
}
.menu a:hover, .menu a:focus, .menu a:active {
	border-color: #2B4279;
}

</style>
</head>

<body>

fff

<div id="main">
uuuu


	<div id="middle">		middle
	<ul class="menu">[*]Link1[*]Link2[*]Link3[*]Link4[*]Link5[/list]
	</div>
	rrrtttt
</div>

</body>
</html>

**Alpha_Php** · 24-11-2008, 11:34

se non sbaglio dovresti dare a div#middle position:relative

**davidl77** · 24-11-2008, 13:35

Mmm.. così non funzica ancora!

**davidl77** · 25-11-2008, 08:42

Ciao.

Potete per favore darmi una mano? Ho provato il suggerimento di Alpha_php ma non funziona neancora come dovrebbe.
Grazie mille,

**Mich_** · 25-11-2008, 10:49

Ci sono vari problemi in quel codice:
- uso di sintassi approssimata (in qualche browser la sintassi CSS e` case-sensitive)
- non hai postato il DOCTYPE (che fa reagire i browser in modo diverso)
- uso di posizionamenti assoluti (sono molto difficili da usare: conviene dimenticarsi l'attributo position finche` non si e` veramente esperti di CSS - e il 90% dei layout non richiedono posizionamenti)
- uso improprio delle %: il main e` 80% di un oggetto (il body) senza dimensioni: quindi e` come se non fosse dimensionato

Secondo me, ti conviene partire da un layout pronto: prova a veder la sezione layout dei "link utili"

**noize86** · 25-11-2008, 12:12

Codice PHP:


margin:0 auto

no?!

**davidl77** · 26-11-2008, 00:35

Grazie mille dei vostri preziosissimi suggerimenti.

Sono riuscito ad ottenre l'effetto desiderato, effettivamente sono stato troppo leggero nel non tener di conto di alcune cose.

Ho una ulteriore domanda. Perché il testo 'Testo sotto middle' con IE lo vedo sotto il menù ed allineato a sinistra (come lo vorrei vedere) mentre su Mozilla no? Dov'è l'errore questa volta?

Vi posto il nuovo codice, ringraziandovi ancora.

codice:

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

<head>

<style>
html{ height:100%;
margin:0; }
body{background-image: url(../images/bg_darkgreen.gif);
background-repeat: repeat;
background-color: #9bd094;
height:100%;
margin:0;
}
a:link {
color: #CC3333;
}

a:visited {
color: #990033;
}

div#main {
background-image: url(../images/bg_lightgreen.gif);
background-repeat: repeat;
background-color: #effeed;
border: 1px solid #006600;
position: absolute;
width: 80%;
left: 10%;
right: 10%;
top: 15%;
bottom: 15%;
}
div#middle {
position: relative;
left: 0%;
top: 20%;
right: 0%;
bottom: 20%;
border: 0px solid #cc3300;
background-color: #9bd094;
}

ul
{
    margin: 0px;
    list-style-type: none;
}
li
{
    display: inline;
    float: left;
    font: normal 10px verdana;
    width: 15%;
    padding: 1px;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}


.menu {
position: relative;
	width:199px;
	margin: 0 auto;
	list-style: none;
	padding: 15px 0;
	border-right: 0px solid #94a9e6;
	text-align: right;
}
.menu li {
	position: relative;
	right: -3px;
}
.menu a {
	display: block;
	text-decoration: none;
	border-right: 5px solid;
	padding: 5px 10px 5px 0;
	background: #fff;
	color: #000;
}
.menu a:link, .menu a:visited {
	border-color: #94a9e6;
}
.menu a:hover, .menu a:focus, .menu a:active {
	border-color: #2b4279;
}

</style>
</head>

<body>
fff
<div id="main">
uuuu
	<div id="middle">		middle
	<ul class="menu">[*]Link1[*]Link2[*]Link3[*]Link4[*]Link5[/list]
	Testo sotto middle
  </div>
</div>

</body>
</html>

**Mich_** · 26-11-2008, 11:04

A parte che un testo sperduto in un <div> non sarebbe da usare (i testi andrebbero inseriti dentro

o altrti tag che possono contenere oggetti inline), il problema e` l'uso di float senza un corrispondente clear.

In pratica tu hai un <ul> che contiene alcuni elementi flottati.

Per eliminare l'effetto del float, devi inserire un clear.
Nel tuo caso puoi metterlo alla chiusura del <ul>, come esemplificato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float.

In alternativa puoi assegnarlo al

che contiene il testo stesso (piu` semplice da realizzare sul momento, ma meno corretta dal punto di vista didattico).

Se vuoi imparare per bene queste cose, la csoa piu` semplice e` passare a XHTML 1.0 strict ed usare spesso i validatori: questa DTD infatti e` molto piu` severa nei confronti della sintassi e della semantica; le DTD piu` vecchie invece erano molto permissive (ed infatti con tali DTD si vede molto di piu` la differenza fra i vari browser).

Discussione: Css funzionanti su Firefox ma non su IE

Strumenti discussione

Ricerca discussione

Visualizza

Css funzionanti su Firefox ma non su IE

Permessi di invio