[gelöst] CSS/JS Hover Problem bei IE7

[phobia]

Hallo,

ich habe das Problem dass IE7 nur in bestimmten Bereichen meiner Navilinks den css hover sowie den js onmouseover auslöst.
Der Hover scheint nur im bereich des bildes und auf den obersten pixeln des ganzen rechtecks auszulösen.

IE8 und FF funktionieren einwandfrei.

Habe hier http://1ngo.de/web/IE7-link_area.html etwas gefunden dass der IE7 bei relativer positionierung einen Bug mit der Linkarea hat.
Allerdings haben mich die dort gemachten Angaben mit breite/höhe in em auch nicht weiter gebracht.

Hoffe mir kann Jemand weiter helfen.
Grüße


Die Links:

<a href="#" id="navi1" class="navi" onmouseover="reorder('1');" onclick="setCurrent(1);">
    <img src="./img/historie100.jpg" class="navi">
    <div class="navi"><span class="title">Home</span><br>Text Text Text Text<br>Text Text Text Text</div>
  </a>
  <a href="#" id="navi2" class="navi" onmouseover="reorder('2');" onclick="setCurrent(2);">
    <img src="./img/historie100.jpg" class="navi">
    <div class="navi"><span class="title">Unternehmen</span><br>Text Text Text Text<br>Text Text Text Text</div>
  </a>  
  <a href="#" id="navi3" class="navi" onmouseover="reorder('3');" onclick="setCurrent(3);" style="position:relative; left:-160px;">
    <img src="./img/produkte100.jpg" class="navi">
    <div class="navi"><span class="title">Produkte</span><br>Text Text Text Text<br>Text Text Text Text</div>
  </a>
...

Zugehörige CSS:

a.navi{
position:relative;
width:270px;
height:80px; 
color:#fff; 
padding:5px; 
display:block;
float:left;
background: #124592;
z-index:10;

}

a.navi:hover{
position:relative;
width:270px;
height:80px; 
color:#fff; 
padding:5px; 
display:block;
float:left;
background: #2356a3;

}

img.navi{
width:100px;
border: 0px;
float:left;
}
div.navi{
padding-left:15px;
float:left;
text-decoration:none;
font-weight:normal;
font-size:10px;
}
.title{
font-weight:bold;
font-size:14px;
}

[AmicaNoctis]

Hallo,

wenn man dem Browser ungültiges HTML vorsetzt, kann es schon mal passieren, dass das Ergebnis nicht so aussieht, wie man sich erhofft hatte. Am besten du gehst mal auf The W3C Markup Validation Service und lädst deine Seite hoch oder kopierst den Quelltext rein und behebst dann alle gefundenen Fehler.

Gruß,

Amica

[Kropff]

Hmm. Ich kann das Problem so nicht nachvollziehen. Hast du ein Online-Beispiel verfügbar?. Oder ein klein wenig mehr Code? Inkl. JavaScript.

Peter

[phobia]

@ AmicaNoctis:

hab nun alle bis auf diesen Fehler behoben:

document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<div class="navi"><span class="title">Home</span><br />Text Text Text Text<b

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Man darf wohl kein <div> innerhalb eines <a> verwenden? (siehe meine Links oben)
Wie mache ich dann am besten einen Link bei dem auf der linken seite ein Bild ist und rechts mehrzeiliger Text dazu?

@Kropff:
Moment muss es mal online stellen dann poste ich einen Link

[AmicaNoctis]

Man darf wohl kein <div> innerhalb eines <a> verwenden?

Nein, darf man nicht. Links (a-Elemente) sind Inline-Elemente und div ist ein Block-Element. Blockelemente dürfen in der Regel andere Blockelemente und/oder Inline-Elemente enthalten. Inline-Elemente dagegen dürfen nur Inline-Elemente enthalten. Das ist natürlich nur eine Faustregel. Wie Elemente verschachtelt werden dürfen, ist im Einzelnen sehr unterschiedlich, aber in jedem Falle durch die Spezifikation genau festgelegt.

Wie mache ich dann am besten einen Link bei dem auf der linken seite ein Bild ist und rechts mehrzeiliger Text dazu?

Das Bild setzt du auf float: left und das sollte* es schon gewesen sein.

___
* hängt natürlich stark davon ab, was du sonst so machst, daher wäre ein Onlinebeispiel wirklich nicht schlecht.

[phobia]

Ok habe nen validen Code

This document was successfully checked as XHTML 1.0 Transitional!

Links sehen nun so aus:

 <a href="#" id="navi1" class="navi" onmouseover="reorder('1');" onclick="setCurrent(1);">
    <img src="./img/historie100.jpg" class="navi" alt="" />
    <span class="title">Home</span><br /><span class="navi">Text Text Text Text<br />Text Text Text Text</span>
  </a>

Die Seite gibts hier Test
Mit IE8 bzw FF sieht man wie es funktionieren sollte sobald man über die Navi geht - IE7 tut aber immer noch nicht.

[AmicaNoctis]

Hast du mal versucht, die Seite im IE8 zu debuggen, wenn er im IE7-Modus läuft?

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Ich vermute, es liegt gar nicht am CSS-, sondern am JavaScript-Code. Aber wie gesagt, das ist nur geraten.

[phobia]

Nein noch nicht, habe ich noch gar nicht dran gedacht - versuche ich dann jetzt mal.

Aber wenn es am js läge müsste dann nicht der normale a:hover effekt aus dem css angezeigt werden und nur das mouseover nicht funktionieren?

[Kropff]

Nein noch nicht, habe ich noch gar nicht dran gedacht - versuche ich dann jetzt mal.

Aber wenn es am js läge müsste dann nicht der normale a:hover effekt aus dem css angezeigt werden und nur das mouseover nicht funktionieren?

Nicht unbedingt, das hängt von der Aktion ab. Außerdem wird kein Fehler ausgeworfen. ich vermute, das Problem könnte darin liegen, dass die ersten beiden Elemente kein position haben.

Peter

[phobia]

Also hab nun den IE8 Debugger laufen lassen im IE7 mode - kommen keinerlei Fehlermeldungen.

@Kropff: hab eben mal den ersten beiden Elementen auch nen position:relative; left:0px; gegeben aber das ändert nichts.
(das position:relative hatten sie eigentlich eh schon alle von der css)

[AmicaNoctis]

Also hab nun den IE8 Debugger laufen lassen im IE7 mode - kommen keinerlei Fehlermeldungen.

Das ist ja schonmal gut, aber hast du auch mal Breakpoints gesetzt, um zu sehen, ob die Events so feuern wie sie sollen?

[Kropff]

Ich weiß nicht, ob es von Belang ist, aber beim IE7 tauchen immer wieder Buchstaben auf, in einer Art Fade-Effekt. Und die scheinen über den betroffenen Link-Elementen zu liegen. W, T, G und ich glaube auch ein K.

Peter

[phobia]

Oh mann das ist es! Die Buchstaben sind absolut positioniert und sollten nach z-index eigentlich hinter der Navi liegen, aber der IE7 scheint hier irgendwas nicht richtig zu interpretieren, sieht man auch daran dass das fast transparente W hier über der navi sichtbar ist.

Sobald ich die Buchstabenbilder auskommentiere läuft alles.

Großes DANKE

Jetzt mal schauen wie oder ob ich die Buchstaben wirklich hinter die Navi bekomme ohne dass deren Hover dadurch gestört wird...