Tečkovaný rámeček i pro IE
20. 02. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
Tematicky související články
- Min-width bez JavaScriptu či Expressions i pro MSIE
- Třísloupcový layout se stejnou délkou všech panelů
- Zakulacené rámečky
- Vertikální dvouúrovňové obrázkové menu
- Onclick menu bez reloadu i JS
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
