Hjälp med hover i lista

Hej gott folk!
Jag håller på att jobba med en meny som ska ersätta en identisk meny gjord med Flash. Jag har med andra ord gett mig tusan på att samma funktionalitet ska gå att fixa med XHTML och CSS. :h

Meny består av en <ul>-lista med en bakgrundsfärg i varje <li>-element. När man hovrar visas en bild istället. I listelementen finns också en span med ett ord. den är osynlig utom när man hovrar över det aktuella elementet då ordet visas. Saken är att det ordet ska visas i samma position på sidan oavsett vilket listelemens span man hovrar över. Det är här problemet börjar...

Ni kan kolla på menyn här.

CSS-filen ligger här.

Båda filerna validerar.
Problemet är att orden visas förskjutna relativt med listelementets höjd. Position:absolute ska ju förhålla sig till det omgivande blocket, men det enda blocket som finns är ju <div id="menu">. Eller? Det funkar som det ska om jag använder position:fixed, men efter det inte lirar med IE så går det ju inte att använda.
Någon som har en idé om vad jag missat eller gjort fel?
Många tack på förhand!

:)
Michael

Det funkar inte alls i IE.

Annorlunda. Gillar den skarpt! (y)

Har inga förslag på vad som kan hjälpa dock =/

Nej, den funkar inte längre i IE. Attans, det gjorde den innan jag blev desperat och började att riva i koden hit och dit... x(

Michael

Menyn finns i fungerande skick här.
Fungerande om man använder Safari eller Firefox/Flock det vill säga...

Michael

Har försökt hinna med att titta på din "utmaning", men tiden räcker inte till.
Kanske kan detta ge dig något tips på vägen.
http://www.gotlandssidor.se/exp/exp.html

Nu jobbade jag en stund med att rensa i min kod och flyttade på hover-texten.
Gjorde
/* Göra allt osynligt */
#container a.gallery span {
background: #FFFFFF;
height: 10px;
width: 10px;
left: 300px;
overflow: hidden;
position: absolute;
top: 200px;}
synlig genom att göra den 10px hög och bred. Ska egentligen vara 1px. Så ändra det om du vill använda den som mall.

http://www.gotlandssidor.se/exp/putte2.html

Ser intressant ut! Tack!
Ska leka lite med din kod och se om det går att göra något.

Michael

OK, nog lekt för idag. Nearly there...

Jag har en liknande underlighet som du har på din sida i mitten. I mitt fall är det ordet Contact. Förstår inte varför det syns där. Hovrar man över det tiltar de två understa raderna i menyn.

Men, som sagt, tack för hjälpen! Det ska nog bli nog av det här...

:)
Michael

Jag ville bara visa att hovern egentligen finns på två ställen och därför måste man göra underligheten 1X1px.som jag skrev däruppe.

Blev ju jättebra annars...

Aha, missade det där. Då var det ju lätt. ;)
Den färdiga menyn inlagd på sida finns nu här

Tack för hjälpen!

:birp
Michael

... men du behöver nog box-model-hacka lite för att få sidan att se bra ut i ie5/ie55...

Ja, jag har brutalt struntat i IE5... Får se om jag orkar sen.

§e
Michael

fast du är ju nästan där - allt funkar ju (hover etc). det är bara själva textrutan som är för liten...)

firefox då

http://www.theduffyagency.com/test/tda/index.htm

...är det den som gäller så funkar den inte längre i fierfox...

//h

Nej, har flyttat filerna till http://www.theduffyagency.com/ där de ska vara. Det funkar utmärkt i Firefox här...

Ang IE5 så har jag bara kunnat testa i IE5/Mac. Genom att fuska med ett extra stylesheet har jag fått den att åtminstone synas ordentligt. 5-versioner för Win kan jag inte testa här. Har du något förslag på vad jag behöver ändra?

:)
Michael

michno, jag måste bara säga att detta var den absolut snyggaste hemsidan jag har sett! :bire

Oj, tack!
Det blir en glad julklapp till teamet här...

:birp
Michael