✔ CSS-Mouseover-Menü mit Grafiken aber Problem mit IE und Opera!

[babone]

Hi,
ich habe wieder mal ein Problem...denn ich wollte einen CSS-Mouseover-Menü mit Grafiken ohne javascript. Bin auch fündig geworden aber leider klappt es nur bei firefox. Bei IE funktioniert es auf den lokalen Rechner aber sobald ich es hochlade wird nichts mehr angzeigt. Und Opera streikt auch!
Ich bin mir sicher das ich wieder mal ein Fehler gemacht habe.
Ich hoffe das Ihr helfen könnt. Vielen Dank in Voraus

In Aktion: http://stixsteps.de/index.html

<div id="page">
	  <div id="main_menü">
	  <div  id="menü_1">
	  	<ul class="menu_oben">
    <li><a href="#" id="home"></a></li>
    <li><a href="#" id="bio"></a></li>
    <li><a href="#" id="inter"></a></li>
</ul>
		</div>
	  <div id="menü_2">
	  <ul class="menu_oben">
    <li><a href="#" id="stix"></a></li>
    <li><a href="#" id="refer"></a></li>
    <li><a href="#" id="dates"></a></li>
</ul>

	</div>
	  <div id="menü_3">
	  <ul class="menu_oben">
    <li><a href="#" id="multi"></a></li>
    <li><a href="#" id="review"></a></li>
    <li><a href="#" id="cont"></a></li>

</ul>

	  </div>
	  </div>		
</div>

#main_menü {
	padding: 15px 0px 45px 30px;
}

#menü_1{
	border: 0px;
	clear:left;
}
#menü_2{
	border: 0px;
	clear:left;
}
#menü_3{
	border: 0px;
	clear:left;
}
.menu_oben {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu_oben li {
	padding: 4px 6px 0px 0px;
	float: left;
	width: 169px;
	height: 33px;
}
.menu_oben li a{
	display:block;
}
#home {
	background-image: url(images/menü_roll_Form-19-Kopie-5.gif);
	width: 169px;
	height: 33px;
}

#home:hover, #home:active, #home:focus, #home_active {
	background-image: url(images/menü_act_Form-19-Kopie-5.gif);
	width: 169px;
	height: 33px;
}
#bio  {
	background-image: url(images/menü_roll_Form-19-Kopie-8.gif);
	width: 169px;
	height: 33px;
}

#bio:hover, #bio:active, #bio:focus, #bio_active {
	background-image: url(images/menü_act_Form-19-Kopie-8.gif);
	width: 169px;
	height: 33px;
}
#inter  {
	background-image: url(images/menü_roll_Form-19-Kopie-12.gif);
	width: 169px;
	height: 33px;
}

#inter:hover, #inter:active, #inter:focus, #inter_active {
	background-image: url(images/menü_act_Form-19-Kopie-12.gif);
	width: 169px;
	height: 33px;
}
#stix  {
	background-image: url(images/menü_roll_Form-19-Kopie-7.gif);
	width: 169px;
	height: 33px;
}

#stix:hover, #stix:active, #stix:focus, #stix_active {
	background-image: url(images/menü_act_Form-19-Kopie-7.gif);
	width: 169px;
	height: 33px;
}
#refer  {
	background-image: url(images/menü_roll_Form-19-Kopie-10.gif);
	width: 169px;
	height: 33px;
}

#refer:hover, #refer:active, #refer:focus, #refer_active {
	background-image: url(images/menü_act_Form-19-Kopie-10.gif);
	width: 169px;
	height: 33px;
}
#dates  {
	background-image: url(images/menü_roll_Form-19-Kopie-13.gif);
	width: 169px;
	height: 33px;
}

#dates:hover, #dates:active, #dates:focus, #dates_active {
	background-image: url(images/menü_act_Form-19-Kopie-13.gif);
	width: 169px;
	height: 33px;
}
#multi  {
	background-image: url(images/menü_roll_Form-19-Kopie-6.gif);
	width: 169px;
	height: 33px;
}

#multi:hover, #multi:active, #multi:focus, #multi_active {
	background-image: url(images/menü_act_Form-19-Kopie-6.gif);
	width: 169px;
	height: 33px;
}
#review  {
	background-image: url(images/menü_roll_Form-19-Kopie-11.gif);
	width: 169px;
	height: 33px;
}

#review:hover, #review:active, #review:focus, #review_active {
	background-image: url(images/menü_act_Form-19-Kopie-11.gif);
	width: 169px;
	height: 33px;
}
#cont  {
	background-image: url(images/menü_roll_Form-19-Kopie-14.gif);
	width: 169px;
	height: 33px;
}

#cont:hover, #cont:active, #cont:focus, #cont_active {
	background-image: url(images/menü_act_Form-19-Kopie-14.gif);
	width: 169px;
	height: 33px;
}

 

[Maik]

• Vielleicht liegt es am fehlenden a-Element in den jeweiligen ID-Selektoren:
  

a#home {    
background-image: url(images/menü_roll_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
} 

a#home:hover, a#home:active, a#home:focus, a#home_active {    
background-image: url(images/menü_act_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
}

