Ненужный отступ у изображений в IE. Есть как минимум два способа решения проблемы.

www.romver.ru / Полный список статей / Ненужный отступ у изображений в IE

АБРАКАДАБРА (Тоже самое но в читаемом виде)

Predstavim 4to voznikla neobxodimost' sozdat' galereu fotografiy. U kajdoy fotografii est' vne6niy konteyner s opredelennim oformleniem, 4to-to vrode etogo:

HTML:

<div class="photo">
   <p>Gabriel' Batistuta</p>
   <img src="batistuta.jpg" width="380" height="277" alt="Gabriel' Batistuta" />
</div>

i sobstvenno stili:

.photo{border:solid 3px #000;width:380px;font-family:"Trebuchet MS"}
.photo p{text-align:center;padding:10px 0;background:#FFCC99}

Kazalos' bi vse doljno bit' normal'no. Vo vsex osnovnix brauzerax tak i proisxodit, odnako v Internet Explorer poavlaetsa kakoy-to otstup posle izobrajenia. Vzglanite:

Est' kak minimum dva sposoba re6enia problemi.

1. Esli vi ne planiruete razme6at' kakoy-libo tekst vmeste s fotografiey, to dostato4no prosto dla vne6nego konteynera ustanovit' razmer 6rifta ravniy 0.

.photo{border:solid 3px #000;width:380px;font-family:"Trebuchet MS";font-size:0}
.photo p{text-align:center;padding:10px 0;background:#FFCC99}

2. V na6em je slu4ae, kogda fotografia imeet podpis', nujno v html kode ubrat' vse probeli mejdu izobrajeniem i zakrivau6im tegom roditel'skogo konteynera.

<div class="photo">
   <p>Gabriel' Batistuta</p>
   <img src="bati.jpg" width="380" height="277" alt="" /></div>

Kommentarii (9)

Rezinovie zakladki s pomo6'u odnogo izobrajenia i CSS

24 Mart 2008, rubrika: HTML, SSS

Eta stat'a pomojet vam sdelat' rezinovie zakladki s zakruglennimi uglami ispol'zua CSS i odno fonovoe izobrajenie dla vsex sostoaniy zakladki. Rezul'tat budet vigladet' primerno tak:

Pered tem kak rassmatrivat' kod, nebol'6oe poasnenie k na6im zakladkam. Kak vidno na risunke oni imeut tri sostoania:

Aktivniy element (Glavnaa)
Obi4naa zakladka (Soob6estvo, Soob6enia, Kontakti)
Zakladka pri navedenii ukazatela (Blog)

Kajdiy element imeet zakruglennie ugolki, a ego 6irina zavisit ot soderjimogo.

Teper', esli vse eto asno, pereydem k HTML i CSS. Optimal'nim variantom avlaetsa ispol'zovanie tega <span> vnutri ssilki <a> i primenenie k oboim elementam fonovogo izobrajenia.

Fonovoe izobrajenie

Kak uje bilo skazano ranee, nam ponadobitsa vsego li6' odno fonovoe izobrajenie:

4tobi fon izmenalsa mi budem ispol'zovat' pozicionirovanie fona dla kajdogo sostoania:

Aktivnoe (background top position: top)
Obi4noe (background top position: 30px)
Pri navedenii ukazatela (background top position: 60px)

HTML kod

Kak vidite kod o4en' prostoy:

<ul class="tab">
    <li class="active"><a href="home.html"><span>Glavnaa</span></a></li>
    <li><a href="community.html"><span>Soob6estvo</span></a></li>
    <li><a href="blog.html"><span>Blog</span></a></li>
    <li><a href="messages.html"><span>Soob6enia</span></a></li>
    <li><a href="contact.html"><span>Kontakti</span></a></li>
</ul>

Dla togo 4tobi sdelat' zakladku aktivnoy nujno dobavit' klass «active» elementu spiska v kotorom naxoditsa zakladka.

CSS kod

ul, li {border:0; margin:0; padding:0; list-style:none;}
ul{
    border-bottom:solid 1px #DEDEDE;
    height:29px;
    padding-left:20px;
}
li{float:left;margin-right:2px;height:30px;overflow:hidden}
.tab a:link, .tab a:visited{
    background:url(tab-round.png) right 60px;
    color:#666;
    display:block;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
}
.tab a span{
    background:url(tab-round.png) left 60px;
    display:block;
    margin-right:14px;
    padding-left:14px;
}
.tab a:hover{
    background:url(tab-round.png) right 30px;
    display:block;
}
.tab a:hover span{
    background:url(tab-round.png) left 30px;
    display:block;
}
.active a:link, .active a:visited, .active a:visited, .active a:hover{
    background:url(tab-round.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
    background:url(tab-round.png) left 0 no-repeat;
}

Na etom vse. Teper' vi mojete ispol'zovat' eto v svoix proektax.

Original: Clean Tab Bar Digg-like using CSS

Kommentarii (14)

Delaem «peydjer»

21 Mart 2008, rubrika: HTML, SSS

Etom primer pomojet vam sozdat' prostoy i vizual'no krasivo viglada6iy peydjer, kotoriy obi4no ispol'zuut dla bistrogo perexoda mejdu stranicami.

V celom mojno videlit' 4etire osnovnix elementa:

Predidu6aa / Sleduu6aa stranica (knopka ne aktivna)
Teku6aa stranica
Obi4naa ssilka
Predidu6aa / Sleduu6aa stranica (knopka aktivna)

HTML kod o4en' prost, i sostoit iz obi4nogo nenumerovannogo spiska:

<ul class="pager">
   <li class="previous-off">«Predidu6aa</li>
   <li class="active">1</li>
   <li><a href="">2</a></li>
   <li><a href="">3</a></li>
   <li><a href="">4</a></li>
   <li><a href="">5</a></li>
   <li><a href="">6</a></li>
   <li><a href="">7</a></li>
   <li class="next"><a href="">Sleduu6aa»</a></li>
</ul>

Teper' ostalos' tol'ko dobavit' nekotorie CSS svoytsva:

ul{border:0;margin:0;padding:0;}
.pager li{
border:0;margin:0;padding:0;
float:left;
font-size:11px;
list-style:none;
}
.pager a{
display:block;
border:solid 1px #ddd;
margin-right:2px;
}
.pager a:link,
.pager a:visited {
color:#0063e3;
padding:3px 6px;
text-decoration:none;
}
.pager a:hover{
border:solid 1px #666;
}
.pager .previous-off,
.pager .next-off {
color:#666666;
font-weight:bold;
padding:3px 4px;
}
.pager .next a,
.pager .previous a {
font-weight:bold;
border:solid 1px #fff;
}
.pager .active{
color:#ff0084;
font-weight:bold;
padding:4px 6px;
}

V itoge:

Original: Perfect pagination style using CSS