nicht angemeldet
Offsetwert in Tabelle richtig auslesen
0 
JürgenB
0 
Matthias Apsel
Offsetwert in Tabelle richtig auslesen
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
-
Hallo Lars,
<!--<meta http-equiv="X-UA-Compatible" content="IE=8" />-->
muss das sein?
Gruß, Jürgen
-
Hallo Lars,
<!--<meta http-equiv="X-UA-Compatible" content="IE=8" />-->
muss das sein?
Gruß, Jürgen
Wie meinst du das genau? Ich habe diese Zeile nur reingenommen, damit ich den HTML-Code bzw. dessen Aussehen auch für den IE8 testen kann.
-
-
Om nah hoo pez nyeetz, Lars Stiedler!
siehe auch dein anderes Posting: Du versuchst offenbar, ein super-pixelgenaues Design zu entwerfen. Das _kann_ nicht funktionieren.
Dabei fällt auf, dass du mit den font-eigenschaften suboptimal umgehst. Siehe http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung.
Außerdem steht zu befürchten, dass du Tabellen zum Layouten verwenden möchtest.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Lars Stiedler!
siehe auch dein anderes Posting: Du versuchst offenbar, ein super-pixelgenaues Design zu entwerfen. Das _kann_ nicht funktionieren.
Bzw. es funktioniert nur dann, wenn ich alle Größenangaben exakt vorgeben kann; wie z.B. in meinem Fall die Breite der Spalten...
Dabei fällt auf, dass du mit den font-eigenschaften suboptimal umgehst. Siehe http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung.
Wie meinst du das genau? Weil ich nicht alle Font-Parameter definiere? Oder weil ich die Schriftgröße in Pixel festlege und nicht eine relative Schriftgröße zur jeweils im Browser eingestellten verwende?
Außerdem steht zu befürchten, dass du Tabellen zum Layouten verwenden möchtest.
Nein, es handelt sich hierbei wirklich um eine Tabelle.
-
Om nah hoo pez nyeetz, Lars Stiedler!
Dabei fällt auf, dass du mit den font-eigenschaften suboptimal umgehst. Siehe http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung.
Wie meinst du das genau?
Du legst in einem style-Element fest:
body {font-size: 16px;font: Tahoma;}Die Angabe 16px; machst du sofort wieder rückgängig (http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/font). Zudem sollte man eine generische Schriftartenfamilie angeben.
Diese Angabe kommt aber ohnehin nicht zum tragen, weil du im Style-Attribut des body-Elements definierst:
font:Verdana; font-size:10px;wieder nicht sonderlich geschickt.
Matthias
--
1/z ist kein Blatt Papier.
-
-