ich bin gerade dabei eine Website zu bauen und tue dies zum ersten Mal komplett mit CSS (fürs Layout). Unter anderem verwende ich die vpNavigation. Im Internet Explorer 6 funktioniert diese leider nicht so wie im Mozilla oder im Opera.
Meine Seite findet ihr unter folgendem Link:
http://www.soha-solutions.com/SOHA/SOHA_NEW
Wenn ich mit der Maus über den Menüpunkt "Referee [Questioncorner]" gehe, soll ein Untermenü erscheinen. Dieses erscheint auch. Im IE leider an einer ganz falschen Stelle. In anderen Browsern, steht das Untermenü genau unter dem Oberpunkt. Was kann ich hier tun?
Was in allen Browsern leider nicht funktioniert, ist dass wenn ich mit der Maus auf einen Untermenüpunkt gehe, Referee [Questioncorner] hervorgehoben bleibt.
Einen funktionierenden Effekt findet hier auf der Seite
http://spielwiese.contenido-tutorials.de/vpnavigation/. Hier ist das Verhalten bei vpGuestbook oder vpNavigation genau wie ich ihn auch haben möchte.
Das wäre zwei Punkte. Wer kennt sich denn gut mit CSS aus? Habe nämlich noch eine Frage zu CSS und IE, weil der da leider nicht das macht wie ich es will, im Gegensazu zu Mozilla oder Opera.
Hier meine CSS-Datei für das Menü:
Code: Alles auswählen
#vpnavigation, #vpnavigation ul { /* alle Listen */
position: relative;
float: none;
font-family: verdana, arial, helvetica, sans-serif; text-decoration: none;
font-size: 12px;
list-style: none;
margin:0;
padding:0;
padding-left:10px;
}
#vpnavigation li { /* alle Listenelemente */
float: left;
}
/* Liste 1.Ebene */
#vpnavigation a {
display: block;
padding: 2px 5px 2px 5px;
font-weight:bold;
color:#B02222;
text-decoration: none;
background-color:rgb(183,183,183);
}
/* Liste 2.Ebene */
#vpnavigation ul ul a { padding: 3px 15px 4px 3px; color: #BBBBBB; background-color: #990000; }
/* 1. Ebene Aktiv */
#vpnavigation a:hover {
color: #FFFFFF;
background-color:#B02222;
} /* 1.Ebene a:hover*/
li#active a {
color: #FFFFFF;
background-color:#B02222;
} /* 1.Ebene a:activ */
/* 2. Ebene Aktiv */
#vpnavigation li.activepath a { /* Link in 1. Ebene (mit weiteren Unterebenen) */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li.activepath li a { /* 2. Ebene */
color: #BBBBBB;
background-color: #990000;
}
#vpnavigation li.activepath li a:hover { /* 2. Ebene a:hover */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li.activepath li#active a { /* 2. Ebene a:activ */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li ul { /* Listen 2. Ebene */
position: absolute;
background: #990000;
display: block;
width: 160px;
padding: 0;
left: -999em; /* durch "left" außerhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */
}
#vpnavigation ul li ul li{ /* Listen 2. Ebene Textblock */
width: 160px;
}
#vpnavigation ul li ul li a{ /* Listen 2. Ebene Textblock */
padding-left:10px;
padding-right:10px;
}
#vpnavigation li li a.daddy { /* Listenelemente mit Unterpunkten */
/* background: url(../images/rightarrow.gif) center right no-repeat; */
}
#vpnavigation li ul ul { /* Listen 3. Ebene und weiter */
margin: -1em 0 0 10em;
}
#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
left: -999em;
}
#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Menüpunkte liegen */
left: auto;
margin-left: 0px;
padding-bottom: 0px;
margin-left: 5px;
}
#vpnavigation li#active { /* Listen zur aktuellen Kategorie */
font-style: normal!important;
/* background-color: #A00000; */
}
#vpnavigation li li#active { /* Listen zur aktuellen Kategorie */
/* background-color: #B02222; */
}
#vpnavigation li li:hover { /* Listen zur aktuellen Kategorie */
background-color: #B02222;
}
a.bottomnavi { color:rgb(160,160,160); font-size:9px; } Code: Alles auswählen
body {
background-color:#b7b7b7;
color:rgb(62,77,116);
padding:0;
margin:0;
text-align:left;
font-size:12px;
font-family:Arial,Helvetica,Sans-serif,sans-serif;
}
td {
color:rgb(62,77,116);
font-size:12px;
font-family:Arial,Helvetica,Sans-serif,sans-serif;
}
#header {
height:150px;
color:rgb(62,77,116);
background-image:url('../images/border.gif');
background-repeat:repeat-y;
background-position:0px 0px;
margin-left:auto;
margin-right:auto;
width:940px;
text-align:center;
margin-top:10px;
}
#headernavigation {
position:absolute;
top:30px;
left:870px;
width:200px;
height:18px;
text-align:right;
padding-right:3px;
background-color:#B02222;
color:#000000;
font-weight:bold;
text-align:center;
}
#headernavigation a {
padding-top:5px;
color:#FFFFFF;
}
#navigation {
height:18px;
color:rgb(62,77,116);
margin-left:auto;
margin-right:auto;
width:940px;
background-color:#b7b7b7;
text-align:left;
}
#contentframe {
color:rgb(62,77,116);
background-image:url('../images/border.gif');
background-repeat:repeat-y;
background-position:0px 0px;
margin-left:auto;
margin-right:auto;
width:940px;
text-align:left;
padding-bottom:10px;
height:530px;
}
html>body #contentframe {
height: auto;
min-height: 500px;
}
#contentvalue {
padding-top:15px;
margin-left:18px;
margin-right:18px;
color:rgb(62,77,116);
padding-bottom:15px;
}
#bottomnavi {
text-align:center;
color:rgb(160,160,160);
font-size:9px;
clear:both;
}
h1 {
padding-left:2px;
font-weight:bold;
font-size:14px;
color:#B02222;
margin:0;
}
h1.content {
margin-bottom:12px;
padding:0;
}
a {
font-size:12px;
color:#B02222;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
div,p { margin-top:0; }
a.sitemap_level1 {
display:block;
border-bottom:1px solid #b4a8b4;
color:#B02222;
font-weight:bold;
padding-bottom:.4em;
}
a.sitemap_level2 {
color:rgb(62,77,116);
display:block;
padding-left:.9em;
}
a.sitemap_level3 {
color:rgb(190,190,190);
}
.sitemap_level2_container {
float:left;
width:50%;
padding-top:.3em;
}
.sitemap_level3_container {
float:right;
width:50%;
padding-top:.3em;
}Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>.. :: SOHA Solutions - Alles rund um Soft- und Hardware :: ..</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/navi.css" rel="stylesheet" type="text/css">
<link href="css/werbung.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</script>
<![endif]-->
</head>
<body>
<center>
<div id="header">
<img src="images/logo.gif" />
<div id="headernavigation">
<container id="1" name="Hilfsnavigation" types="Navigation" mode="optional" default="">Hilfsnavigation</container>
</div>
</div>
<div id="navigation">
<div id="vpnavigation">
<container id="2" name="Hauptnavigation" types="Navigation" mode="optional" default="">Hauptnavigation</container>
</div>
</div>
<div id="contentframe">
<div id="contentvalue">
<container id="3" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
<container id="4" name="Text" types="Content" default="">Content 1</container>
</div>
<div id="werbung">
<br>Werbung: <br>
<a href="http://www.profiseller.de/shop1/mega/index.php3?ps_id=P17028071&shop=10&banner=1018" target="_blank"><img src="http://www.profiseller.de/banner/banner.php3?ps_id=P17028071&banner=1018" border="0" width="140" height="200"></a>
<br>
<br>
<a href="http://www.profiseller.de/shop1/mega/index.php3?ps_id=P17028071&shop=1&banner=1024" target="_blank"><img src="http://www.profiseller.de/banner/banner.php3?ps_id=P17028071&banner=1024" border="0" width="100" height="140"></a>
</div>
<div id="bottomnavi">
<container id="5" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
</div>
</div>
</center>
</body>
</html>P.S. Nicht wundern die Startseite soll so eigentlich nicht aussehen, der IE macht das nur leider draus
Code: Alles auswählen
Code: Alles auswählen