Высота LI в UL, OL

TonKhaO · October 29, 2009

Доброго времени суток господа, хотел поделиться с вами некими скилзами набранного опыта и заодно кое что спросить ибо проблему решил на 80%, итак вот суть (исходник тут)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>


<ul class="test_ul">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>


</body>
</html>

CSS:

* {margin: 0px; padding: 0px;}

body {width: 500px; margin: 0 auto;}

ul.test_ul {
border: 1px solid red;
list-style: none;

}

ul.test_ul li {
border: 1px solid green;
}

a {font: 10px tahoma;}

итак имеем простой список UL (красная рамка) и в нем стандартные LI (зеленая), ссылкам проставлен font-size: 10 пикселей, и что мы должны по идее получить, LI должны по идее подогнаться по высоте 10 пикселей (зеленая рамка), то есть как бы обтягивать текст, ОПЕРА делает то что мы изначально хотим, в подтверждение скриншот

Далее, смотрим в Лису

Видим что LI по высоте больше почему то чем текст который находится в этих самых LI, в ИЕ 6 и 7 такой же результат

Немного подумав я вспомнил что по идее я же не проставлял у LI размер текста, то есть он наверняка по дефолту стоит 12 или около то пикселей, в итоге меня это навело на мысль добавить font-size непосредственно к LI это я и сделал указав 1 пиксель.

Исправленный CSS:

* {margin: 0px; padding: 0px;}

body {width: 500px; margin: 0 auto;}

ul.test_ul {
border: 1px solid red;	
list-style: none;			
}

ul.test_ul li {
border: 1px solid green;
font-size: 1px; /*НОВЫЙ ПАРАМЕТР*/
}

a {font: 10px tahoma;}

Так как у нас глючат ток Лиса и ИЕ снова посмотрим, сперва в лисе

УРА!!! УРА!!! УРА!!! В лисе проблема решена и тут я обрадовался по идее ИЕ тоже должен правильно выглядеть НО тут меня ждало разочарование, ровным счетом для ИЕ ничего не зменилось, и тут я вспомнил про волшебный ZOOM для ИЕ который решает половину проблем и добавил + еще и его

* {margin: 0px; padding: 0px;}

body {width: 500px; margin: 0 auto;}

ul.test_ul {
border: 1px solid red;
list-style: none;

}

ul.test_ul li {
border: 1px solid green;
font-size: 1px;
zoom: 1; /*НОВЫЙ ПАРАМЕТР*/
}

a {font: 10px tahoma;}

И тут проблема с зелеными рамками решилась :-))) НО появилась другая, посмотрите на скрин теперь между самими LI появились непонятные марджины

Господа что думаете, из за чего такое и как это решить?

mishka · October 29, 2009

Вы что ничего незнаете про наследование стилей?

если вы зададите размер шрифта на body 10px, то и во всех ul и p, и div... будет размер шрифта 10px. (Заголовки это другая история).

А также почитайте про line-height

И в вашем случае лучше задавать размер шрифта и высоту строки на ul

Добавьте

ul.test_ul{
	font-size:10px;
	line-height:10px;
}

ну а с ссылки и с li уберите размер шрифта

Edited October 29, 2009 by mishka2

psywalker · October 29, 2009

Вы что ничего незнаете про наследование стилей?
если вы зададите размер шрифта на body 10px, то и во всех ul и p, и div... будет размер шрифта 10px. (Заголовки это другая история).
А также почитайте про line-height
И в вашем случае лучше задавать размер шрифта и высоту строки на ul

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
* {margin: 0px; padding: 0px;}

body {width: 500px; margin: 0 auto;}

ul.test_ul {
border: 1px solid red;
list-style: none;
zoom:1;
font-size: 1px;



}

ul.test_ul li {
border: 1px solid green;
}

a {font: 10px tahoma;}
</style>

<body>
<ul class="test_ul">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>

</body>
</html>

mishka · October 29, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	*{margin:0px;padding:0px;}
	body {width:500px;margin:0 auto;}
	ul.test_ul{
		border:1px solid red;
		list-style:none;
		font:10px/10px Tahoma,sans-serif;
	}
	ul.test_ul li{
		border:1px solid green;
	}
	-->
	</style>
</head>
<body>
<ul class="test_ul">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	</ul>
</body>
</html>

Edited October 29, 2009 by mishka2

TonKhaO · October 29, 2009

да, блин забыл конечно про Line-height :-), немного не понял про запись font: 10px/10px что она значит?

И вашем случае лучше задавать размер шрифта и высоту строки на ul

а какая разница либо я в li задаю либо в ul помоему одинаково

psywalker · October 29, 2009

да, блин забыл конечно про Line-height :-), немного не понял про запись font: 10px/10px что она значит?
а какая разница либо я в li задаю либо в ul помоему одинаково

Задавай всегда у body изначально, когда верстаешь

TonKhaO · October 29, 2009

Задавай всегда у body изначально, когда верстаешь

и какой мне это + даст, ну то есть допустим задам в боди font-size: 12px а для списков нужно будет 10 сделать, или идея в другом?

и кстати уолкер что значит твой сокральное font: 10px/10px ? :-) Впервые вижу такую запись )))

Edited October 29, 2009 by TonKhaO

s0rr0w · October 29, 2009

и какой мне это + даст, ну то есть допустим задам в боди font-size: 12px а для списков нужно будет 10 сделать, или идея в другом?
и кстати уолкер что значит твой сокральное font: 10px/10px ? :-) Впервые вижу такую запись )))

10 пикселей размер шрифта и 10 пикселей черезстрочного расстояния.

psywalker · October 29, 2009

и какой мне это + даст, ну то есть допустим задам в боди font-size: 12px а для списков нужно будет 10 сделать, или идея в другом?
и кстати уолкер что значит твой сокральное font: 10px/10px ? :-) Впервые вижу такую запись )))

Это не мой пост и не моя запись, тут чел на форуме бинокли выставил, тебе туда

TonKhaO · October 29, 2009

10 пикселей размер шрифта и 10 пикселей черезстрочного расстояния.

ааа, шикарно, узнал новое, день продит не зря )

mishka · October 30, 2009

а какая разница либо я в li задаю либо в ul помоему одинаково

Да без разницы. Я имел ввиду чтобы не самой ссылке. Высоту строки лучше блочным елементам задавать. В данном случае родителю ссылки. Либо li либо ul

что значит font: 10px/10px ? :-) Впервые вижу такую запись )))

font:italic bold 14px/18px Tahoma,sans-serif;

изучай

Edited October 30, 2009 by mishka2

Sign In

Высота LI в UL, OL

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information