Varför blir <li> 18px hög?

11 svar · 497 visningar · startad av Melea 2 feb. 2007

MeleaMedlem sedan juli 20033 147 inlägg

Frågan2 feb. 2007 15:05#1

Har en omröstning i högermenyn på en sida jag håller på att utveckla. Men det strular något fruktansvärt i IE 6(förvånad? inte jag).
Ungefär såhär ser det ut:

<ul style="list-style-type: none; margin: 0;">
   <li>
      <a href="#">(' . $row_answ[num_answ] . ') ' . $row_a['alternative'] . ' - ' . $votes . '%</a>
   </li>
   <li style="border: 1px solid #14718a; height: 10px; padding: 1px; margin: 3px 0;">
      <img src="images/pollbar.gif" style="width: ' . $votes . '%; height: 10px; border: 0; vertical-align: top;" alt="" />
   </li>
</ul>

Trots att jag har satt height till 10px på både <li> och <img> så blir höjden på <li>:n 18px, det blir alltså ett fult mellanrum mellan bilden (som visar hur många som röstat procentuellt) och bordern i underkant.

Någon som har en susning om varför?

Tack på förhand!

tantenMedlem sedan nov. 20051 596 inlägg

2 feb. 2007 15:34#2

vild gissning... IE sätter margin på img...

tantenMedlem sedan nov. 20051 596 inlägg

2 feb. 2007 15:49#3

Prova med att lägga in detta i headern för en stund och se vad som händer... Förmodligen händer det mycket, så du kan ju radera det sedan.
Men då försvinner webläsarnas default-inställningar.

<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
-->
</style>

silfverMedlem sedan apr. 200312 679 inlägg

2 feb. 2007 15:51#4

Räcker det inte med att skriva ul, li, img{}? Det är ju ändå bara innehållet i listan som behöver ändras. :)

MeleaMedlem sedan juli 20033 147 inlägg

2 feb. 2007 15:58#5

tanten skrev:

vild gissning... IE sätter margin på img...

Nix. :)

tanten skrev:

Prova med att lägga in detta i headern för en stund och se vad som händer... Förmodligen händer det mycket, så du kan ju radera det sedan.
Men då försvinner webläsarnas default-inställningar.
<style type="text/css">

</style>

Det kör jag redan på. :)

silfver skrev:

Räcker det inte med att skriva ul, li, img{}? Det är ju ändå bara innehållet i listan som behöver ändras. :)

Om det nu varit <img>-taggen som hade marginaler på sig så hade det räckt, visst. Men det hjälper inte. :OO

tantenMedlem sedan nov. 20051 596 inlägg

2 feb. 2007 15:58#6

Säkert, men eftersom han bara verkar använda inlinestyle så tänkte jag att han kunde felsöka så.
För IE räknar ju lite märkligt i bland när det gäller margin och padding och ska man räkna på antalet px i li så är de 18 med border och margin .... + eventuellt vad IE har runt bilder default... :-)

MeleaMedlem sedan juli 20033 147 inlägg

2 feb. 2007 16:04#7

Såhär ser det ut i Mozilla resp. IE. :)

GislavedMedlem sedan nov. 20041 740 inlägg

2 feb. 2007 16:23#8

10px + 1px padding top + 1px padding bottom + 3 px margin top + 3 px margin bottom = 18 pixlar.

MeleaMedlem sedan juli 20033 147 inlägg

2 feb. 2007 16:29#9

Gislaved skrev:

10px + 1px padding top + 1px padding bottom + 3 px margin top + 3 px margin bottom = 18 pixlar.

Padding 1px gör ju endast så det blir utrymme runt omkring bilden, och margin uppe och nere gör ju endast att utrymmet mellan bordern och texten ovan/under ökar.
Tro mig, jag har testat. :) ;)

tantenMedlem sedan nov. 20051 596 inlägg

2 feb. 2007 16:39#10

Om du sätter height i <li> till auto och tar bort vertical-align: top; på bilden. Vad händer då? Tror de ska bli ungefär lika då i alla fall:-)

MeleaMedlem sedan juli 20033 147 inlägg

2 feb. 2007 16:39#11

Där hade vi felet, jag satte font-size: 0; på <li>. Berodde antagligen på att jag hade \n efter <li> och <img>.

Tack för alla svaren i alla fall. :)

MeleaMedlem sedan juli 20033 147 inlägg

2 feb. 2007 16:42#12

tanten skrev:

Om du sätter height i <li> till auto och tar bort vertical-align: top; på bilden. Vad händer då? Tror de ska bli ungefär lika då i alla fall:-)

Gjorde ingen annan skillnad än att bilden hamnade i mitten, höjden blev fortfarande 18 pixlar. Men tack för att du la ner tid! :)