2 Diva с шириной по 50% и float: left и их отображение в ie6 и ie7

[TonKhaO]

Народ еще нашел странную особенность http://shinoda.ru/bug_fix/block_test.htm

Баг в том что в шестой и седьмой версии ИЕ при ширине в 50% и с флоатом лефт (вроде бы поровну и в сумме 100%) не помещаются на одной линии. И даже вроде знаю из чего, вот решил покопать по-подробнее, итак по порядку

Я брал и скриншотил экран и замерял правильно ли браузер расчитывает ширину и вот что получилось (разрешение у меня 1280):

IE6:

Ширина окна браузера (без учета скролла и всего отсального) - 1253 px

Ширина одного блока при разрешении 1253px была равна 627px, умножаем это на 2 и получаем 1254!!! и тут уже понятно почему блоки не стоят на одной линии, итог - ИЕ неправильно посчитал половину :-(

IE7:

Все тоже самое что и в IE6

IE8:

Ширина окна браузера опять (без боковых полос обозревателя) - 1270px. Причем так как у меня страница не высокая то скроллбара заблокирована у меня нет, в ИЕ8 его убрали в таких случаях, чего не скажешь о пред Иешках

Ширина одного блока при таком разрешении браузера 635px потом опять умножаем на 2 так как у нас 2 блока по 50% и получаем магическую 1270!!!! УРА!!! то что нада.

Ребята а теперь обьясните неужели в 6 и 7 версии такой косяк происходитиз за того что там скроллбар заблокированный присутствует???

Edited September 16, 2009 by TonKhaO

[Justnewone]

Да, подобное поведение часто встречается, глюки, +/-1 px часто решает все, Первая Бета 8-й версии тоже так делала. А если правой половине сказать не лефт, а райт? Мне кажется, должно помочь.

[TonKhaO]

Да, подобное поведение часто встречается, глюки, +/-1 px часто решает все, Первая Бета 8-й версии тоже так делала. А если правой половине сказать не лефт, а райт? Мне кажется, должно помочь.

неа, видите он то правому выровнялся то темнеменее не стал в правильную ширину )))

PS: кстати а как вы ставите +/-1 то есть мне немного непонятно стоит у меня допустим в диве width: 50% я же не могу потом от этого отнять 1 пиксель ширины, типа width: 50%-1px

Edited September 16, 2009 by TonKhaO

[Justnewone]

на глаз, одному из блоков 49.9...%, как-то так.

[TonKhaO]

на глаз, одному из блоков 49.9...%, как-то так.

да, впринципе так можно было бы сделать если бы не одно большое НО, опера десятая точно не поддерживает дробные проценты, только что проверил

[hf3]

ставь 49. другого выхода В общем то нет.

[TonKhaO]

ставь 49. другого выхода В общем то нет.

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

PS: кстати как время будет обследую еще такую проблему на тему если бы эти 2 блока были бы не прямиков в body а скажем в другом блоке, вот тогда тоже интересно как они себя поведут, ибо у меня были помоему схожие проблемы с этим делом

Edited September 16, 2009 by TonKhaO

[Justnewone]

Стили для разных браузеров можно задавать индивидуально. Хаками и т.д.

[TonKhaO]

Стили для разных браузеров можно задавать индивидуально. Хаками и т.д.

Предлагаете условные комментарии?

Впринципе это конечно вариант сделать с помощью них скажем по 49% для обоих блоков, но у нас они так и не получатся тык впритык

Edited September 16, 2009 by TonKhaO

[mishka]

а если

div{
	width:50%;
	height:50px;
	float:left;
	margin:0 0 0 -1px;
}

[Justnewone]

Предлагаете условные комментарии?

Впринципе это конечно вариант сделать с помощью них скажем по 49% для обоих блоков, но у нас они так и не получатся тык впритык

второму можно не задавать флоат, а дать, допустим, левый маргин в 50%. как вариант.

[TonKhaO]

а если

div{
	width:50%;
	height:50px;
	float:left;
	margin:0 0 0 -1px;
}

можно такое взять на заметку, НО не всегда это подойдет, мы ведь по факту можем сделать либо для левого блока отриц левый отступ, тем самым он у нас на пиксель вообще за экран выйдет, либо же более реальный вариант для правого блока отриц левый маргин и тем самым правый блок "налезет" на пиксель на левый, беру на заметку

второму можно не задавать флоат, а дать, допустим, левый маргин в 50%. как вариант.

можно но теперь ИЕ6 что почему то сделал маргин у павого блока больше пикселей на 3-4

[hf3]

Если так принципиально - то табилицы.

[TonKhaO]

Если так принципиально - то табилицы.

давайте будем культурными, таблицы это вообще в самую последнюю очередь ибо мы же все знаем что таблицы - для данных, не для верстки дезайна

