Mi sono incaponito per capire il modo in cui FF e IE trattano i bordi degli elementi.
Ho realizzato un sito di prova (tableless) che dovrà avere layout:
Il codice html è il seguente:
Mentre il css è il seguente:<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="it" lang="it">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="header">header
</div>
<div id="middle">
<div id="left">left
</div>
<div id="right">right
</div>
</div>
<div id="bottom">bottom
</div>
</body>
</html>
Su IE ottengo questo (corretto):body {
color: #000000;
font-family: Tahoma;
font-size: 100%;
text-align: center;
margin: 0 auto 0 auto;}
div#header {
background-color: #ccffff;
border: 1px #000000 solid;
height: 100px;
margin: 0 auto 0 auto;
text-align: left;
width: 700px;}
div#middle {
border: 0px #000000 solid;
margin: 0 auto 0 auto;
padding:0px;
text-align: left;
width: 700px;}
div#left {
background-color: #ffccff;
border: 1px #000000 solid;
float: left;
padding:0px;
text-align: left;
width: 150px;}
div#right {
background-color: #ffffcc;
border: 1px #000000 solid;
float: left;
padding:0px;
text-align: left;
width: 550px;}
div#bottom {
background-color: #ffcccc;
border: 1px #000000 solid;
clear: both;
height: 30px;
margin: 0 auto 0 auto;
text-align: left;
width: 700px;}
mentre su FF ottengo quest'altro (non corretto):
Sembra che il anche se il DIV "middle" continui a mantenere il bordo anche se è lo spessore indicato è di 0px, Come si vede dalla seguente immagine:
ed infatti, considerando che la somma delle larghezze dei due DIV interni al DIV "middle" dà proprio la sua larghezza (senza considerare i bordi), il DIV "right" va a capo.
Di sicuro ci sono 1000 modi per risolvere questa situazione: vorrei sapere quelle che secondo voi è più giusta (secondo le regole del w3c?).
Grazie a tutti.
Rispondi quotando
