Meny (image hover) bugger i IE.

[Torjus]

Heisann, har et problem med menyen min i IE. Bruker imagehover fra epleweb.com.

 

I Firefox fungerer alt fint, men i IE så ser menyen helt mongo ut.

 

HTML:

Klikk for å se/fjerne innholdet nedenfor

<ul>
	<li><a href="index.php" id="hjem"><span>hjem</span></a></li>
	<li><a href="profil.html" id="profil"><span>profil</span></a></li>
	<li><a href="bildegalleri.php" id="bildegalleri"><span>bildegalleri</span></a></li>
	<li><a href="portefolje.html" id="portefolje"><span>portefolje</span></a></li>
	<li><a href="kontakt.php" id="kontakt"><span>kontakt</span></a></li>
	<div id="bunnmeny"></div>
</ul>

CSS:

Klikk for å se/fjerne innholdet nedenfor

#meny
{
 width: 250px;
 float: left;
 background-color: #8f0100;
}

#meny ul
{
 list-style: none;
}

a#hjem 
{
 display: block;
 background: url(images/hjem.gif) top no-repeat;
 width: 116px;
 height: 18px;
 text-decoration: none;
}

a#hjem:hover 
{
 background-position: bottom;
}
a#hjem span 
{
 display: none;
}

a#profil
{
 display: block;
 background: url(images/profil.gif) top no-repeat;
 width: 116px;
 height: 17px;
 text-decoration: none;
}
a#profil:hover 
{
 background-position: bottom;
}
a#profil span 
{
 display: none;
}

a#bildegalleri 
{
 display: block;
 background: url(images/bildegalleri.gif) top no-repeat;
 width: 116px;
 height: 17px;
 text-decoration: none;
}
a#bildegalleri:hover 
{
 background-position: bottom;
}
a#bildegalleri span 
{
 display: none;
}

a#portefolje 
{
 display: block;
 background: url(images/portefolje.gif) top no-repeat;
 width: 116px;
 height: 17px;
 text-decoration: none;
}
a#portefolje:hover 
{
 background-position: bottom;
}
a#portefolje span 
{
 display: none;
}

a#kontakt 
{
 display: block;
 background: url(images/kontakt.gif) top no-repeat;
 width: 116px;
 height: 17px;
 text-decoration: none;
}
a#kontakt:hover 
{
 background-position: bottom;
}
a#kontakt span 
{
 display: none;
}

#bunnmeny
{
 display: block;
 background: url(images/bunnmeny.gif) no-repeat;
 width: 116px;
 height: 8px;
 text-decoration: none;
}

 

Noen som kan tenke seg hva som er galt?

Endret 31. oktober 2006 av fUzZy^

[Torjus]

Ingen som vet hva det kan være?

[Alex Moran]

Hadde vært en fordel om vi fikk se problemet IRL.

[Torjus]

Ups, hehe.

 

http://www.thinkfuzzy.net

 

Liten glipp der, hehe. Som sagt så er problemet i IE, ikke FF eller Opera

 

EDIT:

 

Har fikset selve hover buggen nå, men hvorfor er det mellomrom mellom knappene i IE?

Endret 2. november 2006 av fUzZy^

[-Teddy-]

Jeg ville prøvd å endre line-height for menyen i IE for å se om det hjelper.

Om det hjelper, men menyboksen blir for stor ville jeg prøvd meg på negativ margin/padding i IE.