Visualizzazione strana con Doctype Transitional e foglio di stile esterno

**nicuccia** · 22-03-2011, 13:42

Ciao a tutti! Dopo un bel po' di tempo mi sono ritrovata a realizzare un sito web, in una prima bozza, con il foglio di stile interno (dentro i tag

codice:

<style> </style>

) e senza specificare nessuno tipo di doctype, avevo messo su la struttura base della mia pagina web.
Nel momento che inserisco questo codice:

codice:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

La pagina "sballa" tutta e non riesco più a visualizzarla correttamente! La situazione peggiora se inserisco anche:

codice:

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

A cosa può essere dovuto?

Il mio intento era di realizzare un tema per wordpress.

**nicuccia** · 22-03-2011, 14:13

Ho validato sia la pagina html che il foglio di stile ed ho corretto gli errori che mi evidenziava (scrivevo male i commenti) però adesso mi rimane il problema del doctype

Senza doctype visualizzo tutto correttamente: Clicca qui

Con il doctype:

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">

Diventa così: Clicca qui

**Myaku** · 22-03-2011, 15:01

il problema non è il doctype, quanto la sua mancanza. (a tal proposito, prediligi una dtd strict)
se con il doctype hai problemi, significa che c'è qualcosa che non va nel tuo codice (html o css che sia).
La tua discussione manca di info fondamentali, tra cui la segnalazione del browser su cui noti la differenza.
Su tutti i browser hai gli stessi risultati in entrambi i casi?

Il doctype non è un elemento opzionale, quanto fondamentale poiché indica al browser a quali specifiche di linguaggio deve fare riferimento.
Quindi, il passo successivo dovrebbe essere quello di creare un codice valido e corretto ottimizzato per i browser standard-compliant (e se lo fai bene, vedrai che firefox, opera, chrome, safari ... ti daranno [salvo casi particolari] sempre lo stesso risultato). Infine, passi a Explorer, che è noto faccia un po' come gli pare, ma è ben gestibile attraverso i commenti condizionali.

**nicuccia** · 22-03-2011, 15:37

Si perdonami hai ragione.. Fino a ieri sballava sia su explorer che su mozilla firefox, adesso ho provato e su mozilla 3.6 funziona, su explorer 8 no..

index.htm

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" />
<title>Nichiweb.com</title>
<link rel="stylesheet" media="screen" href="style.css" />
</head>

<body>
<div id="testata">
 <table id="table-testata">	
	<tr><td id="test3"> </td></tr>
    <tr><td id="test2"> </td></tr>
	<tr><td id="test1"> </td></tr>
    <tr><td id="test0"> </td></tr>
 </table>
</div>

<div id="main">
Main
</div>

<div id="menu">
<table id="table-menu">	
	<tr>
	 <td id="test-menu"> </td>
	</tr>

        <tr>
	 <td id="content-menu">b</td>
	</tr>
</table>
</div>

</body>
</html>

style.css

codice:

/*
Theme name: Nichiweb
Version: 1.0
Url: http://www.nichiweb.com
Description: Primo tema sviluppato per il sito Nichiweb.com
Author: Nicoletta Giacalone
Tags: colonne, organic, paper, magazine
*/

body {
	background-image: url('images/struttura/sfondo.png');
	margin: 0px;
}

#main {
	color: #000000;
	background-color: #FFFFFF;
	height: 100%;
	width: 481px;
	z-index: 1;
	position: absolute;
	top: 435px;
	left: 248px;
}

#menu {
	color: #000000;
	height: 100%;
	width: 172px;
	z-index: 1;
	position: absolute;
	top: 435px;
	left: 55px;
}

#table-menu {
	width: 172px;
	height: 100%;
	border-spacing:0;
	border-collapse:collapse;
}

#test-menu {
	background-image: url('images/struttura/Testata_menu.png');
	height: 19px;
}

#content-menu {
   color: #000000;
	height: 100%;
	background-color: #FFFFFF;
   vertical-align: top;
}

#testata {
	height: 382px;
	width: 652px;
	z-index: 1;
	position: absolute;
	top: 53px;
	left: 157px;
}

#table-testata {
	width: 652px;
	height: 382px;
	border-spacing:0;
	border-collapse:collapse;
}

#test0 {
	background-image: url('images/struttura/Testata_0.jpg');
	height: 83px;
}
#test1 {
	background-image: url('images/struttura/Testata_1.jpg');
	height: 95px;
}
#test2 {
	background-image: url('images/struttura/Testata_2.jpg');
	height: 87px;
}
#test3 {
	background-image: url('images/struttura/Testata_3.jpg');
	height: 117px;
}

**Myaku** · 22-03-2011, 15:52

Originariamente inviato da nicuccia
Si perdonami hai ragione.. Fino a ieri sballava sia su explorer che su mozilla firefox, adesso ho provato e su mozilla 3.6 funziona, su explorer 8 no..

premesso che quel codice sarebbe migliorabile, che accade se usi una dtd strict?
comunque, ti ripeto, se il codice è valido e la visualizzazione è sbagliata su Una-qualche-versione-di-Explorer, semplicemente puoi risolvere con un commento condizionale. (qui sul forum o in rete c'è un sacco di documentazione a riguardo)

**nicuccia** · 22-03-2011, 16:00

Ottengo sempre questo . Dici di inserire questo?

codice:

<!--[if lte IE 6]> 
<link rel="stylesheet" href="NomeFile.css" _cke_saved_href="NomeFile.css" type="text/css">
<![endif]-->

E inserire in questo foglio di stile delle correzioni per fare in modo di far visualizzare tutto correttamente?

**Myaku** · 22-03-2011, 16:07

Originariamente inviato da nicuccia
Ottengo sempre questo .

il che significa che se lo correggi, poi ti funziona sia su FF che su IE senza bisogno di tanti accrocchi, giusto?

Dici di inserire questo?

codice:

<!--[if lte IE 6]> 
<link rel="stylesheet" href="NomeFile.css" _cke_saved_href="NomeFile.css" type="text/css">
<![endif]-->

E inserire in questo foglio di stile delle correzioni per fare in modo di far visualizzare tutto correttamente?

esatto (nel caso appunto, la strict non ti riporta anche IE a posto). però questo non mi torna
"_cke_saved_href="NomeFile.css"" (a dire il vero è la prima volta che lo vedo), l'href è sufficiente, e se lavori in xhtml il tag <link> va chiuso. Poi ovviamente per la condizione dell'if, dipende da quali sono le versioni da aggiustare

**nicuccia** · 22-03-2011, 16:13

Grazie mille per le indicazioni! Oggi pomeriggio sistemerò sia l'index che il foglio di stile, lo rendo più umano e inserirò questa condizione, vediamo di fare qualche magia

Discussione: Visualizzazione strana con Doctype Transitional e foglio di stile esterno

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione strana con Doctype Transitional e foglio di stile esterno

Permessi di invio