✔ Navi im IE6 fehlerhaft

[Denniz]

Hallo Leute,

ich habe ein vertikale Navigation erstellt welche im FF richtig dargestellt wird.
Der erste Link soll 20px über dem zweiten Link liegen.

Im IE6 klappt sich die Navigation aber wieder zu sobald ich über die Navigationleiste gehe, warum?

<ul id="subnavi">
  <li class="first"><a href="#" class="active">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

* { 
   margin:0; 
   padding:0; 
}

html,body { 
   width:100%; 
   height:100%; 
   color:#5d5d5d; 
}
ul#subnavi { 
   background:#e6eaee; 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 10px; 
   padding: 30px 0px; 
}

ul#subnavi li { 
   display: inline; 
   line-height:15px; 
}

ul#subnavi li.first a { 
   margin-bottom:20px; 
}

ul#subnavi li a { 
   display:block; 
   margin-left:25px; 
}

ul#subnavi li a.active { 
   background:url(_img/bg_sub.gif)  no-repeat; 
   width:203px; 
   background-position:0px; 
   padding:0 0 0 14px; 
   margin-left:11px; 
}

ul#subnavi a:link, ul#subnavi a:visited { 
   color:#5d5d5d; 
   text-decoration: none; 
   outline:none; 
}

ul#subnavi a:hover, ul#subnavi a:active { 
   background:url(_img/bg_sub.gif)  no-repeat; 
   width:203px; 
   background-position:0px; 
   padding:0 0 0 14px; 
   margin-left:11px; 
}

Ich habe es hier hochgeladen, was mache ich falsch dabei?

Gruß

 

[Maik]

Hi,

versuch es mal "anders herum"

ul#subnavi li.second a {
   margin-top:20px;
}

<ul id="subnavi">
  <li><a href="#" class="active">Link1</a></li>
  <li class="second"><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

Die beiden Regelblöcke:

ul#subnavi li a.active { 
   background:url(_img/bg_sub.gif)  no-repeat; 
   width:203px; 
   background-position:0px; 
   padding:0 0 0 14px; 
   margin-left:11px; 
}

ul#subnavi a:hover, ul#subnavi a:active { 
   background:url(_img/bg_sub.gif)  no-repeat; 
   width:203px; 
   background-position:0px; 
   padding:0 0 0 14px; 
   margin-left:11px; 
}

lassen sich auch ganz bequem zusammenfassen:

 ul#subnavi a:hover, ul#subnavi a:active, ul#subnavi li a.active { 
   background:url(_img/bg_sub.gif)  no-repeat 0 0; 
   width:203px; 
   padding:0 0 0 14px; 
   margin-left:11px; 
}

 

[Denniz]

Hi,

das ist doch absolut unlogisch das dies hier geht:

ul#subnavi li.second a {
   margin-top:20px;
}

und dieses hier nicht:

ul#subnavi li.first a { 
   margin-bottom:20px; 
}

Typisch IE.

Na gut, solls dann halt so sein, aber jetzt hab ich wieder ein Typoscript problem mit der ich diese HTML Ausgabe programmieren muß.
Und zwar wird dort eine Navigation in drei blöcke eingeteilt: das erste li, die mittleren li, und das letzte li.
Wenn ich in dem zweiten li ein klasse "second" einfüge hab ich diese auch im dritten li stehen , da das zweite und dritte li den mittleren block bilden.

TYPO3 Html ausgabe:

<ul id="subnavi">
  <li><a href="#" class="active">Link1</a></li>
  <li class="second"><a href="#">Link2</a></li>
  <li class="second"><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

Dies würde ja dann wieder mit der css nicht klappen.

Wäre es irgendwie möglich das man die CSS auf meiner HTML Struktur aufbauen kann so das es auch im IE6 funktioniert?

 

[Maik]

Meinst du vielleicht so?

<ul id="subnavi">
  <li><a href="#" class="active">Link1</a></li>
  <li class="second"><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li class="second"><a href="#">Link4</a></li>
</ul>

 

[Denniz]

Meinst du vielleicht so?

<ul id="subnavi">
  <li><a href="#" class="active">Link1</a></li>
  <li class="second"><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li class="second"><a href="#">Link4</a></li>
</ul>

Nein,

ich habe es zum besseren verständnis einmal skizziert wie sich eine navi in typo3 aufbaut. -link-

Das zweite und dritte li gehören zum mittleren block und die würden somit die klasse "second" haben, was ja falsch wäre da nur der zweite block die klasse haben soll.

Also müßte ich auf dieser HTML meine CSS aufbauen:

<ul id="subnavi">
  <li class="first"><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

 

[Maik]

Tut mir leid, aber ich kann dir nicht folgen, was an meinem Vorschlag nicht passt, (ausschliesslich) den zweiten Listenpunkt mit der Klasse .second auszuzeichnen, wenn der zweite und dritte Listenpunkt den "mittleren Block" bilden sollen.

 

[Denniz]

(ausschliesslich) den zweiten Listenpunkt mit der Klasse .second auszuzeichnen, wenn der zweite und dritte Listenpunkt den "mittleren Block" bilden sollen.

Genau, das ist das Problem, man kann den zweiten listenpunkt nicht vom dritten trennen da diese beiden li's zusammengehören (mittlere Block) und die gleichen klassen in den li's haben würden. Die Ausgabe wäre somit diese hier:

<ul id="subnavi">
  <li><a href="#">Link1</a></li>
  <li class="second"><a href="#">Link2</a></li>
  <li class="second"><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

Meine frage ist jetzt, -gibt es eine möglichkeit die CSS auf meiner vorherigen Struktur aufzubauen so das es auch im IE6 funktioniert:

<ul id="subnavi">
  <li class="first"><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

 

[Maik]

Dann müssen wir eben etwas tiefer in die Trickkiste greifen ;-)

<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dau &amp; König</title>
<style type="text/css">
* {
   margin:0;
   padding:0;
}

html,body {
   width:100%;
   height:100%;
   color:#5d5d5d;
}

div#subnavi {
   background:#e6eaee;
}

div#subnavi ul {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   padding: 30px 0px;
   width:217px;
}

div#subnavi ul li {
   display: inline;
   line-height:15px;
}

div#subnavi ul li.first a {
   margin-bottom:20px;
}

div#subnavi ul li a {
   display:block;
   margin-left:25px;
   width:203px;
   padding:0 0 0 14px;
}

div#subnavi ul a:link, div#subnavi ul a:visited {
   color:#5d5d5d;
   text-decoration: none;
   outline:none;
}

div#subnavi ul a:hover, div#subnavi ul a:active, div#subnavi ul li a.active {
   background:url(_img/bg_sub.gif)  no-repeat 0 0;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div#subnavi ul li {
   float:left;
}
</style>
<![endif]-->
</head>
<body>
<!-- ###SUBNAVI### start -->
<div id="subnavi">
     <ul>
         <li class="first"><a href="#" class="active">Link1</a></li>
         <li><a href="#">Link2</a></li>
         <li><a href="#">Link3</a></li>
         <li><a href="#">Link4</a></li>
     </ul>
</div>
<!-- ###SUBNAVI### ende -->
</body>
</html>

 

[Denniz]

Ich hab es in mein Typo3 template eingebaut und dort sieht es jetzt im IE6 super aus.

Vielen Dank.

 

[Maik]

Gern geschehen

Was man mit "etwas Abstand" und anschliessendem vollen Magen doch so alles bewerkstelligen kann.