[mishka]

можно но теперь ИЕ6 что почему то сделал маргин у павого блока больше пикселей на 3-4

Да все правильно в ие6 появится отступ в 3 пикселя. Поэтому предлагаю такой код:

<!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">
	<!--
	body{
		margin:0;
	}
	.left{
		float:left;
		width:50%;
		height:50px;
		background:#ec7700;
	}
	* html .left{
		margin:0 -3px 0 0;
	}
	.right{
		overflow:hidden;
		height:50px;
		background:#52c61b;
	}
	-->
	</style>
</head>
<body>
	<div class="left">left</div>
	<div class="right">right</div>
</body>
</html>

[Justnewone]

можно но теперь ИЕ6 что почему то сделал маргин у павого блока больше пикселей на 3-4

Надо блоку с флоат теперь задать дисплей инлайн только для IE6

[hf3]

таблицы это вообще в самую последнюю очередь ибо мы же все знаем что таблицы - для данных, не для верстки дезайна

Это в идеале … Реальность прозаична.

Вообще т в идеале это легко строилось бы

<div style="display:table; border:1px black solid;height:400px; width:100%">

<div style="display:table-cell; background-color:purple; height:100%; width:50%"> left</div>

<div style="display:table-cell; background-color:silver; height:100%; width:50%"> right</div>

</div>

[TonKhaO]

Надо блоку с флоат теперь задать дисплей инлайн только для IE6

вряд ли, у левого блока нет маргинов и поэтому display: inline и не нужен, но я поставил и тем не менее проверил - не помогло, словно у правого блока отступ не 50% а примерно 51%

Да все правильно в ие6 появится отступ в 3 пикселя. Поэтому предлагаю такой код:

всмысле правильно? из-за чего отступ в 3 пикселя?

Это в идеале … Реальность прозаична.

Вообще т в идеале это легко строилось бы

увы мы же знаем что display: table и display: table-cell ИЕ6 не держит

[Justnewone]

всмысле правильно? из-за чего отступ в 3 пикселя?

Это знаменитый трехпиксельный баг, к слову сказать, часто он косвенно говорит о кривой верстке.

[hf3]

<div style="border:1px black solid;height:400px; width:100%">

<div style=" background-color:purple; height:100%; width:50%; float:left;"> left</div>

<div style=" background-color:silver; height:100%; width:50%; float:right;"> right</div>

</div>

А если так?

[TonKhaO]

самое что ржачное баг то выскакивает только при значениях 50% на 50%, попробуйте любие другие скажем 49% на 51% или 30 % на 70% ВСЕ БУДЕТ ИДЕАЛЬНО для 6 и 7 версии, пипец ))) мозг взорван

[Justnewone]

самое что ржачное баг то выскакивает только при значениях 50% на 50%, попробуйте любие другие скажем 49% на 51% или 30 % на 70% ВСЕ БУДЕТ ИДЕАЛЬНО для 6 и 7 версии, пипец ))) мозг взорван

Еще смешнее то, что при изменении ширины браузера глюк периодически исчезает на каких-то промежутках.

[s0rr0w]

Еще смешнее то, что при изменении ширины браузера глюк периодически исчезает на каких-то промежутках.

В IE6 был такой баг. Промежуток примерно в 2 пикселя. Такое впечатление, то индусы в одном месте округляли в большую сторону, а в другой - в меньшую.

[psywalker]

  
<style type="text/css">
*{margin:0; padding: 0;}
.a,.b { width: 50%; float: left;}
.a { margin-right: -100%; background: red;}
.b { margin-left: 50%; display: inline; background: blue; }
  </style>
</head>
<body>
<div class="a">Left</div>
<div class="b">Right</div>
</body>

Edited September 17, 2009 by psywalker

[mishka]

<style type="text/css">

*{margin:0; padding: 0;}

.a,.b { width: 50%; float: left;}

.a { margin-right: -100%; background: red;}

.b { margin-left: 50%; display: inline; background: blue; }

</style>

</head>

<body>

<div class="a">Left</div>

<div class="b">Right</div>

</body>

При ресайзе окна блоки не падают, но появляется горизонтальный скролл в ие6-7

[psywalker]

При ресайзе окна блоки не падают, но появляется горизонтальный скролл в ие6-7

А так что скажешь медведь ?

<!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>
<style type="text/css">
*{margin:0; padding: 0;}
.a,.b { width: 50%; float: left;}
.a { margin-right: -100%; background: red;}
.b { margin-left: 50%; display: inline; background: blue; }
</style>
</head>

<body>
<div style=" width: 100%; overflow: hidden;">
	<div class="a">Left</div>
	<div class="b">Right</div>
</div>
</body>
</html>

Edited September 18, 2009 by psywalker