Table HTML avec doctype

J'essaie d'aligner une table avec une entrée afin que la table crée une liste déroulante de type google. J'utilise jQuery pour récupérer la position et les dimensions de l'élément d'entrée, puis CSS pour positionner la table. Les choses fonctionnent très bien quand je n'utilise pas DOCTYPE.Table HTML avec doctype

Maintenant, quand ANY DOCTYPE est inclus sur la page les choses vont mal (bizarrement pas dans IE). La table est soudainement 1px plus large et se déplace vers le haut et gauche de 1px.

Aidez quelqu'un! Peut-être que certains d'entre vous ont un code qui fait le bon alignement.

<!--<!DOCTYPE html>--> 
<html> 

    <script src="js/jquery/jquery.js"></script> 

    <body> 

     <input type="text" id="input" />   
     <table id="dropdown" style="border: solid 1px black; border-collapse: collapse; position: absolute;"> 
      <tr> 
       <td>Text</td> 
      </tr> 
     </table> 

     <script> 

     var input = $("#input"); 
     var dropdown = $("#dropdown"); 

     dropdown.css("top", input.position().top + input.outerHeight() - 1); 
     dropdown.css("left", input.position()); 
     dropdown.css("width", input.outerWidth()); 

     </script> 

    </body> 

</html>

Source

2009-11-20 David

Merci pour vos réponses.

En fait, j'ai découvert que le principal problème était la propriété border-collapse: collapse. Lorsqu'il est réglé sur collapse avec l'étiquette <!DOCTYPE...>, le positionnement absolu de la table et le réglage de la largeur ont donné des résultats auxquels je ne m'attendais pas (mais en fait le comportement souhaité selon la norme W3C). Dans le but d'un alignement précis, il est préférable de régler le border-collapse: separate.

Source

2009-11-20 12:21:09 David

Il est probablement dû à un positionnement absolu:

position: absolute;

Essayez de supprimer ou de le modifier que les marges relatives et de réglage.

Le positionnement absolu est une tâche délicate à faire, et souvent il doit être modifié pour IE par rapport aux autres navigateurs.

Source

2009-11-20 02:49:04

Utilisation du HTML et jQuery j'ai pu la suite de faire la table apparaissent et positionner le même dans les deux et IE8 2.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Page</title> 
    </head> 
<body> 
    <input type="text" id="input" /> 
    <table id="dropdown" style="border: solid 1px black; 
      border-collapse: collapse; position: absolute;"> 
     <tr> 
      <td> 
       Text 
      </td> 
     </tr> 
     </table> 

    <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> 
    </script> 

    <script type="text/javascript"> 
     $(document).ready(function({ 
      var input = $("#input"); 
      var dropdown = $("#dropdown"); 
      dropdown.css("top", input.position().top + input.outerHeight() - 1); 
      dropdown.css("left", input.position()); 
      dropdown.css("width", input.outerWidth()); 
     }); 
     </script> 

</body> 
</html>

J'ai remarqué que vous manquez la section de tête du HTML, le type de langue des balises de script et que votre javascript n'a pas la section document.ready.

Espérons que cela aide certains.

Source

2009-11-20 03:00:47 Chris

Table HTML avec doctype

Répondre

Questions connexes