problemi con doctype

**sgambetti** · 12-03-2007, 17:38

Salve,
ho un problema col doctype che non capisco:
se inserisco il doctype nella pagina gli elementi header, menu-alto, container e footer hanno larghezze diverse, mentre se lo elimino le larghezze sono tutte uguali (come d'altronde specificato nel file css).

Allego il codice

-----------------------------------html--------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title> Homepage - Benvenuti</title>
<link rel="stylesheet" href="table.css" type="text/css">
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="prosa">
</div>
</div>
<div id="menu-alto">
</div>
<div id="container">
<div id="menu-verticale"></div>
<div id="contenitore-vuoto">
</div>
</div>
<div id="footer">
Copyright 2007 Inc. All Rights Reserved.
</div>
</body>
</html>
-------------------------------css--------------------------
html,body{
margin:0;
padding:0
}

body{
background:url(images/fade_blu.gif) repeat-x;
font:100.01% arial,sans-serif;
text-align:center;
}

h1,h2,h3,h4,h5,h6{margin-bottom: 0}

div#header{
clear:both;
width:752px;
height:138px;
margin-top: 10px;
text-align:center;
background: url(IMAGES/header.gif) no-repeat;
}

div#logo{
float:left;
margin-left:10px;
margin-top:25px;
width:125px;
height:83px;
background: url(IMAGES/logo_birre_01.gif) no-repeat;
}

div#prosa{
float:right;
margin-right:20px;
margin-top:50px;
font: Verdana;
font-size:11pt;
font-weight:bold;
font-style:italic;
color:#000080;
}

div#menu-alto{
clear:both;
width:752px;
height:49px;
margin-top:15px;
text-align:right;
background: url(IMAGES/strectch21.gif) repeat-x;
padding: 1em;
}

div#container{
clear:both;
margin:0 auto;
width:752px;
height:560px;
padding:5px;
text-align:left;
color:white;
font:Tahoma;
background-color:#000080
}

div#contenuto-vuoto{
float:right;
margin:10px;
width:541px;
height:400px;
padding:1em;
text-align:left;
color:white;
font-size:85%;
font:Tahoma;
}

div#footer{
clear:both;
width:752px;
height:49px;
margin-top:0px;
text-align:right;
font-size:70%;
padding-top:2em;
background: url(IMAGES/strectch21.gif) repeat-x;
}

------------------------------------------------------

**trik84** · 12-03-2007, 19:06

Ciao,

cosa intendi per larghezze diverse ?

Tutti e 4 i div hanno lrghezze diverse o ad esmpio header container e footer hanno una larghezza
e menu-alto un'altra ?

**sgambetti** · 12-03-2007, 21:16

hanno tutti larghezze diverse, mentre io nel css le ho messe tutte a 752px

**SangueMisto** · 13-03-2007, 01:26

La lunghezza/altezza di un div è determinata sia dal width sia da alcuni valori che servono a determinare le caratteristiche del div.

Quindi se imposti il width a 100px e un padding left-right a 10px dovrai sommare alla lunghezza impostata quella del padding, cioè se imposti 100px dovrai sommare i 10px di padding del lato sinistro + i 10 del lato destro = div da 120px.

**trik84** · 13-03-2007, 11:03

Effettivamente se parliamo di browser che seguono lo standard, SangueMisto ha ragione, ma se visualizziamo la pagina con IE, almeno fino allaversiona 6 con la 7 non ho ancora provato, il problema non si presenta dato che IE interprata la proprietà width in modo errato.

Comunque per vedere come si comporta il box model guarda quì

**HDP** · 19-03-2007, 14:17

@sgambetti
Ti ho mandato la risposta al tuo messaggio in PVT
Comunque posto i codici:
Codice HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Homepage - Benvenuti</title>
<link rel="stylesheet" href="prova1.css" type="text/css">
</head>
<body>

<div id="container">

<div id="header">
<div id="logo">Logo</div>
<div id="prosa">Prosa</div>
<br class="clear" />
</div>

<div id="menu-alto">menu alto</div>

<div id="contenuto">

<div id="menu-verticale">menu verticale</div>

<div id="contenitore-vuoto">
<h1>Contenitore vuoto</h1>
</div>

<div id="footer">
Copyright 2007 Inc. All Rights Reserved.
</div>

</div>

</div>

</body>
</html>

Codice CSS

.clear
{clear: both;}

div#container
{
width: 752px;
background: #000;
}

div#header
{
height: 120px;
background: #fc0;
}

div#logo
{
float: left;
margin: 10px;
width: 125px;
height: 83px;
background: #999;
}

div#prosa{
width: 300px;
height: 83px;
float:right;
margin: 10px;
font: Verdana;
font-size:11pt;
font-weight:bold;
font-style:italic;
color:#000080;
background: #666;
}

div#menu-alto{
width:752px;
height:49px;
margin-top:15px;
text-align:right;
background: #fc0;
}

div#menu-verticale
{
float: left;
width: 150px;
height: 250px;
background: #f60;
}

div#contenitore-vuoto
{
float: right;
width: 600px;
height: 350px;
background: #777;
}

div#footer
{
clear: both;
height: 40px;
background: #f20;
}

Buona Giornata

**sgambetti** · 19-03-2007, 20:06

grazie,
sembra funzionare ora.....
sto cercando di non ricadere nelle tabelle!!!!!!!

Discussione: problemi con doctype

Strumenti discussione

Ricerca discussione

Visualizza

problemi con doctype

Permessi di invio