✔ display: block bzw visibility: visible;

[crashx]

Hallo erst mal

Ich habe wieder ein "kleines" Problem.
Ich habe einen Button, der sich bei Hover ändert, das ist kein Problem.
Doch nun will ich oben links im Bildschirm ein weiteres Bild anzeigen lassen, auch kein Problem
Nun zum Problem:
Im IE 7, Firefox, Netscape, Mozilla, Flock ist die darstellung einwandfrei!
im IE 6. 5.5, 5.01 hat es kein Effekt. Wieso es nicht geht, weiss ich auch nicht.
Ist das ein generelles IE Problem?
Weder mit display noch mit visibility ist ein effekt zu erzielen

CSS:

#nav_1_shop {
	margin: 0 auto;
	width: 176px;
	height: 36px;
	background-image: url(../images/nav/1a.jpg);
	background-repeat: no-repeat;
	float: left;
}
				
#nav_1_shop:hover {
	background-image: url(../images/nav/1b.jpg);
}

#nav_1_shop div {
	visibility: hidden;
}

#nav_1_shop:hover div {
	visibility: visible;
	width: 172px;
	height: 122px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(../images/top/startseite.jpg);
}

HTML:

<div id="nav_1_shop">
  <a href="index.php" id="nav_1_shop">
    <div></div>
  </a>
</div>

Danke für eure Antwort, Beitrag oder Lösungsvorschlag.

 

[Sven Mintel]

Der IE interpretiert die Pseudo-Klasse :hover bis V6 nur bei Links.

 

[crashx]

Hmmm also kann man das mit CSS im IE 6 - nicht Lösen?
Muss man da auf Javascript zurückgreifen?

 

[Maik]

Hi,

in deinem HTML-Code sind zudem zwei syntaktische Fehler enthalten:

1. Eine ID muß in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden.
   
2. Inline-Elemente (a) dürfen keine Block-Elemente (div) enthalten.

Vielleicht hilft dir dieser Vorschlag weiter?

a#nav_1_shop_lnk {
        margin: 0 auto;
        width: 176px;
        height: 36px;
        background-image: url(../images/nav/1a.jpg);
        background-repeat: no-repeat;
        float: left;
}

a#nav_1_shop_lnk:hover {
        background-image: url(../images/nav/1b.jpg);
        border: none;
}

a#nav_1_shop_lnk span {
        visibility: hidden;
}

a#nav_1_shop_lnk:hover span {
        visibility: visible;
        display: block;
        width: 172px;
        height: 122px;
        position: absolute;
        top: 0px;
        left: 0px;
        background: url(../images/top/startseite.jpg);
}

<div id="nav_1_shop">
     <a href="index.php" id="nav_1_shop_lnk"><span></span></a>
</div>

 

[crashx]

@michaelsinterface
sehe ich das richtig, dass mir nur eine Javascript lösung helfen wird?

 

[Maik]

Wieso? Der von mir gezeigte Vorschlag funktioniert doch auch im IE6.

 

[crashx]

@michaelsinterface
Au ja das geht, habe da nur einen kleinen Fehler gemacht.