Hallo,
Ich habe 2 floatende Boxen mit left, im FF wird dies richtig dargestellt, im IE hingegen wird die Border vom Container mit herumgelegt und wenn man mit der Maus darüberfährt zieht es den ganzem Rahmen auseinander. Was müsste man am Quellcode ändern damit es wie im FF aussieht?
Ich habe 2 floatende Boxen mit left, im FF wird dies richtig dargestellt, im IE hingegen wird die Border vom Container mit herumgelegt und wenn man mit der Maus darüberfährt zieht es den ganzem Rahmen auseinander. Was müsste man am Quellcode ändern damit es wie im FF aussieht?
HTML:
<!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=iso-8859-1" />
<title>testfloat</title>
<style type="text/css">
#container {width: 35%; border:#776655 solid 1px; margin: 40px auto auto auto; background-color:#FFFFFF;}
#box a { margin-left:100px; color:#ffffff; text-align:center; background: #99CCCC; font:bold 16px verdana, sans-serif; text-decoration:none; display:block; width:165px; padding:10px 12px 10px 10px; border:1px solid #776655; float: left; margin-right: -70px;}
#box a:hover {color:black;background: #999999;}
#box a span {display:none;}
#box a:hover span { display:block; width:155px;color:black;background:#ffffff; font:normal 16px courier, sans-serif; border:1px solid #006600; margin-top:10px;padding:5px;}
</style>
</head>
<body>
<div id="container" >
<div id="box">
<div><a href="http://1.de" target="_blank">1<span><img src="bilder/1.jpg" alt="1" /></span></a></div>
<div><a href="http://11.de" target="_blank">11<span><img src="bilder/11.jpg" alt="11" /></span></a></div>
</div>
</div>
</body>
</html>