nicht angemeldet
Grundsatzfrage.
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>
-
Hi,
wenn Du das Thema nicht so allgemein formulieren würdest, hättest Du vielleicht eine größere Resonanz.
Ich erkenne in Deinem Beitrag keine Grundsatzfrage.
Gruß
Steffen -
hi,
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?Das Bild als replaced inline element dehnt die Zelle aus, ja - aber nicht den Link.
Denn der ist ein einfaches inline-Element, und für die gilt:
"The height of the content area should be based on the font, but this specification does not specify how."Und wenn du dem Link mal beispielsweise font-size:50px verpasst - dann siehst du, dass der "Streifen", in dem sein Hintergrundbild sichtbar ist, gleich größer wird ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Das Bild als replaced inline element dehnt die Zelle aus, ja - aber nicht den Link.
Denn der ist ein einfaches inline-Element,
Dankeschön für deine Antwort und den Link. :-)
Ich glaube, ich habe es nun verstanden, warum das bg-Bild so klein angezeigt wird.
Nur etwas ist mir noch unklar:Warum wird in meinem Beispiel in Zelle 3 und 4 das Hintergrundbild an den unteren Rand geschoben?
Und wenn du dem Link mal beispielsweise font-size:50px verpasst - dann siehst du, dass der "Streifen", in dem sein Hintergrundbild sichtbar ist, gleich größer wird ...
Ja, mit den Schriftgrössen habe ich auch schon herumgespielt.
Wenn man zb dem body in meinem Beispiel font-size:260% geben würde, dann könnte man das a-Element soweit ausdehnen, dass das ganze Hintergrundbild sichtbar würde.
Wieso aber wird es nach unten verschoben?
Eine Tabellenzelle hat doch per Default vertical-align: middle.
Also müßte der Text ja mittig zentriert sein und sich bei grösserer Schrift gleichmässig nach oben und unten ausdehnen.Wäre supernett von dir, wenn du mir bitte das noch erklären könntest.
LG
netinja
-