nicht angemeldet
Moinsen
ich habe ein Problem mit einem IE Bug und vielleicht hatte das schonmal jemand und hat ihn schon gelöst.
Seitenaufbau: Text und Menus befinden sich in einer gemeinsamen Box (id="box1") welche eine rote border hat. Der Text soll in die Mitte, nach links kommen die internen Links und rechts die externen. Die boxen links und rechts werden auf die Seiten gefloatet und relativ positioniert, wodurch sie dann über der roten border von "box1" liegen.
Auf der linken Seite habe ich die td der Links mit einem simplen background-hover belegt. Leider kommt da dann auch immer ungebeten die rote border mit durch. Sobald man scrollt verschwindet sie wieder, um beim nächsten hover wieder aufzutauchen.
Allerdings (ich habe lange gebraucht um das herauszufinden): Das passiert nur, wenn die <div id="right"> ebenfalls vorhanden ist. Sobald ich die rechte Box herausnehme funktioniert alles normal.
Kennt das jemand?
Gruss,
Troubadix.
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>border</title>
<style type="text/css">
#box1 {
border:solid 1px #990000;
position:relative;
margin:0 0 0 5em;
width:500px;
height:200px;
}
#links td {
background-color:#aaa;
width:200px;
border:solid 1px #000;
text-align:left;
}
#links td:hover {
background-color:#bbb;
}
#links a:hover {
color:#fff;
}
.whi {
margin:auto;
margin-top:5px;
padding:5px;
width:210px;
border:solid 1px black;
background-color:#fff;
}
#left {
padding-top:10px;
float:left;
position:relative;
right:20px;
width:210px;
text-align:center;
}
#right {
padding-top:10px;
float:right;
position:relative;
left:20px;
width:210px;
text-align:center;
}
* html .whi {
width:220px;
}
</style>
</head>
<body>
<div id="box1">
<div id="left">
<div class="whi">
<table id="links">
<tr><td><a href="border.html">link1</a></td></tr>
<tr><td><a href="border.html">link2</a></td></tr>
</table>
</div>
</div>
<div id="right">
<div class="whi">
<table id="links">
<tr><td><a href="border.html">link1</a></td></tr>
<tr><td><a href="border.html">link2</a></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>