problema con <!doctype>

**bechbein** · 26-06-2011, 21:29

ciao raga

ho un problema con l'uso del doctype.
ho un sito con un menu laterale a tendina creato con javascript e per farlo funzionare devo inserire il <!doctype> ... il problema sta nel fatto che quando inserisco questo tag tutta la grafica del sito si modifica creando un sito del tutto diverso da come l'avevo progettato ...

per prima cosa scompare l'immagine di sfondo e tutte le immagini cambiano dimensione inoltre non funziona nemmeno l'effetto hover dei link e molte altre cose cambiano ...

ecco qua il codice che sicuramente spiega meglio di me il problema:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel=stylesheet href="a.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="menu.js"></script>
<style type="text/css">
#box
{
      margin: 2%;
      width:100%;
      height: 200px;
      padding:10px;
}
#login
{
      float:right;
}
#pulsante
{
      width: 15%;
      height:50px;
      font-size: 22px;
      color: #9B9B9B;
      padding: 5px;
      padding-top:14px;
      background-image:url("tasto1.jpg");
      text-align:center;
      margin:2px;
}
#pulsante:link {text-decoration:none};
#pulsante:visited {text-decoration:none};
#pulsante:hover {text-decoration:none; background-image:url("tasto2.jpg");};

body
{
      background-image:url("immagine.jpg");
      background-repeat: repeat-x;
      width: 100%;
}
#destra
{
      float:right;
      margin:auto;
      padding:10px;
      text-align: justify;
}
#sinistra
{
      float:left;
      margin:auto;
      padding:10px;
}

#menu {
      list-style:none;
      width:150px;
	}
#menu li {
      background: #1188FF;
      font-size:14px;
      cursor:pointer;
      padding:4px;
      color:#fff;
      border-bottom: 1px solid white;
	}
#menu ul {
      list-style:none;
      display:none;
      margin:0px;
      padding:0
	}
#menu ul li {
      background:#00CCFF;
      border:0;
      padding-left:15px;
      border-bottom:1px dashed black;
      border-left:1px dashed black;
      border-right:1px dashed black;
	}
#menu ul li a {
      text-decoration:none;
      color:#333;
	}
#menu li:hover
{
      color: #00FF09;
}
#menu1 li:hover
{
      background: #1188FF;
}
</style>
</head>
<body>
<span id="box">
[img]titolo.png[/img]
 HOME 
 DOWNLOAD 
 FORUM 


<span id="login">
<form name="campologin">
<span style="color:white">username</span><input type="text" maxlength="" size="15" value="" name="nome">
<span style="color:white">password</span><input type="text" maxlength="" size="15" value="" name="pass"> <input type="submit" value="login" name="invio">
</form>
</span></span>
</span></span></span></span></span>


<div id="sinistra">



<div class="CONTENUTO">
<ul id="menu">
	[*] menu1 
	<ul id="menu1">
	[*]introduzione 
	[*]introduzione 
	[*]introduzione 
	[*]introduzione [/list][*] menu2 
   <ul id="menu1">
	[*]introduzione 
	[*]introduzione 
	[*]introduzione 
	[*]introduzione [/list][*] menu3 
   <ul id="menu1">
	[*]introduzione 
	[*]introduzione 
	[*]introduzione 
	[*]introduzione [/list][*] menu4 
   <ul id="menu1">
	[*]introduzione 
	[*]introduzione 
	[*]introduzione 
	[*]introduzione [/list][/list]
</div>
</div>
<table align="left"  cellpadding="10">
<div id="destra">
<tr><td>

</td></tr>
</div>
</div>
</body>

</html>

se invece tolgo il <!doctype> la grafica è apposto ma lo script non funziona ...

come posso risolvere il problema che sembra essere comune a parecchi ... infatti visitando varie discussioni ho letto varie persone che avevano lo stesso problema ma purtroppo non ho trovato la soluzione ... speravo quindi che voi esperti mi potevate dare una mano perche e da giorni che non trovo la soluzione

grazie mille in anticipo

**cmsaspnet.com** · 26-06-2011, 23:33

Puoi specificare su che browser ti succede questo?

**bechbein** · 27-06-2011, 12:48

scusate se ho dimenticato di specificare il browser cmq io uso internet explorer 7

**bechbein** · 29-06-2011, 20:21

nessuno puo aiutarmi ??

**0-c00l** · 29-06-2011, 20:30

<!doctype> è html5, IE 7 da quel che ricordo non supporta l' html5.

**bechbein** · 29-06-2011, 20:45

quindi come posso risolvere il problema ... senza <!doctype> lo script non funziona anche se non capisco il perchè visto che ho realizzato altri script e questi funzionano senza
<!doctype> ... è forse JQuery che necessita di <!doctype> ??

è da giorni che giro intorno a questo maledetto problema !!

**Myaku** · 29-06-2011, 21:19

Originariamente inviato da 0-c00l
<!doctype> è html5, IE 7 da quel che ricordo non supporta l' html5.

sarebbe al limite "<!DOCTYPE html>"

, e comunque: non proprio. IE non supporta i "nuovi tag" html5 a meno di fissarli con un js.
Nel caso specifico, comunque, il codice postato ha una dtd html4 (e neppure strict, tra l'altro)

Il problema però a me sembra un altro: usando un doctype i browser vanno in standards-mode. Omettendo il doctype i browser (IE incluso) vanno in quirks mode.
Va da sé che ometterlo è sbagliato, e se il layout sbarella con il doctype c'è quindi un errore di fondo nella progettazione. Sarebbe comunque sempre meglio usare una dtd strict, che rende IE più aderente agli standard.

è forse JQuery che necessita di <!doctype> ??

non so darti una risposta certa, ma di certo c'è che mi sono imbattuta in una caterba di script in giro per la rete che necessitano di "lavorare" in maniera standard.

**bechbein** · 30-06-2011, 21:10

grazie mille dei consigli ... ora inizio a schiarirmi le idee ...

c'è solo una cosa che nn mi è chiara ... quali sarebbero questi errori di fondo nella progettazione che mi scombussano il layout ...

e poi perche vangono ignorati i css che riguardano il body o i link

codice:

#pulsante
{
      width: 15%;
      height:50px;
      font-size: 22px;
      color: #9B9B9B;
      padding: 5px;
      padding-top:14px;
      background-image:url("tasto1.jpg");
      text-align:center;
      margin:2px;
}
#pulsante:link {text-decoration:none};
#pulsante:visited {text-decoration:none};
#pulsante:hover {text-decoration:none; background-image:url("tasto2.jpg");};

body
{
      background-image:url("immagine.jpg");
      background-repeat: repeat-x;
      width: 100%;
}

e non i vari settaggi dei settori ID con nome "menu" ??

scusate la mia ignoranza ma questa cosa proprio nn la capisco ...

Discussione: problema con <!doctype>

Strumenti discussione

Ricerca discussione

Visualizza

problema con <!doctype>

Permessi di invio