Tweet
Bin an einer Homepage schreiben und habe nun beim IE9 ein Problem mit dem Navigationsmenü.
Wenn ich mit der Maus auf Preise gehe öffnet sich das Untermenü mit Männer, Frauen und Kinder.
Wenn ich dann mit der Maus runterfahre und Kinder auswählen will, dann verschwindet das Menü. Nur wenn ich mit dem Cursor ganz rechts bleibe, verschwindet die Auswahl nicht.
Unter FF5 und Opera11.50 funtioniert es einwandfrei.
Bei IE9 und Opera 11.11 hab ich die Probleme.
Ich nehme mal an, dass es dazu einen extra Code für den IE braucht, habe aber bisher nichts gefunden.
Kann mir da wer weiterhelfen?
Hier der Code vom Index-File:
und hier noch der Code vom CSS:
Wenn ich mit der Maus auf Preise gehe öffnet sich das Untermenü mit Männer, Frauen und Kinder.
Wenn ich dann mit der Maus runterfahre und Kinder auswählen will, dann verschwindet das Menü. Nur wenn ich mit dem Cursor ganz rechts bleibe, verschwindet die Auswahl nicht.
Unter FF5 und Opera11.50 funtioniert es einwandfrei.
Bei IE9 und Opera 11.11 hab ich die Probleme.
Ich nehme mal an, dass es dazu einen extra Code für den IE braucht, habe aber bisher nichts gefunden.
Kann mir da wer weiterhelfen?
Hier der Code vom Index-File:
Code:
<!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>
<link href="favicon.ico" rel="shortcut icon"/>
<title>Coiffeur Tanya</title>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload = function() {
Nifty("div#content_main","big");
Nifty("div.infobox1","big tl br");
Nifty("#infobox2","big tl br");
}
</script>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<div id="main">
<div id="titel">
<h1><img src="http://www.informatikboard.ch/images/logo.jpg" alt="Coiffeur Tanya - Logo" width="400" height="84"/></h1>
</div>
<div id="navigation">
<ul id="navi_h">
<li><a id="aktuell" href="index.html">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Portrait</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Preise</a>
<ul>
<li><a href="pm.html">Männer</a></li>
<li><a href="pf.html">Frauen</a></li>
<li><a href="pk.html">Kinder</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="content_main">
<img src="http://www.informatikboard.ch/images/salon.jpg" alt="Blick in den Coiffeur-Salon"/>
<h1>Der zufriedene Kunde liegt uns am Herzen!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.</p>
</div>
<div id="content_supp">
<div class="infobox1">
<h2>Öffnungszeiten:</h2>
<p>Montag Ruhetag<br /><br />
Dienstag bis Freitag<br />
08.00 Uhr bis 18.30 Uhr<br /><br />
Samstag bis 16.00 Uhr<br /> <br />
Mittags durchgehend</p>
</div>
<div id="infobox2">
<img src="http://www.informatikboard.ch/images/friseurutensilien.jpg" alt="Friseurutensilien" width="200" height="134"/>
</div>
</div>
</div>
<div id="footer">
<p><a href="impressum.html">Impressum</a></p>
</div>
</div>
</body>
</html>
Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: "Verdana", "Geneva", sans-serif;
font-size: 12pt;
background: url("http://www.informatikboard.ch/images/back2.jpg");
}
h1 {
font-size: 140%
}
h2 {
font-size: 120%
}
h1, h2 {
margin: 0 0 5px 0;
color: #990000;
}
a {
color: #000;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
}
p {
text-align: justify;
margin: 5px 0;
}
table {
margin-top: 20px;
padding: 3px;
}
th {
padding: 5px;
}
td {
padding: 5px;
}
#titel {
margin-left: 8px;
}
div#navigation {
width: 47.1em;
padding: 0.8em;
border: none;
}
div#navigation div {
clear: left;
}
ul#navi_h {
margin: 0;
padding: 0;
text-align: center;
}
ul#navi_h li {
list-style: none;
float: left;
position: relative;
margin: 0.4em;
padding: 0;
}
*:first-child+html ul#navi_h li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#navi_h li ul {
margin: 0;
padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none;
}
*:first-child+html ul#navi_h ul { /* Workaround fuer den IE 7 */
background-color: #990000;
padding-bottom:0.4em;
}
ul#navi_h li:hover ul {
display: block;
}
ul#navi_h li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#navi_h a, ul#navi_h span {
display: block;
width: 6.4em;
padding: 0.2em 1em;
text-decoration: none;
font-weight: bold;
border: 1px solid #000;
border-left-color: #FFF;
border-top-color: #FFF;
color: #000;
background-color: #FFF;
}
ul#navi_h a:hover, ul#navi_h span, li a#aktuell {
border-color: #FFF;
border-left-color: #000;
border-top-color: #000;
color: #990000;
background-color: #E1D6B5;
}
li a#aktuell {
color: #990000;
background-color: #E1D6B5;
}
ul#navi_h li ul span {
background-color: #990000;
color: #E1D6B5;
}
#main {
width: 800px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
background: #FFF;
}
#content {
margin-left: 8px;
margin-top: 40px;
margin-right: 8px;
clear: both;
}
#content #content_main {
width: 485px;
float: left;
background: #E1D6B5;
padding: 20px;
}
#content_supp {
width: 250px;
float: right;
}
#content {
overflow: auto;
}
#content_supp .infobox1 {
background: #E1D6B5;
}
#infobox2 {
background: #E1D6B5;
}
#content_supp .infobox1, #infobox2 {
padding: 20px;
margin-bottom: 10px;
}
.infobox1 h2 {
font-size: 115%;
}
.infobox1 p {
font-size: 105%;
margin: 5px 0px;
}
#content_impressum {
width: 730px;
margin-left: 8px;
background: #E1D6B5;
padding: 20px;
}
#bildergalerie {
overflow: hidden;
}
#bildergalerie ul li {
display: block;
float: left;
}
#bildergalerie img {
margin: 8px 10px 8px 0;
float:left;
}
strong {
color: #990000;
}
#footer {
background: #FFF;
padding: 5px 0 0 30px;
}
#footer a:hover {
color: #990000
}
Kommentar