Ich habe 4 Div Container mit je 4 Links.
Die Container sollen je ein Hintergrundbild bekommen. Die Links sollen am Anfang nicht zu sehen sein.
Beim :hover werden andere Bilder eingebunden, die durch eine transparente weiße Ebene noch leicht zu sehen sein sollen(sie treten in der Hintergrund).
Jetzt, also erst beim :hover sollen auch die Links zu sehen sein.
Im Firefox 3 geht dieses ohne Probleme, beim Opera 9 sowie beim Safari 3 funktioniert es bei mir ebenfalls.
Nur der Internet Explorer stellt sich quer. :???:
Was kann ich machen?
HTML
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=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="top">
<div id="left">
<ul id="box01">
<li><a href="#">LINK 01</a></li>
<li><a href="#">LINK 02</a></li>
<li><a href="#">LINK 03</a></li>
<li><a href="#">LINK 04</a></li>
</ul>
<ul id="box03">
<li><a href="#">LINK 01</a></li>
<li><a href="#">LINK 02</a></li>
<li><a href="#">LINK 03</a></li>
<li><a href="#">LINK 04</a></li>
</ul>
</div>
<div id="rigth">
<ul id="box02">
<li><a href="#">LINK 01</a></li>
<li><a href="#">LINK 02</a></li>
<li><a href="#">LINK 03</a></li>
<li><a href="#">LINK 04</a></li>
</ul>
<ul id="box04">
<li><a href="#">LINK 01</a></li>
<li><a href="#">LINK 02</a></li>
<li><a href="#">LINK 03</a></li>
<li><a href="#">LINK 04</a></li>
</ul>
</div>
</div>
<div id="bottom">
<p>Hier Text</p>
</div>
<div id="navi">Impressum - E-Mail - Kontakt - Copyright 2008</div>
</div>
</body>
</html>CSS
Code
* {
margin:0;
padding:0;
}
body {
}
#container {
margin:10px auto;
width:551px;
}
#top {
width:551px;
height:301px;
border:1px solid #000;
}
#left {
float:left;
width:275px;
height:300px;
border-right:1px solid #000;
}
#box01, #box03 {
float:left;
width:275px;
height:150px;
}
#box02, #box04 {
float:right;
width:275px;
height:150px;
}
#box01, #box02 {
border:none;
}
#box03, #box04 {
border-top:1px solid #000;
}
#box01:hover, #box02:hover, #box03:hover, #box04:hover {
background:#eee;
}
#box01 li, #box02 li, #box03 li, #box04 li {
list-style-type:none;
padding:9px;
}
#box01 a, #box02 a, #box03 a, #box04 a {
display:none;
}
#box01:hover a, #box02:hover a, #box03:hover a, #box04:hover a {
display:inherit;
color:#333;
}
#box01 a, #box02 a, #box03 a, #box04 a {
color:#333;
text-decoration:none;
}
#box01 a:hover, #box02 a:hover, #box03 a:hover, #box04 a:hover {
color:#FF0000;
text-decoration:underline;
}
#right {
float:right;
width:275px;
height:300px;
}
#bottom {
width:551px;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
#bottom p {
padding:5px;
}
#navi {
text-align:right;
margin-right:10px;
}Wenn jemand den ganzen Code haben möchte, soll er eben bescheid sagen!