вычисление ширины в ie6

Destrifer · March 9, 2009

Почему-то, ie6 неправильно считает ширину блоков. В остальных браузерах нормально, в ie6 приходится использовать хак ((

<!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=windows-1251" />
<style>
html {
width:100%;
height:100%;
}

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

body {font-size:10pt; font-family:Arial;background:#000;}

.bot{
padding:0 10px;
background:blue;
height:56px;
width:100%;
}

.clear {clear:both;}

.center {
background: red;
width:95%;
_width:94%;
padding:20px;
margin:10px auto;
margin-bottom:10px;
}

.blok {
width:18%;
float:left;
}

.blok2 {
width:18%;
float:left;
margin-left:3.5%;
_margin-left:2%;
}

.blok3 {
width:30%;
float:left;
margin-left:3.5%;
_margin-left:2%;
}

.blok4 {
width:22%;
float:left;
margin-left:3.5%;
_margin-left:2%;
}

.col {
padding:10px;
background: green;
width:100%;
}
</style>
</head>
<body>
<div class='center'>
		<div class='blok'>
			<div><div class='col'>
			<div class="blok_zag">123</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et nisl. Pellentesque rhoncus, tellus eu feugiat tempor, purus nibh sodales ante, porttitor commodo nulla massa vel justo. Etiam quis leo et enim scelerisque venenatis. Morbi ligula. Proin sed mauris. Proin feugiat mi in odio. Suspendisse potenti. Duis eget augue vitae felis posuere tempor. Etiam volutpat posuere turpis. Curabitur et lacus. Maecenas pede dui, consequat in, commodo a, dictum eu, leo. Nunc erat. Etiam volutpat. Nam id mi vel massa scelerisque eleifend. Aliquam id mauris. Quisque eget libero sit amet augue mattis tristique.
			</div>
			<div class='bot'></div></div>
		</div>
		<div class='blok2'>
			<div><div class='col'>
			<div class="blok_zag">123</div>
			<ul>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et nisl. Pellentesque rhoncus, tellus eu feugiat tempor, purus nibh sodales ante, porttitor commodo nulla massa vel justo. Etiam quis leo et enim scelerisque venenatis. Morbi ligula. Proin sed mauris. Proin feugiat mi in odio. Suspendisse potenti. Duis eget augue vitae felis posuere tempor. Etiam volutpat posuere turpis. Curabitur et lacus. Maecenas pede dui, consequat in, commodo a, dictum eu, leo. Nunc erat. Etiam volutpat. Nam id mi vel massa scelerisque eleifend. Aliquam id mauris. Quisque eget libero sit amet augue mattis tristique.
			</ul>
			</div>
			<div class='bot'></div></div>
		</div>
		<div class='blok3'>
			<div><div class='col'>
			<div class="blok_zag">123</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et nisl. Pellentesque rhoncus, tellus eu feugiat tempor, purus nibh sodales ante, porttitor commodo nulla massa vel justo. Etiam quis leo et enim scelerisque venenatis. Morbi ligula. Proin sed mauris. Proin feugiat mi in odio. Suspendisse potenti. Duis eget augue vitae felis posuere tempor. Etiam volutpat posuere turpis. Curabitur et lacus. Maecenas pede dui, consequat in, commodo a, dictum eu, leo. Nunc erat. Etiam volutpat. Nam id mi vel massa scelerisque eleifend. Aliquam id mauris. Quisque eget libero sit amet augue mattis tristique.
			<p class='clear'>
			</div>
			<div class='bot'></div></div>
			<p class='clear'>
		</div>
		<div class='blok4'>
			<div><div class='col'>
			<div class="blok_zag">123</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et nisl. Pellentesque rhoncus, tellus eu feugiat tempor, purus nibh sodales ante, porttitor commodo nulla massa vel justo. Etiam quis leo et enim scelerisque venenatis. Morbi ligula. Proin sed mauris. Proin feugiat mi in odio. Suspendisse potenti. Duis eget augue vitae felis posuere tempor. Etiam volutpat posuere turpis. Curabitur et lacus. Maecenas pede dui, consequat in, commodo a, dictum eu, leo. Nunc erat. Etiam volutpat. Nam id mi vel massa scelerisque eleifend. Aliquam id mauris. Quisque eget libero sit amet augue mattis tristique.
			</div>
			<div class='bot'></div></div>
			<div align='center' style='padding-bottom:10px;'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et nisl. Pellentesque rhoncus, tellus eu feugiat tempor, purus nibh sodales ante, porttitor commodo nulla massa vel justo. Etiam quis leo et enim scelerisque venenatis. Morbi ligula. Proin sed mauris. Proin feugiat mi in odio. Suspendisse potenti. Duis eget augue vitae felis posuere tempor. Etiam volutpat posuere turpis. Curabitur et lacus. Maecenas pede dui, consequat in, commodo a, dictum eu, leo. Nunc erat. Etiam volutpat. Nam id mi vel massa scelerisque eleifend. Aliquam id mauris. Quisque eget libero sit amet augue mattis tristique.
			</div>
			<div><div class='col'>
			<div class="blok_zag">123</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla et nisl. Pellentesque rhoncus, tellus eu feugiat tempor, purus nibh sodales ante, porttitor commodo nulla massa vel justo. Etiam quis leo et enim scelerisque venenatis. Morbi ligula. Proin sed mauris. Proin feugiat mi in odio. Suspendisse potenti. Duis eget augue vitae felis posuere tempor. Etiam volutpat posuere turpis. Curabitur et lacus. Maecenas pede dui, consequat in, commodo a, dictum eu, leo. Nunc erat. Etiam volutpat. Nam id mi vel massa scelerisque eleifend. Aliquam id mauris. Quisque eget libero sit amet augue mattis tristique.
			</div>
			<div class='bot'></div></div>
		</div>
		<p class='clear'>
</div>
</body>
</html>

p.s. в FF что-то со шрифтом лучше смотреть в Chrome или Opera.

VooFoo · March 9, 2009

ппц сколько лишнего в коде...

почисти, легче разбираться будет :lol:

P.S.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

об этом тоже советую почитать! не просто так строка ставится!

http://validator.w3.org/ -здесь тебе покажут валидность *умничаю* :huh:

Edited March 9, 2009 by VooFoo

Destrifer · March 9, 2009

ппц сколько лишнего в коде...

- лишнего не так уж и много... :lol:

Это вообще-то выдран кусок, чтоб лишним не зашломлять...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
об этом тоже советую почитать! не просто так строка ставится!
http://validator.w3.org/ -здесь тебе покажут валидность *умничаю*

Насчет валидатора это все конечно прекрасно, однако щас не до этого. :huh:

Доктайп убрал - в ie картина изменилась но все-же не так как нужно.

Edited March 9, 2009 by Destrifer

VooFoo · March 9, 2009

Насчет валидатора это все конечно прекрасно, однако щас не до этого.
Доктайп убрал - в ie картина изменилась но все-же не так как нужно.

посчитай проценты у себя нормально! если margin и padding на 0 выставить то колонка на место становится!

Вообще не советую борщить с процентами! Основа в процентах, отступы в px думаю удобнее.

Destrifer · March 9, 2009

посчитай проценты у себя нормально! если margin и padding на 0 выставить то колонка на место становится!
Вообще не советую борщить с процентами! Основа в процентах, отступы в px думаю удобнее.

Спасибо. Хотя вроде - :lol:

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

Завтра буду рыть проблему.

Nekromancer · March 10, 2009

а зачем убирать вообще доктайп? если строгий тебе не подходит поставь облегчённый...

VooFoo · March 10, 2009

а зачем убирать вообще доктайп? если строгий тебе не подходит поставь облегчённый...

Да. Доктайп transitional мешать совсем не будет!

Колос · March 11, 2009

Может здесь это и не в тему, но ИЕ6, например, растягивает блоки, если слова в них курсивом.

Sign In

вычисление ширины в ie6

Question

Destrifer

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

VooFoo

Link to comment

Share on other sites

Destrifer

Link to comment

Share on other sites

VooFoo

Link to comment

Share on other sites

Destrifer

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

VooFoo

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information