Проблем с <li>

W

WildBeast

Registered
Здравейте,

Проблемът ми е, че под IE тагът <li> прави около 10 пиксела пространство пред текста в тага и не мога да го премахна..
Ето снимки как трябва да бъде и как е в момента:

Трябва да бъде (тест под Mozilla): http://store.picbg.net/pubpic/2F/40/235046e5985a2f40.PNG
Как е в момента (тест под IE7): http://store.picbg.net/pubpic/A2/2D/f430c34a21bba22d.PNG

Ето и HTML & CSS кода:

HTML:
Код: 
<table cellpadding="0" cellspacing="0" align="center" id="navigation">
<tr><td align="left" class="navigation_up"><b>Навигация</b></td></tr>
<tr><td align="left" class="navigation_center"><li class="menulink_but1"><a href="index.php?page=home">Начало</a></li></td></tr>
<tr><td align="left" class="navigation_center"><li class="menulink_but1"><a href="index.php?page=vicove">Вицове</a></li></td></tr>
<tr><td align="left" class="navigation_center_li"><li class="menulink_but2"><a href="index.php?page=top10vicove">Топ 10 най-коментирани</a></li></td></tr>
<tr><td align="left" class="navigation_center"><li class="menulink_but1"><a href="index.php?page=snimki">Снимки</a></li></td></tr>
<tr><td align="left" class="navigation_center_li"><li class="menulink_but2"><a href="index.php?page=top10snimki">Топ 10 най-коментирани</a></li></td></tr>
<tr><td align="left" class="navigation_center"><li class="menulink_but1"><a href="index.php?page=klipove">Клипове</a></li></td></tr>
<tr><td align="left" class="navigation_center_li"><li class="menulink_but2"><a href="index.php?page=top10klipove">Топ 10 най-коментирани</a></li></td></tr>
<tr><td align="left" class="navigation_center"><li class="menulink_but1"><a href="index.php?page=contact">Контакти</a></li></td></tr>
<tr><td align="left" class="navigation_down"></td></tr>
</table>

CSS:
Код: 
li {
list-style-type: none;
height: 15px;
}

li.menulink_but1 {
background: url('../images/but1.png') no-repeat left;
padding-left: 10px;
}

li.menulink_but2 {
background: url('../images/but2.png') no-repeat left;
padding-left: 10px;
}

#navigation {
width: 194px;
}

.navigation_up {
font-size: 14px;
color: #FFFFFF;
padding-bottom: 8px;
padding-left: 8px;
background: url('../images/navigation_up.png') no-repeat;
height: 38px;
width: 100%;
}

.navigation_center {
font-size: 12px;
background: url('../images/navigation_center.png') repeat-y;
width: 100%;
padding-left: 10px;
}

.navigation_center_li {
font-size: 12px;
background: url('../images/navigation_center.png') repeat-y;
width: 100%;
padding-left: 15px;
}

.navigation_down {
background: url('../images/navigation_down.png') no-repeat;
height: 10px;
width: 100%;
}
 
Добре ,сега трябваше още един пост , че вместо за margin става дума за padding :idea:
Идеята е каквото не ти харесва при ИЕ-то ,с отделен .цсс да го фикснеш.
Поне аз за това се сещам ,ако ти помогне - помогне.
 
Различен CSS файл има смисъл само в краен случай!
По принцип някои тагове(form, ul и т.н.) имат свои margin-и и padding-и, затова не е лошо когато почнеш да кодираш за "занулиш" всички такива стойности:
* { margin:0; padding:0; }
Увеличете...
 
emagi каза:
Различен CSS файл има смисъл само в краен случай!
По принцип някои тагове(form, ul и т.н.) имат свои margin-и и padding-и, затова не е лошо когато почнеш да кодираш за "занулиш" всички такива стойности:
* { margin:0; padding:0; }
Увеличете...
Увеличете...
Е явно случая ми е критичен :D . Няма промяна.
 
Най-доброто решение е да блокирам всички версии на Internet Explorer, но ако има и някое друго предложение ... целия съм в слух :cry: .
 
@emagi е прав! Самоче ти в твоя случай мисля ,че проблема ти е в ul-a не в li-то. На ul трябва да се изчисти padinga и margina!

Пример:

Код: 
ul {
 padding:0px;
margin:0px;
list-style-type:none;
}

ul li{

 padding:0px;
margin:0px;
}


Така вече се нулират стойностите . А като се загледах в хтмл структурата , ами че ти къде си видял да ползваш li без ul ?

Такава е структурата при използване на li :

Код: 
<ul>
  <li></li>
</ul>

Оправи си кода и после виж дали ти прави проблеми, а и не забравяй да изчистеш стойностите, за да нямаш проблеми в ие ;)
 
shterev, да, забравих да сложа и <ul>. Добавих CSS кода, който ми даде и се оправи, само че иконките са като чели е зададено valign="top", не са в средата, както в мозилата. Как да го оправя?
 
Както в първия пост, само че добавих <ul> пред всички <li> и </ul> зад всички </li> и поставих твоят CSS код.
 
направиго вместо таблица един див и вътре и сложи един ul li-та само.


Код: 
<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
			<li><a href="#">Item 5</a></li>
		</ul>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе