nicht angemeldet
CSS-Galerie: Abstand Fehler im IE 7
0 0
CSS-Galerie: Abstand Fehler im IE 7
Der MartinHallo,
ich versuche mich momentan an eine CSS-Galerie mittels "hover".
Sobald man mit der Maus über das kleine Bild fährt, erscheint darunter das Bild im größeren Format.
Das Problem ist, dass im IE 7 zwischen kleinem und großem Bild ein Abstand entsteht, was aber in den anderen aktuellen Browsern (Firefox, Opera, Safari, Chrome) nicht der Fall ist, denn dort wird alles richtig (ohne Abstand) gezeigt.
Im IE 6 funktioniert es sowieso nicht und IE 8 habe ich nicht ausgetestet.
Kann sich jemand den Abstand erklären und mir villeicht eine Lösung vorschlagen?
Gruß
Hier mal mein html-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Galerie-Test</title>
[code lang=css]
<style type="text/css">
<!--
img {
border:none;
}
#box1{
height:41px;
width:55px;
padding:0px;
float: left;
}
#box1 #rahmen{
display:none;
}
#box1:hover #rahmen{
display:block;
width:640px;
height:480px;
font:normal 11px Arial, Helvetica, sans-serif;
background-image: url(bild_groß_01.jpg);
float: left;
}
-->
</style>
</head>
<body>
<div id="box1">
<a href="#"><img src="bild_klein_01.jpg" width="55" height="41" alt=""></img></a>
<div id="rahmen">
</div>
</div>
</body>
</html>
[/code]
-
Hi,
Das Problem ist, dass im IE 7 zwischen kleinem und großem Bild ein Abstand entsteht
Wieder mal das bekannte Unterlängen-Problem (Stichwort!).
vertical-align:bottom oder display:block für's Bild hilft.
<a href="#"><img src="bild_klein_01.jpg" width="55" height="41" alt=""></img></a>
Das schliessende </img> solltest du weglassen, wenn du HTML-kompatibles XHTML schreiben willst. Also stattdessen nur <img /> verwenden.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hallo ChrisB,
danke für deine schnelle Antwort und noch mehr für das gelöste Problem.
Eine Frage hätte ich noch zu der CSS-Galerie:
Der IE 6 zeigt beim Drüberfahren mit der Maus auf das kleine Bild, das große Bild nicht an. Wie kann ich dieses Problem für den IE 6 lösen?Gruß
-
Hallo,
Der IE 6 zeigt beim Drüberfahren mit der Maus auf das kleine Bild, das große Bild nicht an.
das ist klar, wenn man weiß, dass der IE bis Version 6 :hover nur für Links unterstützt.
Wie kann ich dieses Problem für den IE 6 lösen?
Durch eine kleine Veränderung der Struktur - das große Bild muss mit in den Link (in das a-Element):
<a href="..."><img src="minibild" alt="Vorschau" /><img class="maxi" src="maxibild" alt="Vollansicht" /></a>
a img.maxi { display:none; }
a:hover img.maxi { display: block; }Das nur zum grundsätzlichen Prinzip; die Feinheiten (Layout) darfst du noch selbst ausknobeln. ;-)
So long,
Martin--
Die neue E-Mailadresse des Papstes: mailto:urbi@orbi-
Hallo Martin,
»» Wie kann ich dieses Problem für den IE 6 lösen?
Durch eine kleine Veränderung der Struktur - das große Bild muss mit in den Link (in das a-Element):
ich danke dir für deine Variante, die ich auch besser finde, jedoch zeigt der IE 6 die Vollansicht des Bildes weiterhin nicht an, was ich sehr schade finde.
Im IE 7 und Firefox 3 funktioniert das Ganze einwandfrei.Gruß
-
-
-