nicht angemeldet
Problem mit Firefox
Wenn ich einem <a> Element welches ein Bild enthält einen Rahmen gebe, warum wird beim Firefox das <a> Element nicht gleich groß wie das Bild?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
padding:20px;
}
img {
border:0px;
}
a.mark:hover {
border:1px solid #000000;
background-color:#0000FF;
}
</style>
</head>
<body>
<a class="mark" href="#"><img src="http://www.w3.org/Icons/w3c_main" alt="Test" title="Test"></a>
</body>
</html>
-
Hallo,
Wenn ich einem <a> Element welches ein Bild enthält einen Rahmen gebe, warum wird beim Firefox das <a> Element nicht gleich groß wie das Bild?
weil der Rahmen dazukommt.
Grüsse
Cyx23
-
Weil deinem Bild ganz einfach die
width:
height:angaben fehlen.
mfg
-
Hallo,
Wenn ich einem <a> Element welches ein Bild enthält einen Rahmen gebe, warum wird beim Firefox das <a> Element nicht gleich groß wie das Bild?
Weil das A-Element ein "Inline, non-replaced element" ist. Dessen Höhe hat sich so http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced zu berechnen. Die Höhe solcher Elemente ist also von der line-height bzw. der font-size abhängig, nicht aber von anderen Inhalten.
Du könntest bei a.mark:hover den rahmen aber um das IMG-Element zeichnen lassen.
...
a.mark:hover {
background-color:#0000FF;
}
a.mark:hover img {
border:1px solid #000000;
}
...viele Grüße
Axel