nicht angemeldet
Hallo Forum,
Jetzt bitte nicht gleich weglaufen, bei diesem Reizwort. :-D
Ich habe hier eine Tabelle.
In der ersten Zelle ersteckt sich das Hintergrundbild nur über die Höhe des LinkTextes.
Das ist klar, weil der Link ein Inlineelement ist und deshalb nur so gross ist, wie sein Inhalt, der Text.
die zweite Zelle fällt total in sich zusammen, weil es dort keinen Inhalt gibt.
Auch das ist klar.
Aber in der dritten Zelle dehnt das transparente Gif die Zelle auf 110 x 110.
Im Inlineelement, dem Link, ist auch wieder Inhalt vorhanden, nämlich das Bild.
Wieso wird dann im Firefox der Hintergrund von a:link, der durchscheinen müßte, nur so schmal angezeigt?
Könnte mir das bitte jemand von euch erklären?
Im IE ist alles so, wie ich es erwartet habe.
Damit ihr keine Arbeit damit habt und nicht eure eigenen Bilder in den Code einsetzen müßt, habe ich ausnahmsweise Bilder aus dem Forum direkt verlinkt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Bildhover</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type="text/css">
body {
margin: 0;
padding: 0;
font-family : Verdana, sans-serif;
font-size:120%;
background-color:#e1e1e1; }
a {
font-weight: bold;
color: black;
text-decoration:none;
}
a:link,
a:visited {
background-image: url(http://www.css-praxis.de/img/bgbruecke.gif); }
a:hover {
color: white;
background-image: url(http://de.selfhtml.org/src/logo.gif); }
table {
background-color:#eee;
width:50%;
border: 0.3em solid red; }
td {
text-align:center;
background-color:#0C4D73; }
</STYLE>
</HEAD>
<BODY>
<TABLE cellspacing="5" >
<TR>
<TD><A href="#">Link</A></TD>
</TR>
<TR>
<TD><A href="#"></A></TD>
</TR>
<TR>
<TD><a href="#">
<img src="http://www.homepage-total.de/webdesign/spacer.gif"
alt="" width="120" height="110"></a></TD>
</TR>
<TR>
<TD><a href="#">
<img src="http://de.selfhtml.org/src/logo.gif"
alt="" width="120" height="110"></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>