nicht angemeldet
Table: Zu hoher Abstand der Tabellenzeilen voneinander
Ich habe eine kleine HTML-Testseite erstellt (um euch etwas Arbeit zu ersparen, könnt ihr diese auch unter http://wase.urz.uni-magdeburg.de/wkeller/testseite/ abrufen). Im Internet Explorer 7 Beta 1 wird diese wie von mir erwünscht angezeigt (d. h. kein Abstand zwischen den beiden Tabellenzeilen). Firefox 1.5 und Opera 9 dagegen machen da Abstand zwischen (etwa 4px).
Frage ist klar: wie kann ich dieses Problem beseitigen?
Anhang 1: Sourcecode der HTML-Seite
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Testseite</title>
<style type="text/css">
/* <![CDATA[ */
body {
background-color: #bfbfbf;
}
.cellClass {
width: 34px;
height: 34px;
}
.bildClass {
width: 32px;
height: 32px;
border: 1px solid #ff0000;
}
/* ]]> */
</style>
</head>
<body>
<table border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td class="cellClass"><img src="img/0.png" alt="Alternativtext" id="tileTableCell0x0ImgId" width="32px" height="32px" class="bildClass" /></td>
<td class="cellClass"><img src="img/0.png" alt="Alternativtext" id="tileTableCell0x1ImgId" width="32px" height="32px" class="bildClass" /></td>
</tr>
<tr>
<td class="cellClass"><img src="img/0.png" alt="Alternativtext" id="tileTableCell1x0ImgId" width="32px" height="32px" class="bildClass" /></td>
<td class="cellClass"><img src="img/0.png" alt="Alternativtext" id="tileTableCell1x1ImgId" width="32px" height="32px" class="bildClass" /></td>
</tr>
</table>
</body>
</html>
-
OK, ich bin neu im Forum. Jetzt weiß ich, dass die Forumfaq mir diese Frage beantwortet hätte:
http://forum.de.selfhtml.org/hilfe/faq.htm#bilder-luecken
-
Hallo,
Anhang 1: Sourcecode der HTML-Seite
<table border="0px" cellpadding="0px" cellspacing="0px">^Die Angabe einer Maßeinheit px für Längenmaße ist bei HTML-Attributen falsch. Hier kann nur eine Zahl (Bildpunkte) oder eine Prozentangabe stehen. Bei CSS-Lämgenangaben _muss_ eine Einheit stehen. Das hier ist aber kein CSS.
Schreibe hier mal border="1" hin, dann siehst Du was den Abstand verursacht. Das Bild steht auf der Text-Grundlinie (baseline). Der Abstand ist der Platz für Textunterlängen, wie z.B. bei "g".
.bildClass {
vertical-align:bottom;
...
}oder
.bildClass {
display:block;
...
}würde das ändern. Das erste zieht die Bilder auf die absolute Grundlinie. Das zweite macht die Bilder zu Block-Boxen, die sich nicht an Textkontext orientieren.
viele Grüße
Axel