nicht angemeldet
img-link Bug im IE in Verbindung mit line-height
Hallo zusammen,
ich habe folgendes Problem: Ich möchte mehrere Links auf zwei Zeilen verteilt darstellen. Die Links befinden sich jeweils in einem <div> und die Höhe der Links muss 17px sein und jeder Link muss einen rechten Rand haben. Die Höhe bekomme ich mit der css-Eigenschaft line-height (auf den Link angewendet) auch wunderbar hin.
Sobald ich aber innerhalb eines Linkes ein image einfüge wird die line-height Eigenschaft aber nicht mehr angewendet. Das ganze ist nur im IE zu beobachten. Firefox verhält sich so wie es sein sollte.
Kennt jemand dieses Problem?
Danke im Voraus.
Hier noch der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="language" content="de, deutsch, german">
<script type="text/javascript" src="javaScript/commons.js"></script>
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 10px; /* important if user sets the windows-system font-size to "high" */
}
div {
background-color: silver;
margin-top: 10px;
}
div a {
border-left: 1px solid white;
padding: 0 10px;
line-height: 17px;
}
</style>
<title></title>
</head>
<body>
<div id="id1">
<a href="javascript:void(-1);">link 1</a>
<a href="javascript:void(-1);">link 2</a>
</div>
<div id="id2">
<a href="javascript:void(-1);"><img src="img/headLogout.gif" alt="Logout" height="2">link 3</a>
<a href="javascript:void(-1);">link 4</a>
</div>
</body>
</html>
-
Tag Tina.
Ich möchte mehrere Links auf zwei Zeilen verteilt darstellen. Die Links befinden sich jeweils in einem <div> und die Höhe der Links muss 17px sein und jeder Link muss einen rechten Rand haben. Die Höhe bekomme ich mit der css-Eigenschaft line-height (auf den Link angewendet) auch wunderbar hin.
Wieso nimmst du line-height? Da das DIV von Haus aus keine definierte Höhe hat, nimmt es sich soviel vertikalen Raum, wie der Inhalt erfordert, also 17px.
Sobald ich aber innerhalb eines Linkes ein image einfüge wird die line-height Eigenschaft aber nicht mehr angewendet.
Ist das Bild vielleicht höher als 17px (inklusive Außenabstände)? Ich bin zwar kein CSS-Experte, aber vielleicht hilft es, dem umgebenden DIV eine feste Höhe zuzuweisen und overflow auf »hidden« zu stellen. Zusätzlich könnte man dem IMG noch ein »border-style:none« verpassen sowie alle Außenabstände auf 0 setzen.
Vielleicht hilft's
Siechfred--
»Sie kochten heimlich mit Wasser und tranken öffentlich Wein.«-
Hallo Siechfried
Wieso nimmst du line-height? Da das DIV von Haus aus keine definierte Höhe hat, nimmt es sich soviel vertikalen Raum, wie der Inhalt erfordert, also 17px.
line-height wende ich auf die links innerhalb des <div>s an.
Ist das Bild vielleicht höher als 17px (inklusive Außenabstände)? Ich bin zwar kein CSS-Experte, aber vielleicht hilft es, dem umgebenden DIV eine feste Höhe zuzuweisen und overflow auf »hidden« zu stellen. Zusätzlich könnte man dem IMG noch ein »border-style:none« verpassen sowie alle Außenabstände auf 0 setzen.
das Image hat eine Höhe von 2px (habe ich direkt im <img>-Tag angegeben. Alle Abstände wurden über den Universalselektor (*) auf 0px gesetzt.
Vielleicht hilft's
Trotzdem danke
GrussTina
-
Hallo Tina,
du hast wahrscheinlich dasselbe Problem wie roje, deshalb hier der Querverweis, vielleicht hilft er dir.
https://forum.selfhtml.org/?t=99695&m=609396
Gruß Gernot
-
-