nicht angemeldet
hallo,
Auf der linken Seite habe ich die td der Links mit einem simplen background-hover belegt.
Du hast etwas DIV-Suppe angerührt und deine Links völlig unmotiviert in Tabellen gestopft. Entferne bitte die Tabellen und wenigstens eins deiner verschachtelten DIVs.
Leider kommt da dann auch immer ungebeten die rote border mit durch.
Wenn schon, dann wäre es _der_ border, also der Rand.
Allerdings [...] Das passiert nur, wenn die <div id="right"> ebenfalls vorhanden ist. Sobald ich die rechte Box herausnehme funktioniert alles normal.
Dein Problem ist nicht nachvollziehbar, weder mit IE6 noch mit IE7. Es sieht so aus, wie du es vermutlich gewünscht hast - auch in Opera, Firefox, Safari und Konqueror.
Grüße aus Berlin
Christoph S.
Die Divs haben im Layout der entgültigen Seite schon ihre Berechtigung. Unten nochmal dasselbe mit einer Schachtel weniger.
Das mit den Tabellen: Nungut, wenn das die Lösung sein sollte, ... ich find die <td> einfacher zu kontrollieren, als <li>.
Dass Du es nicht nachvollziehen kannst wundert mich. Sowohl im IE6 als auch im IE7 kommt beim überfahren mit der Maus der rote border zum Vorschein (in den linken Links). In Opera und Firefox nicht, Safari und Konqueror hab ich nicht ausprobiert.
Von mir aus auch der border, soll mir recht sein, solange er hinter dem vor ihm liegenden Element bleibt.
Grüsse aus Hamburg
<?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;
}
#left {
padding-top:10px;
float:left;
position:relative;
right:40px;
width:210px;
text-align:center;
}
#right {
padding-top:10px;
float:right;
position:relative;
left:40px;
width:210px;
text-align:center;
}
* html .whi {
width:220px;
}
</style>
</head>
<body>
<div id="box1">
<div id="left">
<table id="links">
<tr><td><a href="border2.html">link1</a></td></tr>
<tr><td><a href="border2.html">link2</a></td></tr>
</table>
</div>
<div id="right">
<table id="links">
<tr><td><a href="border2.html">link1</a></td></tr>
<tr><td><a href="border2.html">link2</a></td></tr>
</table>
</div>
</div>
</body>
</html>