Tečkovaný rámeček i pro IE

20. února 2006

•

Toto řešení ukazuje, jak obejít chybu v Internet exploreru, který při malých tloušťkách zobrazuje tečkovaný okraj chybně jako čárkovaný.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Riki Fridrich. Bližší popis najdete v článku 1px dotted border v IE.

CSS

body
{
font-family: sans-serif;
text-align: center;
}
#obal
{
margin: 100px auto 0;
background: #eee;
padding: 1em;
width: 70%;
font-weight: bold;
font-style: italic;
}
div.ie
{
background: #ccc;
width: 50%;
margin: .5em auto;
}
div.vnejsi
{
width: 50%;
margin: 1em auto;
background: #ccc;
}
div.slaby
{
padding: 1px;
background-image: url(’77-1.gif‘);
background-repeat: repeat;
}
div.silny
{
padding: 3px;
background-image: url(’77-2.gif‘);
background-repeat: repeat;
}
div.zajimavy
{
padding: 6px;
background-image: url(’77-3.gif‘);
background-repeat: repeat;
}
div.vnitrni
{
background: #ccc;
padding: .2em .5em;
}
div.ie
{
border: dotted red 1px;
}

XHTML

<html>
<body>
<div id=“obal“>
<div class=“ie“>V IE se okraj tohoto DIVu zobrazí nesprávně – jako čárkovaný.</div>
<div class=“vnejsi slaby“>
<div class=“vnitrni“>Modrý 1px okraj</div>
</div>
<div class=“vnejsi silny“>
<div class=“vnitrni“>Zelený 3px okraj</div>
</div>
<div class=“vnejsi zajimavy“>
<div class=“vnitrni“>Zajímavý efekt při ponechání obrázku a zvětšení paddingu u vnějšího DIVu</div>
</div>
</div>
</body>
</html>