|
|
Posted by Rik on 06/24/06 16:29
Jonathan N. Little wrote:
> Frank Olieu wrote:
>> "Rik" <luiheidsgoeroe@hotmail.com> wrote in
>> news:47fc6$449d4911$8259c69c$8422@news2.tudelft.nl:
>>
>>> In Opera, my tables won't automatically fils 100% of available width
>>> without display:block;
>
> Well it will but may be exactly doing what you think, whereas setting
> with width may be the more desirable method:
The problem here was that setting width on a table of NOT 100% including a
border resulted in a different width then a div set to the same width. I do
grant you I hadn't tested is in MSIE before, and in that particular browser
'display:block;' will still not make it 'grow' until the borders.
Consider this (text-align:center; is for MSIE offcourse):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Width VS Block</title>
<style type="text/css">
html,body{
width:100%:
margin:0;
padding:0;
}
table,div{
margin:0;
padding:0;
border: 1px solid black;
}
..bywidth { width: 90%; background-color: #FFD; margin: 0 auto; }
..bymargin {background-color: #FDF; margin: 0 5%;}
TD { background-color: #DFF; }
</style>
</head>
<body>
<h3>Setting an identical width</h3>
<table class="bywidth">
<tr><td>left</td><td>By Width</td><td>right</td>
</table>
<div class="bywidth">Blaat</div>
<h3>Setting an identical margin with block</h3>
<table class="bymargin" style="display:block;">
<tr><td>left</td><td>By Block</td><td>right</td>
</table>
<div class="bymargin">Blaat</div>
<h3>Setting an identical margin without block, without 100% Td</h3>
<table class="bymargin">
<tr><td>left</td><td>By Block</td><td>right</td>
</table>
<div class="bymargin">Blaat</div>
<h3>Setting an identical margin without block, with 100% Td</h3>
<table class="bymargin">
<tr><td>left</td><td width="100%">By Block</td><td>right</td>
</table>
<div class="bymargin">Blaat</div>
</body>
</html>
Browser presentation:
http://www.rwasmus.nl/ff.png
http://www.rwasmus.nl/opera.png
http://www.rwasmus.nl/msie.png
First without checking MSIE i thought setting display:block was enough, now
it seems the only way is to add a 100% td.
So, to summarize:
- setting an identical width is NOT adequate.
- setting a percentuel border is buggy.
- setting an identical margin is in itself not adequate.
- display:block could have saved is if not for MSIE.
Answer to op's problem:
In rendering a table browsers seem to take the width including the
borderwidth, and on div's without borderwidth.
Solution to op's proble"m:
Use percentual margins, and make a table-cell 100%.
Grtz,
--
Rik Wasmus
[Back to original message]
|