Autor Zpráva
KLM
Profil *
Dobré dopoledne,

uvažuju, že bych pro zvýraznění odkazů použil (aby se po najetí na odkaz pod ním objevilo tenké tečkované podtžení):
a:hover {border-bottom: 1px dotted #008000;}


Bohužel, ať dělám, co dělám, toto tečkované podtržení se mi zobrazuje i pod obrázky, které někam odkazují.
Nefunguje např.
a.image:hover { border: none;}

nebo
a:hover img{border:0;}

ani spousta dalších věcí, které jsem už vyzkoušel.

Poradíte?
Bubák
Profil
Jdeš slepou cestou, border nepatří k obrázku, ale k textu, použij třebas tohle, hodnotu vertical-align dej, kolik potřebuješ:
a img {vertical-align: -5px;}
KLM
Profil *
Bubák: Díky, ale tečkované podtržení se jen posouvá nahoru, tím víc, čím víc záporných px dám.
J
Profil *
KLM Obrázky máš v nějakém bloku .image?
a:hover {border-bottom: 1px dotted #008000;}
.image a:hover {border-bottom: none;}
Bubák
Profil
KLM
V jakém prohlížeči? Nebo že by v tom měl prsty vykreslovací režim? Ve Firefoxu se sice border posune nahoru, ale pod obrázek. Nebo je obrázek průsvitný?
Jinak máš další možnosti, upustit od toho, nebo použít span, a to má zase další možnosti:
<style>
a:hover span {border-bottom: 1px solid red}
</style>
<a href=#><span>text</span><img ...> <span>text</span></a>

Nebo:
<style>
a:hover {border-bottom: 1px solid red}
a:hover span {border-bottom: 1px solid blue} /* cara v barve pozadi, pravdepodobne #fff */
</style>
<a href=#>text<span><img ...></span>text</a>
KLM
Profil *
Tak jsem nakonec uplácal toto řešení, které funguje v IE a Firefoxu:

a:hover { 
color : #940f04; 
border-bottom: 1px dotted #008000;
text-decoration : underline; 
} 

a img { 
border-width : 0; 
vertical-align: -5px;
} 

.post img { 
padding : 4px; 
border : 1px solid #cde; 
background-color: #ffffff; 
}

Díky všem za pomoc.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: