Lars Stiedler: Offsetwert in Tabelle richtig auslesen

Beitrag lesen

SELF-Forum

Offsetwert in Tabelle richtig auslesen

Lars Stiedler
– Informationen zu den Bewertungsregeln

Moin,

weiß jmd von euch wie man browserübergreifend einen OffsetWert innerhalb einer Tabelle auslesen kann, so dass dieser Offset stets richtig ist?

Im folgenden Beispiel unterscheiden sich die Offsetwerte wiefolgt:

  • Firefox offsetTop = 2;
  • IE-9 offsetTop = 0;
  • IE-8 offsetTop = 2;

Lässt man die CSS-Angabe "border-collapse: collapse;" weg, dann ist der OffsetTop-Wert immer 0.

Anbei mal die komplette Testpage. Vielleicht mach ich ja irgendwas falsch oder man kann es anders schreiben, damit es exakt passt. Oder hab ich irgendwo einen Denkfehler.

  
<!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>testpage</title>  
     <!--<meta http-equiv="X-UA-Compatible" content="IE=8" />-->  
  
     <style type="text/css">  
         * {margin: 0;padding: 0;border: 0px;}  
         body {font-size: 16px;font: Tahoma;}  
  
         .cborder {  
             border: 1px solid blue;  
             height: 30px;  
             background: transparent;  
             text-align: center;  
             vertical-align: middle;  
             line-height: 30px;  
         }  
  
  
         #myTable {  
             border: 4px solid black;  
             border-collapse: collapse;  
             position: relative;  
         }  
     </style>  
  
     <script language="JavaScript1.2" type="text/javascript">  
  
         function buttonClick() {  
             alert(mydiv2.offsetTop);  
         }  
     </script>  
  
 </head>  
 <body id="myBody" style="font:Verdana; font-size:10px;">  
     <div id="wrapper" style="position:absolute; top:0px; left:0px;">  
         <table id="myTable">  
             <tr>  
                 <td>  
                     <div class="cborder">  
                         test  
                     </div>  
                 </td>  
                 <td>  
                     <div class="cborder" id="mydiv2">  
                           test  
                     </div>  
                 </td>  
             </tr>  
             <tr id="myTR">  
                 <td id="myTD">  
                     <div style="height: 300px; background: #888;" id="myDiv">  
                         myDiv  
                     </div>  
                 </td>  
                 <td id="Td1">  
                     <div style="height: 300px; background: #888;" id="Div1">  
                         Div1  
                     </div>  
                 </td>  
             </tr>  
         </table>  
         <input type="button" value="Get myDiv.offsetTop " onclick="buttonClick();" id="button1" name="button1"  
             style="position:relative;"/>  
    </div>  
 </body>  
 </html>

Gruß
Lars

Beitrag melden
–
Informationen zu den Bewertungsregeln