Прыгающие блоки в IE

Deacon · July 31, 2008

Делаю простое меню. Как избавится от съезжания последнего блока вниз?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Меню</title>

<style type="text/css">

* {
  margin:0;
  padding:0;
}

#mainlevel {
  clear: both; 
  width: 100%;
}

#mainlevel li {
  display:inline;
  list-style-type:none;
}

#mainlevel a {
  width:25%;
  height:22px;
  display:block;
  float:left;
}

</style>

</head>

<body>

<div id="mainlevel">
<ul>
<li><a href="#" style="background-color:yellow">Пункт 1</a></li>
<li><a href="#" style="background-color:orange">Пункт 2</a></li>
<li><a href="#" style="background-color:yellow">Пункт 3</a></li>
<li><a href="#" style="background-color:orange">Пункт 4</a></li>
</ul>
</div>

</body>
</html>

Ну и визуально это выглядит вот так

и временами так

yopopt · August 1, 2008

Во первых нельзы в строчный элемент запихивать блочный. Во вторых в ие есть "тр?хпиксельный баг". Попробуйте добавить блоку #mainlevel свойство padding-right:3px;

Deacon · August 1, 2008

А почему нельзя строчный в блочный закидывать? Как лучше сделать, если мне надо вс? меню представить цельным блоком? Назначить для ul класс?

По-моему 3-пиксельный баг, это относится к тексту, а не к блокам.

Deacon · August 1, 2008

Кстати прич?м тут трехпиксельный баг, когда я проверял исключительно на IE7?

Админы, памагите! умаляю))

klierik · August 1, 2008

строчные элементы созданы для того, что б в них помещать текстовые, как правило, данные.

нельзя помещать блочный в строчный, по спецификации W3C =)

по сабжу:

пожалуйста, не надо кричать о помощи. от этого ответ быстрее не появится.

код:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

	<style type="text/css">

		* {margin:0; padding:0;}

		ul {overflow:hidden; _height:1%; list-style-type:none;}
			li {float:right; width:25%;}
			*li.ie {float:none; width:auto; margin-right:75%;}

	</style>

</head>

<body>

	<ul>
		<li style="background-color:yellow;"><a href="#">Пункт 4</a></li>
		<li style="background-color:orange;"><a href="#">Пункт 3</a></li>
		<li style="background-color:yellow;"><a href="#">Пункт 2</a></li>
		<li class="ie" style="background-color:orange;"><a href="#">Пункт 1</a></li>
	</ul>

</body>
</html>

проверено: IE7, FF2

Deacon · August 1, 2008

Атец, ты по-моему бог! Отпишу ещ? позжей чуток, как оно пашет.

По поводу размещения блоков в тексте: взял с туториала по Joomla.

Вот он, я просто предполагал, что там о чем-то думают, когда делают руководства...))

У меня в коде будет идти блок шириной на весь монитор, потому это меню, потом тоже блоки шириной на весь экран.

Так вот меню между блоками помещать так вот просто ограниченное тэгами

или стоит вс? же взять в div или нет??? Или вы это писали про это??

#mainlevel a {
  width:25%;
  height:22px;
  display:block; <<<< ПРО ЭТО???
  float:left;
}

Deacon · August 1, 2008

IE7, Firefox 3 вс? работает

Opera 9.51 небольшой баг:

Слева место какое-то свободное появляется. Как подправить это?

klierik · August 2, 2008

#mainlevel a {
width:25%;
height:22px;
display:block;
float:left;
}

в приведенном вами коде, так как делается блочный, но при том же помещен в

[*] который сделан строчным - это полный бред.

код предоставленный мною более логичен.

по поводу оперы.. в 9.2 отступ меньше, но все же присутствует.

я б в данном случае эмулировал бы растягивание.

если сделать так:

ul {overflow:hidden; _height:1%; list-style-type:none; background-color:orange;}

то под оперой все отлично получается, и никак не влияет на другие браузеры )))

вы видимо не читали статью, про то как разные браузер считают ширину блока.

Дело в том что ведь ширина блока не может состоять из целых значений.. всегда есть дробные.

и дело в том, что разные браузерами по разному делают округления.

к примеру IE делает округление в большую сторону, опера в свою очередь в меньшую.

FF насколько я помню, не округляет, а устанавливает дробное значение элементу ))

вот тут почитайте подробнее, пожалуйста, http://habrahabr.ru/blog/webdev/34955.html

Deacon · August 3, 2008

Благодарю за разъяснения! Пониммаю, почему "Firefox's true!"

Sign In

Прыгающие блоки в IE

Question

Deacon

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Deacon

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information