Frage stellen
ich bastle seit geraumer Zeit Homepages. Ich schreibe sie im html und nutze java-scripts (wenn auch eher ungern) und css-stylesheets. Das html beherrsche ich einigermaßen gut. Die css-stylesheets erstelle ich nicht selber, sondern nutze vorgefertigte und verstehe sie soweit, dass ich Änderungen in der css-Datei hin und wieder vornehme, um sie an meine Bedürfnisse anzupassen.
Nun bastle ich gerade an einer Homepage (http://www.foto-dami.de/liedertafel) mit einem css-Menü als Navigation. Mein Problem bezieht sich auf die Darstellung im Windows Internet Explorer 8. Hier wird das Menü, welches aus mehreren Grafiken besteht, nicht korrekt angezeigt. Soll heißen die abgerundete Grafik (links und rechts) wird offensichtlich durch den IE daneben noch einmal (zu einem kleinen Teil - der nicht runde Teil der "Randgrafiken") angezeigt. Da ich die Seite so gestalten will, dass die gängigsten Browser (ohne dass ich bewerten will/kann welcher Browser der "bessere" ist) sie ordentlich anzeigen, wäre es natürlich schön, wenn auch IE-Nutzer die Seite so sehen, wie ich es gewollt habe. Das ist natürlich nur die optische Seite des Problems. Weiterhin blendet der IE8 die aufklappenden Untermenüs nicht auf. Das habe ich vorerst mit einer Notlösung geregelt. Die Links zu den Untermenüs stehen jeweils auf den "Hauptseiten" welche über die erste Hirarchie auch im IE erreichbar sind. Das geht so, ist aber auch nicht die "schönste" Lösung.
Der Firefox 3.5.5 und auch Opera 9.6 zeigen das Menü völlig korrekt (mit aller Funktionalität) an.
Es wäre schön, wenn mir jemand helfen und erklären kann, was ich in der css-Datei ändern muss, damit die 2 oben beschriebenen Probleme für den IE beseitigt werden können. Dafür danke ich auch schonmal im Voraus!
Gruß
Micha
PS: hier die css-Datei:
- Code: Alles auswählen
@charset "utf-8";
/* CSS Document */
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(images/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
