Rollover-effekt i både IE och FF

*suck*

Här har jag suttit och petat och bråkat en hel dag och lärt mig en massa nytt vad gäller CSS, sen provar jag det färdiga resultatet som ser bra ut i IE i FireFox och då syns INGENTING... :(

Kan någon tala om för mig vilken kod som FF inte gillar? Kanske till och med ge ett litet tips på hur jag får det att funka i BÅDA webbläsarna?

Vill alltså ha en slags meny med fem olika bilder som var och en får en annan bild när man för musen över dem. Ville helst lösa det utan javascript.

Min kod:

#startmeny {text-align: center;}
#startmeny ul {margin: 0;}
#startmeny li {margin: 0; display: inline; list-style-type: none;}
#startmeny li.startbild1 a
{
	height: 170px;
	width: 170px;
	background-image: url(bilder/startsida/bild1.jpg);
	background-repeat: repeat-x;
	background-position: 0 0;
}

#startmeny .startbild1 a:hover {background-image: url(bilder/startsida/bild1over.jpg);}

#startmeny li.startbild2 a
{
	height: 170px;
	width: 170px;
	background-image: url(bilder/startsida/bild2.jpg);
	background-repeat: repeat-x;
	background-position: 0 0;}

#startmeny .startbild2 a:hover {background-image: url(bilder/startsida/bild2over.jpg);}

#startmeny li.startbild3 a
{
	height: 170px;
	width: 170px;
	background-image: url(bilder/startsida/bild3.jpg);
	background-repeat: repeat-x;
	background-position: 0 0;}

#startmeny .startbild3 a:hover {background-image: url(bilder/startsida/bild3over.jpg);}

(etc för bild 4 och 5)

<div id="startmeny">
	<ul id="meny">
		<li class="startbild1"><a href="#"></a></li>
		<li class="startbild2"><a href="#"></a></li>
		<li class="startbild3"><a href="#"></a></li>
		<li class="startbild4"><a href="#"></a></li>
		<li class="startbild5"><a href="#"></a></li>
	</ul>
</div>

Jag är ju ingen stjärna på det här med CSS, så jag försöker lära mig bäst jag kan.

Tack på förhand! :)

Lite lättare att köra:

<div id="startmeny">
	<ul id="meny">
		<li class="startbild 1"><a href="#"></a></li>
		<li class="startbild 2"><a href="#"></a></li>
		<li class="startbild 3"><a href="#"></a></li>
		<li class="startbild 4"><a href="#"></a></li>
		<li class="startbild 5"><a href="#"></a></li>
	</ul>
</div>

#startmeny li.startbild a {
	height: 170px;
	width: 170px;
	background-repeat: repeat-x;
	background-position: 0 0;
}
#startmeny li.1 a {
	background-image: url(bilder/startsida/bild1.jpg);
}
#startmeny li.2 a {
	background-image: url(bilder/startsida/bild2.jpg);
}
#startmeny li.3 a {
	background-image: url(bilder/startsida/bild3.jpg);
}
#startmeny li.4 a {
	background-image: url(bilder/startsida/bild4.jpg);
}
#startmeny li.5 a {
	background-image: url(bilder/startsida/bild5.jpg);
}
#startmeny li.1 a:hover,
#startmeny li.2 a:hover,
#startmeny li.3 a:hover,
#startmeny li.4 a:hover,
#startmeny li.5 a:hover {
	background-position: 0 170px;
}

Sen låter du bild1.jpg, bild2.jpg osv innehålla både vanliga läget och hover läget. Alltså gör du din bild 170x340 stor och lägger vanliga läget överst och hover läget direkt under.

Felet på din meny kan jag inte se direkt för jag har inte testat mig fram, men testa lägga till display: block; till .startbild.

Hmm, ok, det ser ju onekligen enklare ut än min mastodontkod. :)

Kanske dock ska förtydliga hur jag vill att det ska se ut:
http://www.annability.se/test/test.asp

Tror du kan ha stor hjälp av att titta på koden till den här menyn... http://www.cssplay.co.uk/menus/flickerfree_mk3.html

Är det inte så att FF bla gillar bäst att man sätter min-height istället för height?

typ

#startmeny li.1 a:hover {
  min-height: 170px;
  background-color: #ffff00;
}

