PDA

Volledige versie bekijken : table in div

davyvh
%Europe/Berlin %689 %2007, 16:33
Hey

Als ik in IE een table in een div plaats (met een bepaalde margin en padding), en zet die table op 100% width, klopt dit niet echt. Hij neemt de breedte van het scherm en houdt geen rekening met de margin en padding van de 'voorgaande' div. Met als gevolg dus dat de table 'uit het scherm' steekt.
Firefox doet dit niet en berekent de 100% keurig terwijl hij rekening houdt met de marges van voorgaande div.

Hoe kan ik deze fout in IE het beste voorkomen?

Groeten
Davy
Laiverd
%Europe/Berlin %700 %2007, 16:49
Ik zie het probleem niet; onderstaande werkt goed in IE (versie 6) en en Firefox (versie 1.5.0.9)
<div style="width: 300px; border:1px solid red;">
<table style="width:100%; border:1px solid black;">
<tr>
<td>table op 100%</td>
</tr>
</table>
</div>
Ik zie trouwens inderdaad wel een probleem indien ik de table ook nog een margin geef. Maar dat is opgelost door niet een margin in de table te gebruiken, maar een padding in de div.

Overigens: ik neem aan dat je je div een vaste breedte mee geeft. Als dat zo is, dan zou ik persoonlijk ook m'n table een vaste breedte meegeven. Absolute en relatieve waarden door elkaar gebruiken is nog steeds niet per se een goede idee.

John
davyvh
%Europe/Berlin %710 %2007, 17:03
Voila, heb ze even geregenereerd op de manier dat ik de fout krijg:
<html>
<head>
<style type="text/css">
.window {
margin: 0px 5px 10px 5px;
border: 1px solid #383E50;
background-color: #F0F1F4;
padding: 7px;
}
.subject{
background-color:#D6DAE0;
color: #333333;
}
</style>
</head>

<body>
<?php
print "<div class='window'>";
print "<b>forum</b><br><br>";
print "<table width='100%' border='0' cellspacing='1' cellpadding='3'><tr>";
print "<td class='subject' width='80%'><b><a href=#</a></b><br><small>descr</small></td>";
print "<td class='info' width='20%' valign='right'>Laatste bericht geplaatst op<br>".date("d-m-Y")."</td>";
print "</tr></table>";
?>
</body>
</html>
Laiverd
%Europe/Berlin %712 %2007, 17:05
Ja, en dus? Ik heb je de html gegeven die in elk geval bij mij werkt. Probeer dat dan in elk geval even. En regel alles in je css; dus niet meer width attributen in tabel gebruiken.

John
davyvh
%Europe/Berlin %732 %2007, 17:34
Bij jouw code inderdaad geen fouten. Bij deze wel in IE:
http://85.17.41.179/~davyvh/untouchable/admin/test.php
Heb ondertussen de attributen ook uit de tag gehaald.
Laiverd
%Europe/Berlin %744 %2007, 17:51
Voorlopig even twee dingen:

1. zorg dat je html wel klopt (<b><a href=#</a></b> is echt niet goed.
2. stel doctype voor je html goed in
3. en sluit voor de fun die openings div ook even af

Nieuw stylesheet/html
<!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><title>Untitled Document</title>
<style type="text/css">
html,body {
padding: 5px;
margin: 0px;
}
.window {
border: 1px solid #383E50;
background-color: #F0F1F4;
padding: 7px;
}
.subject{
background-color:#D6DAE0;
color: #333333;
width:80%;
}
table{
width:100%;
border:0;
cellspacing:1px;
cellpadding:3px;
}
.info{
background-color:#C7CED6;
width: 20%;
valigh: right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>
<div class='window'>
<b>forum</b><br /><br />
<table><tr>
<td class='subject'><b><a href="#"></a></b><br /><small>descr</small></td>
<td class='info'>Laatste bericht geplaatst op<br />17-02-2007</td>
</tr>
</table></div></body>
</html>
En als je dan ook nog zou willen dat de boel goed door de validator komt:
1. de <b> tag niet meer gebruiken maar de <strong> tag
2. attribuut waarden double quoten en niet single quoten

Tenslotte: probeer tabellen alleen te gebruiken voor table data en niet voor opmaak. In jouw code zou je anders net zo goed helemaal niet moeilijk hoeven te doen en je container div vervangen door een container td. Waarom het buitenste element een div en daarbinnen dan al je opmaak met een table doen? Is niet netjes lijkt me ;)

John