archeolog.cz: Obří Hrad Keltské oppidum Stradonice Habrůvka, jeskyně Býčí skála pravěk datace, časová osa, pravěké dějiny
Apple iPad Smart Case šedá - Samsung Galaxy Tab 10.1 černé - Samsung Galaxy Tab 10.1 bíle - Puzdro Asus Eee Pad Versa černé - Pouzdro Apple iPad Smart Cover černé - Pouzdro POINT OF VIEW Mobii 7" černé - Pouzdro ZTE V9C-1 černé - Pouzdro Google Nexus 7 oražové - Pouzdro Google Nexus 7 šedé - Pouzdro Samsung Galaxy Note 10.1 bíle - Pouzdro Samsung Galaxy Note 10.1 černé
   Témata: Home

Výlety

Foto

Technika

Výhledy

Cestování

K zamyšlení


LINUX4ALL archiv

Na webu

Pobavení

Příroda

Report, Dokument

Sport

Firefox or Mozilla underline images inside an anchor

- STEFi - 2007-03-06 23:52:36
Quick CSS solution for all browsers.......

Problematic code (presumed valid HTML or XHTML document):


...
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: none; }
....
<a href="xyz.html"><img src="img.gif" alt="image" />this is image</a>


This code is working in Mozilla or Firefox in different way than IE and Opera (no matter which interpretation is correct). Text and image are both underline in Firefox and Mozilla.


a img { border: none; text-decoration: none; }

Adding image text-decoration to "none" can't help us. Mozilla or Firefox underline all inline elements inside the anchor tag.
Solutions is not very clear but works in all browsers (didn't test IE 7). You have to add span around text and change action of :hover pseudo-class to this span. For IE you have to assign some action to a:hover otherwise anchor won't be underline.


...
a { text-decoration: none; }
a:hover span { text-decoration: underline; }
a img { border: none; }

a:hover{background:transparent;}
....
<a href="xyz.html"><img src="img.gif" alt="image" /><span>this is image</span></a>


It works. All Mozilla and Firefox developers should be roasted in hell :)) It is classical demonstration of strict CSS implementation no matter how stupid is. If you have to read this article to the end you should send invoice to nearest Mozilla developer!


Keywords: CSS, anchor, styles, style, underline image, all browsers, Mozilla, Firefox
STEFi (c) 2004 - stefi [at] netdev [dot] cz
Pokud chcete zde publikované materiály použít, prosím, informujte mě. If you wish to use these published materials, please, let me know.
0.01 sec