Problema visualizzazione cross-browser utilizzando i CSS

**WarriorXP** · 23-05-2004, 13:05

Ciao a tutti, ho questo codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>

<title>Zinans</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/CSS">

#testa {
width:100%;
height: 50px;
margin:-8px 0px 0px -8px;
text-align:left;
color: white;
background: black;
font-size: 30px;
padding-top: 0.6em;
padding-left: 0.7em;
}
#corpo {
width:100%;
text-align:left
position:relative;
border: 1px solid black;
}
#corpo-colonna1 {
position:absolute;
left:5px;
width:200px;
border: 1px solid red;
margin-top: 0px;
paddind: 0 auto auto auto auto;
}
#corpo-colonna2 {
margin:0 0 0 200px;
padding-left: 2em;
}

.cancella:hover{color: #a800ff}
ul,li !IMPORTANT {margin-left: 0px; padding-left: 0px;}

#nav {
	margin: 0 0 4em 0;
	padding: 0;
	line-height: 0;
}
#nav li {
	list-style: none;
	margin: 0;

	background-image: none;
	padding: 0 0 1px 0;
	line-height: 1.0;
}
#nav :link, #nav :visited {
	font-weight: normal;
	line-height: 1.0;
	color: #955322;
	display: block;
	text-decoration: none;
	background: transparent url(linea.gif) top right repeat-y;
	border: solid 1px #EEEAE4;
	margin: 0;
	padding: 5px 10px 5px 0.5em;
}
#nav :link:hover, #nav :visited:hover {
	color: #EC361D;
	border: solid 1px #DDD9D4;
	border-top-color: #F5F3F0;
	border-left-color: #F5F3F0;
	background: #F3F0EC;
}
#nav :link:active, #nav :visited:active {
	background: #fff;
}
#nav ul {
	margin: 0;
	padding: 0;
	background-color: #F5F2EF;
	border: solid 1px #fff;
}
#nav ul :link, #nav ul :visited {
	background-image: none;
	padding: 4px 10px 4px 1.5em;
	border: 0;
}
#nav ul :link:hover, #nav ul :visited:hover {
	background-image: none;
	border: 0;
}
.info {cursor: pointer; color: blue; text-decoration: underline}
</style>
</head>

<body>

<div id="testa">
Zinans 0.20
</div>

<div id="corpo">

<div id="corpo-colonna1">
<p style='padding-top: 0.1em'>
<ul id='nav'>[*] Modifica le impostazioni[*] Invio Newsletter[*] Aggiungi/Rimuovi E-mail[/list]
</p>
</div>

<div id="corpo-colonna2">


Modifica le impostazioni

<cite>Da qui puoi modificare la impostazioni generali dello Zimasend come il Nome Dominio e l'indirizzo URL del sito (per la personalizzazione delle mail inviate) oppure lo username e la password per il login...</cite></p>


Invia Newsletter

<cite>Da qui puoi inviare le tue newsletter scrivendone il contenuto nel form centrale...</cite></p>


Aggiungi/Rimuovi iscritti

<cite>Da qui puoi facilmente aggiungere o rimuovere gli iscritti alla tua newsletter con un modo semplice ed intuitivo...</cite></p>
</div>

</div>

</body>
</html>

Ma, non so perchè, il menu a sinistra mi viene visualizzato differentente tra IE e Opera/Mozilla, come mai?

Il problema sta nei CSS ma sto impazzendo per trovarlo

Qualcuno è così gentile da aiutarmi?

**liquido** · 23-05-2004, 13:35

Non ho ancora testato, ne guardato attentamente il codice, prima, magari, potresti specificare il tipo di differenza che ti viene mostrata nei due browser ? (Se si tratta di un problema di margini, ad es.)

In ogni caso, nel codice, durante una prima lettura, ho trovato

codice:

#corpo {
width:100%px;
text-align:left
position:relative;
border: 1px solid black;
}

Hai aggiunto un "px".. Sicuramente non sarà questo l'errore, ma è meglio levarlo

Inoltre ti conviene usare le " anzichè ' per racchiudere il gli attributi dei tag etc..

Attendo le altre info

**WarriorXP** · 23-05-2004, 13:42

In pratica il testo racchiuso da "corpo-colonna1" viene messo più giù da Opera rispetto a Internet Explorer, se modifico qualcosa, però, succede il contrario O.o

Quell'errore che mi hai fatto notare riduce sensibilmente la differenza ma non del tutto

Inoltre uso l'apice singolo perchè si tratta di testo printato dal PHP, per evitare di dovre escaparli tutti...

