Hallo,
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]