ansaurus

Question

Answer 1

A:

It's likely due to absolute positioning:

position: absolute;

Try removing that or changing it to relative and setting margins.

Absolute positioning is a tricky thing to do, and often it has to be modified for IE vs other browsers.

Jeremy Morgan 2009-11-20 02:49:04

Answer 2

A:

Using the following HTML and jQuery I was able to make the table appear and position the same in both IE8 and Chrome 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"&gt;
     </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>

I noticed that you were missing the head section of the HTML, the language type of the script tags and that your javascript did not have the document.ready section.

Hope this helps some.

Chris 2009-11-20 03:00:47

Answer 3

A:

Thanks for both your answers.

I actually found out the main problem was the border-collapse: collapse property. When set to collapse with <!DOCTYPE...> tag included then absolute table positioning and width setting gave results I wasn't expecting (but in fact desired behaviour as per the W3C standard). For the purpose of accurate alignment it proves better to set the border-collapse: separate.

David 2009-11-20 12:21:09

ansaurus

tags:

views:

answers:

html table problem with doctype

related questions