**Jerry Masslo** · 23-05-2004, 17:00

in #corpo dopo position:relative manca un ;

forse ti è saltato quando hai aggiustato il px di troppo.

dove hai <p style='padding-top: 0.1em'>
<ul id='nav'>
....
</p>

sostiuisci a p div, non puoi mettere ul dentro p.

così a me si aggiusta, poi mi perplime il dtd, è strict o transitional, si può fare?

**WarriorXP** · 23-05-2004, 17:38

Ok, ho modificato ma il problema in sostanza persiste... Con questo codice (v. sotto) IE visualizza il menu a sinistra in linea con il testo, Opera invece lo mette troppo in alto...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>

<title>Zinans</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/CSS">

#testa {
width:100%;
height: 50px;
margin:-8px 0px 0px -8px;
text-align:left;
color: white;
background: black;
font-size: 30px;
padding-top: 0.6em;
padding-left: 0.7em;
}
#corpo {
width:100%;
text-align:left;
position:relative;
border: 1px solid white;
}
#corpo-colonna1 {
position:absolute;
left:5px;
width:200px;
margin-top: 0px;
padding-top: 20px;
}
#corpo-colonna2 {
margin:0 0 0 200px;
padding-left: 2em;
}

.cancella:hover{color: #a800ff}

#nav {
margin: 0 0 4em 0;
padding: 0;
line-height: 0;
}
#nav li {
list-style: none;
margin: 0;

background-image: none;
padding: 0 0 1px 0;
line-height: 1.0;
}
#nav :link, #nav :visited {
font-weight: normal;
line-height: 1.0;
color: #955322;
display: block;
text-decoration: none;
background: transparent url(linea.gif) top right repeat-y;
border: solid 1px #EEEAE4;
margin: 0;
padding: 5px 10px 5px 0.5em;
}
#nav :link:hover, #nav :visited:hover {
color: #EC361D;
border: solid 1px #DDD9D4;
border-top-color: #F5F3F0;
border-left-color: #F5F3F0;
background: #F3F0EC;
}
#nav :link:active, #nav :visited:active {
background: #fff;
}
#nav ul {
margin: 0;
padding: 0;
background-color: #F5F2EF;
border: solid 1px #fff;
}
#nav ul :link, #nav ul :visited {
background-image: none;
padding: 4px 10px 4px 1.5em;
border: 0;
}
#nav ul :link:hover, #nav ul :visited:hover {
background-image: none;
border: 0;
}
.info {cursor: pointer; color: blue; text-decoration: underline}
</style>
</head>

<body>

<div id="testa">
Zinans 0.20
</div>

<div id="corpo">

<div id="corpo-colonna1">
<div>
<ul id='nav'>[*] Modifica le impostazioni[*] Invio Newsletter[*] Aggiungi/Rimuovi E-mail[/list]
</div>
</div>

<div id="corpo-colonna2">

Modifica le impostazioni

<cite>Da qui puoi modificare la impostazioni generali dello Zimasend come il Nome Dominio e l'indirizzo URL del sito (per la personalizzazione delle mail inviate) oppure lo username e la password per il login...</cite></p>

Invia Newsletter

<cite>Da qui puoi inviare le tue newsletter scrivendone il contenuto nel form centrale...</cite></p>

Aggiungi/Rimuovi iscritti

<cite>Da qui puoi facilmente aggiungere o rimuovere gli iscritti alla tua newsletter con un modo semplice ed intuitivo...</cite></p>
</div>

</div>

</body>
</html>

Se ci aggiungo un "padding-top: 20px" in #testo-colonna1 Opera lo vede bene ma IE lo vede più in giù rispetto al testo

**Jerry Masslo** · 23-05-2004, 17:56

questo cavolo di tag code sono più i problemi che i vantaggi!

scusa non avevo visto quello, la cosa che più saltava agli occhi era il menù, aggiungi questo:

#corpo-colonna2 p {margin-top:0}

**bagu** · 23-05-2004, 18:07

#corpo-colonna2 {
margin-left: 220px;
margin-top: 20px;
padding-left: 2em;
}

mi pare sia ok con ie , opera e firefox
ciauz
paolo

**Shores** · 23-05-2004, 18:12

comunque nel codice iniziale c'è un PADDIND al posto di PADDING...

Ciao!

**WarriorXP** · 23-05-2004, 18:41

Grazie mille ad entrambi

Discussione: Problema visualizzazione cross-browser utilizzando i CSS

Strumenti discussione

Ricerca discussione

Visualizza

Problema visualizzazione cross-browser utilizzando i CSS

Permessi di invio