css diversi con Mozilla Firefox

**marco_webd** · 16-01-2011, 20:09

salve ragazzi, ho cercato di creare un menu e un sotto menu per esercitarmi con i CSS, ma ho notato di visualizzare la mia pagina in un modo diverso rispetto agli altri browser, con Mozilla Firefox. Ripeto con tutti i browser funziona allo stesso modo tranne che con firefox. Infatti il sotto menu, che si trova nel div header_sub, risulta spotato di qualche px piu in basso! come mai? eppure ho cercato di seguire passo passo le varie indicazioni trovate in rete...mi potreste dire cosa sbaglio per favore? grazie! allego il codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#header ul  {
	list-style-type: none;
	margin: 0px;
	padding-top: 38px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#header ul li  {
	display: inline;
	padding-right: 30px;
}
#header ul li a  {
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
#header ul li a:link , #header ul li a:visited{
	color: #FFF;
}
#header ul li a:hover {
	color: #0F0;
}
#header ul li a:active {
	color: #FFF;
}
#header ul .current a:link {
	color: #0F0;
}
#header ul .current a:visited {
	color: #0F0;
}
#header ul .current a:active {
	color: #FFF;
}


#header_sub ul  {
	list-style-type: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: -1px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#header_sub ul li  {
	padding-left: 0px;
	padding-top: 0px;
	float: left;
	display: inline;
	padding-right: 20px;
}
#header_sub ul li a  {
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
}
#header_sub ul li a:link , #header_sub ul li a:visited{
	color: #FFF;
}
#header_sub ul li a:hover {
	color: #FF0;
}
#header_sub ul li a:active {
	color: #FFF;
}
#header_sub ul .current a:link {
	color: #FF0;
}
#header_sub ul .current a:visited {
	color: #FF0;
}
#header_sub ul .current a:active {
	color: #FFF;
}

#contenitore {
	background-color: #999;
	float: left;
	height: 200px;
	width: 200px;
}
#header {
	float: left;
	height: 65px;
	width: 200px;
	background-color: #003;
}
#header_sub {
	float: left;
	height: 20px;
	width: 200px;
	background-color: #060;
}
-->
</style>
</head>
<body>
<div id="contenitore">
<div id="header">
      <ul>[*]LINK 1[/list]
  </div>
  <div id="header_sub">
  	<ul>[*]Sotto Link[/list]
  </div>
</div>
</body>
</html>

**ResianTaxidrive** · 17-01-2011, 12:38

io credo che dipenda dal doctype; prova con la dichiarazione strict e vedrai che le cose si uniformano

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**marco_webd** · 17-01-2011, 13:41

Originariamente inviato da ResianTaxidrive
io credo che dipenda dal doctype; prova con la dichiarazione strict e vedrai che le cose si uniformano

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

grazie per la risposta!si infatti funziona! però non viene validata la pagina dal w3c in questo modo. Mi riferisco alla pagina completa e non all'esempio che ho allegato.
Questo è l'unico modo per risolvere quel problemino? oppure ci sono altri metodi legati all'utilizzo di parametri che forse non ho usato nel configurare i miei CSS?

**ResianTaxidrive** · 17-01-2011, 17:21

ci sono delle leggere differenze tra strict e transitional; correggi le cose in modo da validare secondo lo strict.
i css sembrano a posto, il doctype è ciò che dice ai browser come interpretare il codice, con lo strict evidentemente i browser hanno meno libertà rispetto al transitional.

a meno che non usi un js per capire chr browser uno ha usato e poi dare in pasto al browser lo stile corrispondente ma mi sembra un po' troppo per un problema del genere.

**ResianTaxidrive** · 17-01-2011, 17:34

ma nemmeno prima la pagina era validata in realtà.

**marco_webd** · 19-01-2011, 22:39

Originariamente inviato da ResianTaxidrive
ma nemmeno prima la pagina era validata in realtà.

si prima lo era in verità...
cmq ho rifatto tutto come mi hai suggerito ed ora funziona...
però sinceramente mi sono fatto un giro in parecchi siti web e strict non l'ho trovato da nessuna parte...hanno tutti transitional...come mai? se funziona meglio questo?
cmq grazie ancora dell'aiuto

**ResianTaxidrive** · 20-01-2011, 11:42

penso sia per pigrizia!

scherzo, non so perchè la maggior parte dei siti sia col transitional, io personalmente uso lo strict, sono più sicura.

Discussione: css diversi con Mozilla Firefox

Strumenti discussione

Ricerca discussione

Visualizza

css diversi con Mozilla Firefox

Permessi di invio