Frage stellen
wieder ich, gleiche Seite, anderes Problem. Meine auf Listen basierende Navigation wird im Firefox korrekt, im IE falsch dargestellt, Hintergrund und Mouseover-Farben werden nicht oder falsch "vererbt".
Hatte schon probiert in den Untermenü-Punkten, die über eine Zeile hinaus gehen <br> zu setzen, das hat aber nix genutzt...
Und warum Überschrift und der erste Satz bis zum Wort "hier" ein Link ist, verstehe ich überhaupt nicht, weder Quelltext noch Dreamweaver geben mir nen Hinweis...
Url der Test-Seite:
http://www.instructor-zone.de/TEST/downloads.html
Die CSS:
- Code: Alles auswählen
body {
background-color: #333366;
background-image: none;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
padding: 5px;
margin: 0;
list-style-type: disc;
}
h1{
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
color:#FFFFFF
}
h2{
padding: 0;
margin: 0;
margin-bottom: 0.5em;
color:#FFFFFF
}
h3{
padding: 0;
margin: 0;
margin-bottom: 0.5em;
color:#FFFFFF
}
h4{
padding: 0;
margin: 0;
color:#FFFFFF
}
h5{
padding: 0;
margin: 0;
margin-bottom: 0.5em;
}
h6{
padding: 0;
margin: 0;
margin-bottom: 0.5em;
}
/*zentrierter Container, in dem sich alles befindet*/
#haupt_container {
width: 750px;
margin-right: auto;
margin-left: auto;
z-index: 3;
background-color: #000033;
}
/*Container für die Seitentitel / Logo*/
#titel_container {
width: 750px;
height: 110px;
color: #ff9900;
text-align: center;
font-weight: normal;
background-image: none;
background-color: #000033;
z-index: 2;
}
/*Listen-Navigation in einem Container und deren Eigenschaften, die an Unterpunkte weitergegeben werden*/
#nav_container {
top: auto;
width: 750px;
margin-top: 0px;
margin-bottom: 1em;
margin-right: 0px;
padding-bottom: 0px;
margin-left: -40px;
}
#navigation {
position: absolute;
z-index:100;
list-style-type: none;
width: 750px;
visibility: visible;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1em;
margin-left: 0px;
}
#navigation .hauptpunkt{
cursor: crosshair;
float: left;
margin: 0;
width: 142px;
list-style-type: none;
text-align: left;
background-image: none;
border: 2px black solid;
color: #000000;
background-color:#FFFFFF;
}
#navigation .hauptpunkt:hover{
color: #ffffff;
background-color: #000066;
}
#navigation li {
border: 1px solid black;
font-weight: bold;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
#navigation li ul{
list-style-type: none;
margin: 0;
padding: 0px;
background-color: #000099;
}
#navigation li li{
border: 1px solid black;
background-color:#0066CC;
}
#navigation li li a{
/*Vererbung der Link-Textfarbe*/
color: black;
text-decoration: none;
display: block;
}
#navigation li li a:hover{
color: #FF9900;
}
#navigation li li:hover{
color: #0066CC;
background-color: #0000FF;
}
/*Navigation-Ende*/
/*Eigenschaften für eventuelle Zusatz-Container rechts und links vom Inhalt
#links_container {
position: relative;
width: 30px;
top: 0px;
float: left;
font-weight: normal;
background-image: none;
background-color: #000033;
}
#rechts_container {
position: relative;
width: 30px;
top: 0px;
float: left;
font-weight: normal;
background-image: none;
background-color: #000033;
}*/
/*Container für den Seiteninhalt*/
#inhalts_container {
position: relative;
width: 650px;
left: 30px;
background-image: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
z-index: 3;
text-decoration: none;
background-color: #333333;
padding: 20px;
}
/*Link-Design für Inhalt-Container*/
.link_design01 a:link{
color: #cccccc;
text-decoration: underline;
}
.link_design01 a:visited{
color: #cccccc;
text-decoration: underline;
}
.link_design01 a:hover{
color: #FFFFFF;
background-color: #FF0000;
text-decoration: overline;
}
.link_design01 a:active{
color: #FF0000;
text-decoration: none;
}
/*Link-Design für Fuss-Container*/
.link_design02 a:link{
color: #ff9900;
text-decoration: none;
}
.link_design02 a:visited{
color: #ff9900;
text-decoration: none;
}
.link_design02 a:hover{
color: #FFFFFF;
text-decoration: none;
}
.link_design02 a:active{
color: #FF0000;
text-decoration: none;
}
/*dynamisch positionierter Container unter dem Inhalt durch float left und maximale Breite*/
#fuss_container {
position: relative;
width: 750px;
height: 80px;
font-weight: normal;
background-image: none;
background-color: #000033;
}
Wie mir bereits empfohlen wurde, ist eine Weiche zur Positionierung eingebaut:
- Code: Alles auswählen
<if>
<style>
#nav_container {
margin-left: 0px;}
</style>
<endif>
Vielen Dank schonmal fürs gucken und Gruss aus Berlin,
Gunnar
