5568 sujets

Sémantique web et HTML

Problème avec la DOCTYPE

Bonjour,

J'ai déjà posté ce message dans le bar du forum, mais je pense que celui-ci est mieux adapté dans cette rubrique. (si le webmaster veux le supprimer du bar pas de poblème).

Le code suivant permet de construire un tableau avec une barre de défilement dans le tableau lorsque l'on retaille la fenêtre à une dimension plus petite que le tableau (ce code est inspiré du site http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html).

Ce code a été passé au W3C validation service sans aucune erreur.

Quand la DOCTYPE est mis en commentaire le code fonctionne correctement, sinon le défilement est mis sur la fenêtre et non dans le tableau. Smiley decu

Voici mon code avec la DOCTYPE en commentaire


<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"-->

<html>

<head>
<title>tableau_scroll_h</title>
<meta HTTP-EQUIV="content-type" content="text/html; CHARSET=iso-8859-1">
<style type="text/css">

body
{
overflow: visible;
}

div.tableContainer
{
width: 90%; /* table width will be 99% of this*/
height: 100%; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}

table
{
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: solid 1px black;
}

table>tbody
{
/* child selector syntax which IE6 and older do not support*/
overflow: auto;
}

thead td
{
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: yellow;
color: blue;
border-top: solid slategray 2px;
border-bottom: solid 2px black;
position:relative;
top: expression(document.getElementById("data").scrollTop-2); /*IE5+ only*/
}

td
{
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: right;
font-family: Arial,sans-serif;
border-top: solid 1px black;
border-left: solid 1px black;
}

td:last-child
{
/*prevent Mozilla scrollbar from hiding cell content*/
padding-right: 20px;
}

.color1
{
background-color: blue;
}

.color2
{
background-color: red;
}

.color3
{
background-color: cyan;
}

</style>
<script type="text/javascript">

function WindowHeight()
{
if (window.innerHeight)
{
/* Netscape */
height = document.getElementById("container").style.height = window.innerHeight - 20;
document.getElementById("data").style.height = height - 20;
}
else
{
/* IE 6 */
height = document.getElementById("container").style.height = document.body.offsetHeight - 20;
document.getElementById("data").style.height = height - 20;
}
}

window.onresize = WindowHeight;
window.onload = WindowHeight;

</script>
</head>

<body>

<div id="container">
<div class="tableContainer" id="data">
<table cellspacing="0">
<thead>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
</thead>

<tbody id="cell">
<tr class='color2' onMouseOver="this.className='color3'" onMouseOut="this.className='color2'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf00</td>
<td>two00</td>
<td>three00</td>
<td>four00</td>
<td>five00</td>
</tr>
<tr class='color1' onMouseOver="this.className='color3'" onMouseOut="this.className='color1'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf11</td>
<td>two11</td>
<td>three11</td>
<td>four11</td>
<td>five11</td>
</tr>
<tr class='color2' onMouseOver="this.className='color3'" onMouseOut="this.className='color2'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf22</td>
<td>two22</td>
<td>three22</td>
<td>four22</td>
<td>five22</td>
</tr>
<tr class='color1' onMouseOver="this.className='color3'" onMouseOut="this.className='color1'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf33</td>
<td>two33</td>
<td>three33</td>
<td>four33</td>
<td>five33</td>
</tr>
<tr class='color2' onMouseOver="this.className='color3'" onMouseOut="this.className='color2'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf44</td>
<td>two44</td>
<td>three44</td>
<td>four44</td>
<td>five44</td>
</tr>
<tr class='color1' onMouseOver="this.className='color3'" onMouseOut="this.className='color1'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf55</td>
<td>two55</td>
<td>three55</td>
<td>four55</td>
<td>five55</td>
</tr>
<tr class='color2' onMouseOver="this.className='color3'" onMouseOut="this.className='color2'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf66</td>
<td>two66</td>
<td>three66</td>
<td>four66</td>
<td>five66</td>
</tr>
<tr class='color1' onMouseOver="this.className='color3'" onMouseOut="this.className='color1'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf77</td>
<td>two77</td>
<td>three77</td>
<td>four77</td>
<td>five77</td>
</tr>
<tr class='color2' onMouseOver="this.className='color3'" onMouseOut="this.className='color2'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf88</td>
<td>two88</td>
<td>three88</td>
<td>four88</td>
<td>five88</td>
</tr>
<tr class='color1' onMouseOver="this.className='color3'" onMouseOut="this.className='color1'">
<td>dsfqsdfsdd dsqf qsdf sdqf sqdf qsdf sdf99</td>
<td>two99</td>
<td>three99</td>
<td>four99</td>
<td>five99</td>
</tr>
</tbody>
</table>
</div>
</div>

</body>

</html>


Merci d'avance pour vos explications.

Christian Bonhomme
Modifié par cbon (16 Dec 2005 - 14:23)
Sujet clos
Aller à