Css- ve FF jede v IE ne, plz help

Použil sem tohle řešení hover efektu u obrázku, ale ve IE mi to nejede.
Jedná se o tom, že po najetí na obrázek se zobrazí čára, která jeho obsah podtrhne. Nevíte jak to zprovoznit?




HTML:

...
<div id='vina'>
<a href='neoklas.php?barva=bila'><img src='white.gif' alt='Bílá vína' /><img src='white2.gif' class='cara1'></a>
</div>
...

CSS:

div#vina a {
position: relative;
}

.cara1 {
position: absolute; left: 0px; top: 28px; visibility: hidden;
}

a:hover img.cara1 {
position: absolute; left: 0px; top: 0px; visibility:visible;
}

Tak nedělej čáru jako extra obrázek, ale jako border-bottom. Mimo :hover bude mít barvu pozadí (ale bude tam, aby rozměry neposkakovaly), na :hover bude mít barvu viditelnou.

No, to v IE prostě neuděláš, IE se neřídí specifikací CSS, v IE můžeš :hover použít jen na odkazy.... jedině to ještě nakombinovat s javascriptem

Džej Ár: vsak to ma v odkazu

No, jo ;) ja jsem na ten kod nekoukal, jen jsem si precetl ten zacatek, kde bylo hover u obrazku...
a hned jsem odpovidal ;)

Jeste to muzes udelat uplne jednoduse..resp--

<a href="neoklas.php?barva=bila"><img src="PRVNI OBRAZEK" onmouseover="this.src='DRUHY OBRAZEK';" onmouseout="this.src='PRVNI OBRAZEK';">
</a>

@MAtE HocKK
To mě taky napadlo, ale akorát nedokážu pochopit jak v dnešní době css apod. musím na tento efekt používat javascropt, kterým se tohle vytvářelo už před sto lety...

Ale přece, až teď jsem se na to pořádně podíval, hover má sice u odokazu, ale mění viditelnost jiného objektu, což odkaz není, to prostě IE neumí, vývojáři u M$ si jdou prostě svým směrem a všeobecně uznávané standarty jim nic moc neřikají....

řešení pomocí nějakého obrázku s čarou mi nepříjde jako nějaký zrovna moc dobrý nápad, ale pokud to tak chceš mít, budeš asi muset sáhnout po tom javascriptu, no :-/ Navíc, pokud dobře rozumím tomu, k čemu sjou tam ty obrázky, tak je to jen navigace, což se obrázky dělat nehodí....
Já osobně bych se to snažil udělat jinak...

třeba:

<a href='neoklas.php?barva=bila' id="odkaz1"><span>Text odkazu</span></a>


css:

a #odkaz1{
width:sirka_obrazku px;
height:vyska_obrazku px;
background: url("obrazek_bez_cary.gif");
}
a #odkaz1 span{
display:none;
}
a #odkaz1:hover{
background: url("obrazek s carou");
}

JS je tady skutečně úplně zbytečný. Obrázková navigace plná <img /> není tak úplně dobrý nápad, lepší bude textoé odkazy jenom zakamuflovat.

Řešení pro moderní a přístupnou obrázkovou navigaci pomocí CSS:

- V (X)HTML je nejlepší zapsat to jako nečíslovaný seznam, ukázka zde:

<ul id="menu">
<li id="link1"><a href="home.html">Home<span></span></a></li>
<li id="link2"><a href="about.html">About<span></span></a></li>
<li id="link3"><a href="links.html">Links<span></span></a></li>
</ul>

- Seznamy a jejich položky mají všelijaké defaultní marginy, paddingy a odrážky, ty se pomocí CSS oddělají
- Položky <li> dostanou nějaké rozměry a napozicují nebo nafloatují se dle potřeby
- Položkám <li> se nastaví position:relative, aby se odkazy a spany (s obrázkovým pozadím) uvnitř nich daly absolutně pozicovat od jejich horních levých rohů
- Spany uvnitř položek dostanou display:block, rozměry shodné s položkami a obrázková pozadí dle libosti. Teď to důležité: position:absolute; top:0; left:0 a z-index:1 je vysune do vrchní vrstvy, takže překryjí text odkazů. Pro IE bude možná potřeba vrazit jim cursor:pointer.


Hover efekty je možné přidat si dle libosti, třeba změnu obrázkového pozadí spanu nebo libovolný border.

Detailní popis zde:
http://klient.plavacek.net/menu/menu.html

Ještě jeden link o hledně řešení :hoveru v IE:
http://www.maciweb.net/blog/web/clanek.php?clanek=102