Navi verschiebt Bilder bei hover-Efekt

[mote]

Hallo, ich habe auf meiner Seite test
das Problem das meine Main-Navi (links) die Bilder unter sich verschiebt.
Das passiert allerdings nur im IE!

Könnt ihr mir sagen was ich da falsch mache?

HTML, mal den ganzen div

   <div id="left">
   
<img src="img/flugelhorn.jpg" alt="top_bild" class="top" /> 
 <ul>
<li><a href="#">AKTUELLES</a></li>
<li><a href="#">ÜBER UNS</a></li>
<li><a href="#">UNSER NAME</a></li>
<li><a href="#">TERMINE</a></li>
<li><a href="#">BESETZUNG</a></li>
</ul>

<img src="http://www.html.de/images/1.jpg" alt="wir" class="bild_oben" />
<img src="http://www.html.de/images/2.jpg" alt="wir" class="bild_unten" />
</div>

Und jetzt der CSS Teil

#left {
background: #FFFFFF;
margin-top: 4px;
width:150px;
height:570px;
float:left;
display:inline;
text-align:left;
  }

 #left ul {list-style:none; width:150px; margin-top:10px;}
       #left li {list-style:none; margin:0px; padding-left:0; border-style:solid; border-width:1px 1px 1px 1px; border-color:#DCE0E4;FONT:1.1em Georgia, "Times New Roman", arial, sans-serif; line-height:1.65em; }

#left a {
    color:#314B61;
    font-weight:bold;
    margin-top:1px;
    margin-bottom:1px;
    margin-left:0px;
    margin-right:0;
    padding-left:20px;
    padding-top:2px;
    padding-bottom:8px;
    padding-right:0;
    display:block;
    text-decoration:none;
    background-repeat:no-repeat;
    background-position:18px 50%;
    width:129px;
}

#left a:hover {
    background-color:#DCE0E4;
    color:#3CA7E6;
    font-weight:bold;
}

danke jetzt schon. mfg Matthias M.

 

[prm]

Ich kann es mir momentan nicht in den unterschiedlichen Browsern ansehen.
Möglicherweise ist das eine Lösung: Lücke am unteren Bildrand

 

[neuroleptika]

Hab ich beim ersten Seitenaufruf auch gedacht.
Die <img> sind aber unter der Navigation. Die Navigation selber enthält kein <img>.

Es wird mit line-height zusammenhängen:

list-style:none;
margin:0px;
padding-left:0;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#DCE0E4;[COLOR=Red]FONT:1.1em[/COLOR] Georgia, "Times New Roman", arial, sans-serif;
line-height:[COLOR=Red]1.65em[/COLOR];

line-height (rot) wurde zweimal angegeben.

 

[prm]

Weitere Möglichkeit:

#left a:hover {
background-color:#DCE0E4;
color:#3CA7E6;
font-weight:bold;
}

Definiere für #left a mal noch einen height-Wert.

 

[neuroleptika]

Am besten auf line-height innerhalb von <ul> ganz verzichten.
Es sei denn es ist mit mehrzeiligen Linktexten zu rechnen.
Vertikale Abstände bekommst du mit padding-top und padding-bottom zuverlässiger hin.

 

[mote]

danke fpr die Antworten. Werd mir das gleich ansehen..
lg Matthias M.


Edit::(// hab jetzt alles versucht was ihr sagtet aber es ist noch immer so :(

 

[prm]

Es wäre hilfreich, wenn du die Seite mal hochladen und einen Link posten könntest. Da kann man sich das im Gesamtzusammenhang ansehen und findet möglicherweise eine Fehlerursache, die man so nicht erkennt.

 

[mote]

Hallo, ich habe auf meiner Seite test
das Problem das meine Main-Navi (links) die Bilder unter sich verschiebt.
Das passiert allerdings nur im IE!

Wie im ersten Beitrag beschrieben, unter den Link test ;)

mfg

 

[neuroleptika]

haslayout

Ich sehe eine kleine Verschiebung beim hovern im IE6. Im IE7 erkenne ich keine Fehldarstellung.

* html #left li {
height: 1%;
}

Das sollte reichen.
Der IE braucht manchmal einen Wert um die restlichen Eigenschaften richtig darzustellen.
Das nennt man haslayout.
Es gibt noch andere Werte mit denen man dem IE layout geben kann.
Kannst ja mal nach googeln.
height: 1%; stört nicht weiter weil es der IE6 als min-height interpretiert.
Andere Browser ignorieren die Selektorenfolge aus * und html.

 

[mote]

Hey danke super es funktioniert...
Hab zwar ein buch mi bugs beim IE aber nichts brauchbares gefunden ^^ Muss mal wieder brav lernen.

mfg