Ikoniņa iekš a taga

[litt]

Ir šāds CSS

.mostVisited a
{
color: #000000;
text-decoration: none;
padding: 0px 15px 0px 0px;
background: url(/pic/arrows/1.gif) no-repeat right bottom;
}
.mostVisited a:hover
{
color: #787840;
text-decoration: underline;
padding: 0px 15px 0px 0px;
background: url(/pic/arrows/2.gif) no-repeat right bottom;
}

un šāds HTML

<div class="mostVisited">
<a href="#">garsh teksts ksjfsd fskdjg sjgsd jksdjg skldjkgsdjg skld gjks</a>
</div>

Rezultātā uzreiz aiz teksta vajadzētu attēloties ikoniņai, kura pie hover mainās. Uz FF/OPERA viss smuki, uz IE nestrādā. Ir vēl kāds risinājums ar šo ikniiņas maiņu neizmantojot tabulas vai JS?

 

Uz IE šis brīnums strādā, ja linka teksts ir vienā rindā. Ja teksts ir vairākās rindās, tad vairs nekā ;(

Edited November 22, 2005 by litt

[[Ya]]

pievieno

 

display:block;

height:XXpx;

width:XXpx;

 

kur XX ir augstums/platums

 

un IE sako, prieksh IE ir jaataisa atsevishkji daudz kas ...

iespējams ka IE nepatīk tas "right bottom"

Edited November 22, 2005 by [Ya]

[litt]

Augstumu likt nevaru, jo linka teksts var būt gan vienā, gan vairākās rindās un ikonniņai ir jābūt apakšējās rinadas beigās

Piemērs:

text [ikonna]

Piemērs 2:

garš teksts

turpinās [ikonna]

Pie tam ikonnai jābūt uzreiz aiz teksta beigām nevis stūrī

Edited November 22, 2005 by litt

[[Ya]]

tad nenorādi augstumu ....

ja IE nejēdz to "right bottom" tad jātaisa pavisam savādāk :)

 

un jātaisa ar JavaScript

Edited November 22, 2005 by [Ya]

[blackhalt]

1.

url(/pic/arrows/1.gif); vietā url(pic/arrows/1.gif);

 

2.

background-image:url(pic/arrows/1.gif);

background-position:right bottom;

background-repeat:no-repeat;

background-color:#414246;

[litt]

IE jēdz right bottom vienīgi šajā gadījuma IE attēlo backgroundu tikai līdz pirmās rindiņas apakšai, pārējo griež nost. Par to viegli var pārliecināties eksperimentējot ar dažādiem backgrounda atstatumiem no augšējās malas

 

to blackhalt

Nav atšķirība kā es rakstu, vienalga IE visu cropo pie pirmās rindas apakšas

Edited November 22, 2005 by litt

[Grey_Wolf]

litt -->

Kaadeelj tik ljoti baidies no tabulaam un JS?

ar JS to panaakt elementaari?

un krietni lielaaka iespeeja ka viss straadaas normaali......

P.S. un nevajag runaat par to ka 90% lietotaaju atsleedz JS...

tad arii vinji neredz 90% saitu....

[bubu]

Kaadeelj tik ljoti baidies no tabulaam ...

Semantika?

[Evi]

.mostVisited a
{
color: #000000;
display:inline-block;
text-decoration: none;
padding: 0px 15px 0px 0px;
background: url(bullet2.gif) no-repeat right bottom;
}

 

Ja ieliek display:inline-block; tad arii IE6 paraadaas bg img, tiesa gan garaakaas daljas beigaas.

[andrisp]

imo problēma ir tur, ka shorthands background jālieto šādi:

background: transparent url(bullet2.gif) no-repeat right bottom;

[mefisto]

Un kāpēc man liekas ka tav visam tiek pieiet čž puses ?

 

Ja tev ir

<a hreh="#something">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>

 

Vai tad nebūtu daudz vienkāršāk ja darītu šādi ?

<!-- HTML -->
<a hreh="#something">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="icon"> </span></a>

<!-- CSS -->
a span.icon{
  line-height: 16px;
  font-size:  14px;
  padding-left: 16px;
  background: #fff url(bulta.png) no-repeat top left;
}
a:hover span.icon{
  background: #fff url(bulta.png) no-repeat bottom left;
}

 

 

Paskaidrojums

• transparent backgrounds var izraisīt bildes mirgošanu uz IE
  
• lai simulētu preload šinī gadījumā ir domāts izmantot 16x32px bildi, kurai on-hover maina pozīciju.
  
• font-size + 2px = line-height (lielākoties)
  
• ja span'am nebūs satura, to nevarēs redzēt.
  

 

nekas no šitā nav notestēts. zīdu no pirksta

Edited November 25, 2007 by mefisto

[Evi]

mefisto: kau4kaa IE6 nestraadaa ;)

[mefisto]

Tu liekas nesaprati to daļu, kurā es rakstīju, ka nenotestēju.

 

BĻJA ! Vai kāds nevarētu beidzot salabot

 un [html] ?

 

 

Nestrādā tāpēc ka <span class="icon"> </span> vietā bija jābūt .<span class="icon">[b]&[/b]nbsp;</span>

Edited November 25, 2007 by mefisto

[Evi]

taapat nestraadaa ie6

[andrisp]

mefisto, kas vainas code ?

 

īsti nezinu, varbūt pārpratu domu, bet man viss strādā arī uz IE6/7: http://apblog.lv/misc/a_bg.php

Edited November 26, 2007 by andrisp