Så bäst är väl att ha en css för IE och en för moz och en tredje för opera :P
osv..

Tack för svaren! Ska kika och testa lite nu så får vi se var jag hamnar. :)

Hmm...

Tog "tantens" förslag och kopierade koden rakt av och ändrade bildstorleken till mina mått. Fungerar fin-fint i FF, men i IE blir det en kant längst ner. Jag lade till en svart ram på den första bilden för att illustrera var bilden slutar.

Fattar inte var jag ska ändra för att få bort den... :(

Bilderna är alltså 170 x 170 pixlar.

#menu {display:block; height:170px;}
#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li {float:left; margin: 0; display:block; width:170px; border:none;}
#menu li.list1 {background:transparent url(bilder/startsida/bild1.jpg);}
#menu li.list2 {background:transparent url(bilder/startsida/bild2.jpg);}
#menu li.list3 {background:transparent url(bilder/startsida/bild3.jpg);}
#menu li.list4 {background:transparent url(bilder/startsida/bild4.jpg);}
#menu li.list5 {background:transparent url(bilder/startsida/bild5.jpg);}
#menu a {display:block; width:170px; padding-top:170px; height:0; color:#000; text-decoration:none; overflow:hidden;}
* html #menu a:link, * html #menu a:visited {height:170px; he\ight:0;}

#menu a#item1 {background:transparent url(bilder/startsida/bild1over.jpg) -170px -170px no-repeat;}
#menu a#item2 {background:transparent url(bilder/startsida/bild2over.jpg) -170px -170px no-repeat;}
#menu a#item3 {background:transparent url(bilder/startsida/bild3over.jpg) -170px -170px no-repeat;}
#menu a#item4 {background:transparent url(bilder/startsida/bild4over.jpg) -170px -170px no-repeat;}
#menu a#item5 {background:transparent url(bilder/startsida/bild5over.jpg) -170px -170px no-repeat;}

#menu a#item1:hover {background-position:top right; z-index:50;}
#menu a#item2:hover {background-position:top right; z-index:50;}
#menu a#item3:hover {background-position:top right; z-index:50;}
#menu a#item4:hover {background-position:top right; z-index:50;}
#menu a#item5:hover {background-position:top right; z-index:50;}

* html #menu a:hover {height:170px; he\ight:0;}

<div id="menu">
<ul>
	<li class="list1"><a id="item1" href="#nogo" title="Item 1"></a></li>
	<li class="list2"><a id="item2" href="#nogo" title="Item 2"></a></li>
	<li class="list3"><a id="item3" href="#nogo" title="Item 3"></a></li>
	<li class="list4"><a id="item4" href="#nogo" title="Item 4"></a></li>
	<li class="list5"><a id="item5" href="#nogo" title="Item 5"></a></li>
</ul>
</div>

Exempel: http://www.annability.se/test/test2.htm

Det är förmodligen <td> som den ligger i som du ser i IE. Inte i FF
Så du ska nog sätta lite css-värden på tabellen också och "nolla" den.
Om du bara ska ha detta på sidan, ska du inte försöka ta bort tabellen då? ;)

Njae, jag ska ha en logotyp och lite annat på sidan också, men kanske jag kan göra mig av med tabellen ändå :)

Men då fortsätter jag klura lite då... Då är det inget fel på CSS-koden i alla fall. Jag återkommer när jag testat lite...

Hmm... Har provat att köra lite olika värden på tabellen, men samma resultat...
Provade att ta bort hela tabellen, men fortfarande samma resultat... :(
Det är säkert nåt litet busenkelt fel nånstans, men jag hittar det inte...

Ah nu ser jag... från Stu:s

#menu {display:block; height:110px;}
#menu a {display:block; width:115px; padding-top:86px;...

height och padding-top har du 170px på bägge. (IE-krångel)

Hur jag än ändrade så blev det kaiko i nån webbläsare, sen kom jag plötsligt på det! :)

Jag ändrade:

#menu li.list1 {background:transparent url(bilder/startsida/bild1.jpg);}

till:

#menu li.list1 {background:transparent url(bilder/startsida/bild1.jpg) no-repeat;}

Så nu funkar det bra i båda webbläsarna! *skuttar runt av glädje* :e

Tack för hjälpen med allt!