Mizející border u odkazů v IE
Vydáno: 13.11.06 Kategorie:
Nastolený problém
Používate-li při tvorbě menu seznamy (ul, ol) tak jako já,
může se stát, že IE vám
nezobrazí border u odkazů a.
V čem je zakopaný pes?
IE totiž narozdíl od ostatních prohlížečů položky seznamu
(li) interpretuje tak, že obepínají odkazy (a) a
nedávají prostor pro zobrazení dolního nebo horního ohraničení
(border) odkazu, neboť jsou právě překryty hodnotami položek
seznamu.
Podívejte se na tento příklad mizejícího ohraničení v IE.
Řešení
V tomto případě je řešení značně jednoduché, neboť stačí
nastavit odkazům (a) position:relative, čímž
prohlížeči sdělíme, že má intepretovat vlastnosti pro odkazy. Tato
úprava kódu nijak neovlivní ostatní prohlížeče, tudíž není pro ně
nutné přidávat další atrbiuty.
Mrkněte se na vyřešený případ mizejícího ohraničení v IE u odkazů v seznamu.
Použitý kód v řešení
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Příklad na mizející border u odkazů v IE</title>
<style>
#menu {width: 770px; }
#menu li {list-style-type:none; float:left;}
#menu a {margin: 0 3px; padding:2px; text-decoration: none; border-top:3px solid #FF6600; color:#000; position:relative /*fix IE */;}
#menu a:hover {background:#FF6600; color:#FFFFFF;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="/">Odkaz</a></li>
<li><a href="/">Odkaz</a></li>
<li><a href="/">Odkaz</a></li>
<li><a href="/">Odkaz</a></li>
<li><a href="/">Odkaz</a></li>
<li><a href="/">Odkaz</a></li>
</ul>
</div><!-- konec menu -->
</body>
</html>
JIM · 19 01 2008 - 21:27
Díky, docela jsi mi pomohl ;)