Vous avez présenté le navigateur avec un problème de mise en page incomplète. Vous avez une grille de trois par trois, dont aucune des colonnes ou des lignes n'a de taille fixe. Le problème est donc que vous vous retrouvez avec une première rangée plus grande que vous le vouliez, car le navigateur tente d'allouer la hauteur «de rechange» causée par le rowspan dans la deuxième colonne parmi les cellules de la première colonne.
Il n'y a pas un algorithme normalisé pour cela; Les navigateurs font des choses différentes, incluant souvent des choses désagréables comme regarder le nombre brut d'octets de balisage dans chaque cellule. Vous ne voulez pas vous fier à ce comportement. Cela ralentit également le rendu de la page et peut donner des effets de distorsion de page vraiment étranges quand il y a une très petite ou grande quantité de contenu. Si vous avez besoin d'utiliser des tables pour la mise en page, assurez-vous d'utiliser table-layout: fixed avec des largeurs explicites pour les colonnes de taille fixe, et définir des hauteurs explicites pour les cellules quand il y a rowspans, pour éviter toute ambiguïté.
Mais une prolifération de rowspan/colspan est souvent une indication que vous devriez regarder à une autre forme de mise en page. Cet exemple est beaucoup plus facile à réaliser en utilisant CSS à la place. par exemple .:
<div id="ads">
<script type="text/javascript">//...google stuff...</script>
...
</div>
<div id="content">
<div id="video"><fieldset>
<legend>...</legend>
<object ...>
</fieldset></div>
<form id="poll" method="post" action="..."><fieldset>
<legend>...</legend>
...options...
</fieldset></form>
<form id="subscribe" method="post" action="..."><fieldset>
<legend>...</legend>
...fields...
</fieldset></form>
<div id="about">
...
</div>
</div>
avec des styles quelque chose comme:
#ads { position: absolute; right: 0; width: 160px; }
#content { margin-right: 160px; }
#video { float: right; width: 440px; }
#poll, #subscribe { margin: 0 440px 0 0; }
#about { clear: right; }
Je voudrais aussi vous conseille de déplacer la logique JavaScript à partir du gestionnaire d'événements en ligne vous attribue avez actuellement pour séparer les blocs JavaScript (soit embedded <script> blocs ou scripts externes liés). En particulier pour les gestionnaires d'événements multi-lignes: en dehors de l'horrible maintenabilité des scripts de mélange dans le balisage, en HTML/XML, les retours à la ligne des attributs ne sont pas conservés. Cela signifie que vos sauts de ligne dans le code JS sont convertis en espaces, donc si vous manquez un point-virgule votre script casser ou se comporter bizarrement (où habituellement dans un bloc de script ou d'un script externe, l'auto-newline-points-virgules fallback vous sauverait).
ie.
onsubmit="
var inputs = this.getElementsByTagName('input');
var checkedValue;
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].getAttribute('type') == 'radio' && inputs[i].checked)
{
checkedValue = inputs[i].value;
}
}
/*makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+checkedValue, processAjaxResponse);*/
makeAjaxGetRequest('/poll/ajax-vote.php?vote='+checkedValue, processAjaxResponse);
return false;"
à la place:
<form id="pollForm" method="post" action="/poll/form-vote.php>
...
</form>
<script type="text/javascript">
document.getElementById('pollForm').onsubmit= function() {
var checkedValue= getRadioValue(this.elements.vote);
makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+encodeURIComponent(checkedValue), processAjaxResponse);
return false;
};
function getRadioValue(fields) {
for (var i= fields.length; i-->0;)
if (fields[i].checked)
return fields.value;
return '';
};
</script>
Toujours autoriser uniquement les requêtes POST pour des formes actives qui font quelque chose de positif. Utilisez toujours encodeURIComponent lors de la création de chaînes de requête. N'utilisez pas getAttribute car cela ne fonctionne pas correctement dans IE. utilisez plutôt les propriétés HTML DOM directes du niveau 1, par exemple. input.type.
Veuillez fournir un lien vers un exemple de site ou publier la source HTML problématique (y compris les CSS pertinents). –
Je ne vois pas un tel rembourrage. – cletus
Les tables HTML sont rarement problématiques sans contenu. Vos échantillons n'ont pas de contenu et vous ne décrivez donc pas le problème dans son intégralité. –