/* usw. */

• oder an den fehlenden Pseudoklassen :link und :visited:
  

a#home:link, a#home:visited {    
background-image: url(images/menü_roll_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
} 

a#home:hover, a#home:active, a#home:focus, a#home_active {    
background-image: url(images/menü_act_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
}

/* usw. */

• oder am Datei-Namen der Grafiken, in dem das ü durch %FC ersetzt wurde:
  

men%FC_roll_Form-19-Kopie-11.gif

 

[Maik]

Wie ich gerade sehe, funktioniert das CSS-Menü mittlerweile auch im IE und Opera

 

[babone]

Hallo,
danke vielmals. Es war glaube ich die Dateinamen. Aber ich habe mit Opera immer noch ein Problem. Wenn ich die mouse über die Buttons führe kommt bei manchen das hintergrundbild nicht(z.B. home) und bei manchen schon. Hm...
Das CSS habe ich wie folgt geändert.

Grüsse

Babone

#main_menü {
	padding: 15px 0px 45px 30px;
}

#menü_1{
	border: 0px;
	clear:left;
}
#menü_2{
	border: 0px;
	clear:left;
}
#menü_3{
	border: 0px;
	clear:left;
}
.menu_oben {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu_oben li {
	padding: 4px 6px 0px 0px;
	float: left;
	width: 169px;
	height: 33px;
}
.menu_oben li a{
	display:block;
	width: 169px;
	height: 33px;
}
a#home:link, a#home:visited {
	background-image: url(images/menu_roll5.gif);
	width: 169px;
	height: 33px;
}

a#home:hover, a#home:active, a#home:focus, a#home_active {
	background-image: url(images/menu_act5.gif);
	width: 169px;
	height: 33px;
}
a#bio:link, a#bio:visited {
	background-image: url(images/menu_roll8.gif);
	width: 169px;
	height: 33px;
}

a#bio:hover, a#bio:active, a#bio:focus, a#bio_active {
	background-image: url(images/menu_act8.gif);
	width: 169px;
	height: 33px;
}
a#inter:link, a#inter:visited  {
	background-image: url(images/menu_roll12.gif);
	width: 169px;
	height: 33px;
}

a#inter:hover, a#inter:active, a#inter:focus, a#inter_active {
	background-image: url(images/menu_act12.gif);
	width: 169px;
	height: 33px;
}
a#stix:link, a#stix:visited {
	background-image: url(images/menu_roll7.gif);
	width: 169px;
	height: 33px;
}

a#stix:hover, a#stix:active, a#stix:focus, a#stix_active {
	background-image: url(images/menu_act7.gif);
	width: 169px;
	height: 33px;
}
a#refer:link, a#refer:visited {
	background-image: url(images/menu_roll10.gif);
	width: 169px;
	height: 33px;
}

a#refer:hover, a#refer:active, a#refer:focus, a#refer_active {
	background-image: url(images/menu_act10.gif);
	width: 169px;
	height: 33px;
}
a#dates:link, a#dates:visited {
	background-image: url(images/menu_roll13.gif);
	width: 169px;
	height: 33px;
}

a#dates:hover, a#dates:active, a#dates:focus, a#dates_active {
	background-image: url(images/menu_act13.gif);
	width: 169px;
	height: 33px;
}
a#multi:link, a#multi:visited {
	background-image: url(images/menu_roll6.gif);
	width: 169px;
	height: 33px;
}

a#multi:hover, a#multi:active, a#multi:focus, a#multi_active {
	background-image: url(images/menu_act6.gif);
	width: 169px;
	height: 33px;
}
a#review:link, a#review:visited {
	background-image: url(images/menu_roll11.gif);
	width: 169px;
	height: 33px;
}

a#review:hover, a#review:active, a#review:focus, a#review_active {
	background-image: url(images/menu_act11.gif);
	width: 169px;
	height: 33px;
}
a#cont:link, a#cont:visited {
	background-image: url(images/menu_roll14.gif);
	width: 169px;
	height: 33px;
}

a#cont:hover, a#cont:active, a#cont:focus, a#cont_active {
	background-image: url(images/menu_act14.gif);
	width: 169px;
	height: 33px;
}

 

[Maik]

Das liegt wohl daran, daß sich beim ersten Seitenbesuch die :hover-Grafiken noch nicht im Browsercache befinden.

 

[babone]

Ja aber es lag auch irgendwie daran das Opera auf mit manchen Dateinamen nicht umgehen konnte. Statt menu_act5 hat menuact5 gereicht keine Ahnung.
Cool Danke Dir nochmals.

PS : Muss ich eigentlich bei jedem einzelnen Link breite und höhe angeben.
Reicht auch wenn ich den Li anspreche. Normalerweise wird es ja vererbt oder nicht?
So zum Beispiel

.menu_oben li a{
	display:block;
	width: 169px;
	height: 33px;

Grüsse

Babone

 

[Maik]

Das wollte ich auch vorschlagen, um den CSS-Code schlanker zu machen

 

[babone]

Cool Danke.

Schönes Wochenende noch!