[ Det virker som om, at border-left (1px) ... Men det forholder sig åbenbart anderledes i højden? ] Det har du helt ret i - undrer mig lidt over at den ikke udvider tabellen med 2 px i bredden også ... Problemet lægger vel i:
- At den får at vide at tabellen er 900px bred - nåh det er ok.
- Hmmm. der er et indvendigt element (.tdbanner) der defineres til at have en bredde på 900px - nåh det glemmer browseren alt om at beslutter sig for at overholde tabellens definerede width istedet ... Læg mærke til at den ikke vil udvide bredden i td kolonnen til mere end det afsatte (her er der afsat 988px i bredden - så selv med denne css:
.tdbanner {
width: 2000px;
height: 90px;
padding: 0px;
}
Vil den ikke udvide tabellen...
... Så kommer vi til punktet om at højden ikke reagerer på samme måde ...
.maintable {
width: 990px;
padding: 0px;
margin: 0px auto;
border-spacing: 0px;
border: 1px solid #b7b7b7;
}
^ - Læg mærke til at højden på selve tabellen ikke er defineret - du har defineret den på td elementet istedet ... derfor vil højden på tabellen blive indvendige elementers samlede højde plus tabellens egen højde (en højde på en tabel lader sig ikke låse som med en div) ...
... Så egentlig er der ingen fejl i håndteringen af css width og height på de punkter - det eneste der måske er problemet er Opera ... jeg prøver lige at opgradere :/
... Hvis det jeg skrev virkede som ren volapyk (det har mine sætninger "tendens" til at virke som) så check dette eksempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Titel</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maintable {
width: 990px;
height: 90px;
padding: 0px;
margin: 0px auto;
border-spacing:0px;
border: 1px solid #b7b7b7;
}
.maintable td {
padding: 0px;
}
</style>
<!--[if IE]><style type="text/css">.maintable{border-collapse:collapse;}</style><![endif]-->
</head>
<body>
<table class="maintable"><tbody>
<tr><td class="tdbanner">Test</td></tr>
</tbody></table>
<div style="width:990px;background:#f00;margin:0px auto;">Test div</div>
</body></html>
^ - højden og bredden matcher
vs.:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Titel</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maintable {
width: 990px;
padding: 0px;
margin: 0px auto;
border-spacing:0px;
border: 1px solid #b7b7b7;
}
.maintable td {
padding: 0px;
}
.tdbanner{height:88px;}
</style>
<!--[if IE]><style type="text/css">.maintable{border-collapse:collapse;}</style><![endif]-->
</head>
<body>
<table class="maintable"><tbody>
<tr><td class="tdbanner">Test</td></tr>
</tbody></table>
<div style="width:990px;background:#f00;margin:0px auto;">Test div</div>
</body></html>
^ - højden og bredden matcher ... tdbanner er 2px mindre da den ikke defineres som højden på tabellen men en td istedet - og derfor tages border ikke med i tabellens højde beregning før bagefter beregningen af indvendige elementers højde
vs.:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Titel</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maintable {
width: 990px;
padding: 0px;
height:90px;
margin: 0px auto;
border-spacing:0px;
border: 1px solid #b7b7b7;
}
.maintable td {
padding: 0px;
}
.tdbanner{height:200px;width:2000px;}
</style>
<!--[if IE]><style type="text/css">.maintable{border-collapse:collapse;}</style><![endif]-->
</head>
<body>
<table class="maintable"><tbody>
<tr><td class="tdbanner">Test</td></tr>
</tbody></table>
<div style="width:990px;background:#f00;margin:0px auto;">Test div</div>
</body></html>
^ - height defineret på tabellen kan ikke låses - det kan width ...
