float. Баги отображения при уменьшении размера окна IE.

WM · August 1, 2007

<!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" />
<title>Байки из склепа</title>
<style type="text/css">
body {
 font-family: Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
 margin: 0px; /* Отступы для браузера IE */
 padding: 0px; /* Отступы для браузера Firefox */
}
h1 {
 font-size: 36px; /* Размер шрифта */
 font-weight: bold; /* Жирное начертание */
 margin: 0px; /* Убираем отступы */
 color: #fc6; /* Цвет текста */
}
h2 {
 margin-top: 0px; /* Убираем отступ сверху */
}
#head { /* Верхний блок */
 background: #0080c0; /* Цвет фона */
 padding: 10px; /* Поля вокруг */
}
#menu { /* Левая колонка */
 float: left; /* Обтекание справа */
 border: 2px solid #45777E; /* Параметры рамки вокруг */
 width: 200px; /* Ширина колонки */
 padding: 5px; /* Поля вокруг текста */
 margin: 10px 10px 20px 5px; /* Значения отступов */
 background: #89B7BE;
}
#menu div {
 padding: 2px; /* Поля вокруг ссылок */
}
#menu a { 
 display: block; /* Отображать ссылку как блок */
 width: 190px; /* Ширина ссылки для браузера IE */
 spadding: 2px; /* Поля вокруг ссылок */
 margin: 1px; /* Отступы вокруг */
 font-size: 90%; /* Размер текста */
 text-decoration: none; /* Убираем подчеркивание текста */
}
#menu a:hover { 
 background: #faf3d2; /* Цвет фона */
 border: 1px dashed #634f36; /* Добавление пунктирной рамки */
 margin: 0px; /* Убираем поля */
}
#content { /* Правая колонка */
 margin: 10px 5px 20px 225px; /* Значения отступов */
 padding: 20px; /* Поля вокруг текста */
 border: 2px solid #796626; /* Параметры рамки */
 background: #E8DDB5;
}
#line {
 border-bottom: 1px groove #333; /* Линия между ссылками */
}
#foot { /* Нижний блок */
 background: #333; /* Цвет фона */
 padding: 5px; /* Поля вокруг текста */
 color: #fff; /* Цвет текста */
 clear: both; /* Отменяем обтекание */
}
#inner {
 background: #4EA580;
 width: 560px;
 text-align: center;
 color: #FFF;
}
#text-content {
 border: 2px solid #2950B6;
}
p {
 border: 1px solid #000;
}
</style>
</head>
<body>

<div id="head">
<h1>Умеренно длинный заголовок страницы</h1>
</div>
<div id="menu">
<div><a href="link1.html">Все байки</a></div>
<div><a href="link2.html">Байки по автору</a></div>
<div><a href="link3.html">Байки по теме</a></div>
<div id="line"></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
<div><a href="link4.html">Популярные разделы</a></div>
<div><a href="link5.html">Последние байки</a></div>
</div>

<div id="content">
 <h2>Какой-то подзаголовок страницы </h2>


 <div id="text-content">
 <p>Утром, при ярком солнечном свете, вс? выглядело совсем не так и мрачно,
 как планировалось, а даже наоборот. От свечей остались одни пот?ки,
 смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо
 сохранились только рисунки мелом, но и они были скорее прикольные, чем злые
 и загадочные. Дети с неподдельным интересом разглядывали изображения, но
 без тени тех чувств, которые испытали взрослые ночью при луне.</p>
 <p>Тем не менее, оказался один человек, на которого работа произвела большое
 впечатление, - сторож лагеря. Дн?м он подош?л к автору .</p>
 <p>- Ваша работа? - начал сторож, кивая в сторону площади.

 - А что такое? 

 - Ну, как же... Тут кровь..., перья птицсь только рисунки мелом, но и они были скорее прикольные, чем злыеи загадочные. Дети с неподделные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейньны м?ртвой..., знаки какие-то страшные
 нарисованы..., а у вас вс? же дети маленькие, они испугаться могут...</p>
 <div id="inner">560px</div>
 </div>
</div>
<div id="foot">
Copyright © 2006 Влад Мержевич 
</div>
</body>
</html>

Взял из статьи на сайте "Две колонки, навигация слева" код, чтобы немного доработать и показать вылезающие баги.

Итак, главный баг, кот. меня очень бесит, заключается в том, что если добавить в левый float-меню-блок немного контента, а в правый контент-блок какой-нибудь достаточно широкий элемент (фотография, div с width: 560px, как в примере, и т.п.), то, при уменьшении размера окна в IE, контент-блок "разорв?тся" и див-560px перескочит вниз. Прич?м, див-560px перескочит в то место, как если бы он находился под меню-блоком, но сдвинутый вправо.

Ежели див-560px будет находится ниже нижней границы меню-блока - вс? будет нормально (до тех пор, пока при уменьшении не будет достигнут очередной элемент, кот. IE не может перенести на след. строчку).

Как побороть эту дурь (если это вообще возможно)???

WM · August 2, 2007

Неужели никто не сталкивался с этим?

oknechirik · August 10, 2007

если еще интересно как побороть эту дурь в ие предлагаю прочесть статью http://alistapart.com/articles/multicolumnlayouts, где почти все проблемы с прыгучестью, а также на artlebedev.ru тож есть статья про прыгучесть - и никаких min-width

в общем ищите тщательнее

WM · August 11, 2007

oknechirik

Спасибо, почитаю.

IrbIz · August 12, 2007

Я тебе сейчас перечислю достаточно большие минусы в твоем коде:

во-первых, если у тебя в верхушке твоего сайта существует больше чем один div засовывай их в "контейнеры"(отдельный div) это поможет тебе избежать в дальнейшем лишних нервотрепок с расподанием сайта, при сужении окна, по хорошему у тебя должно быть 3 основнх дива-контейнера: верхушка(лейб и меню, еси оно распологается горизонтально); средний контейнер(где контент и менюшка, если она вертикальная и находится на уровне контента); и футер(все то что у тебя идет после контента: контактная информация и т.п.)

во-вторых, если у тебя сайт фиксированый по ширине так и задавай, и все где в стилях задавай hieght в зависимости от ситуации или auto или 100% ели он растягивается по высоте

а по твоему вопросу, прочитай все это и сделай как я написал, и для уверенности можешь еще поставить один div со стилями position: relative; и задать ему минимальную ширину твоего сайта, этот див небудет мешать остальным, и при сужении не будет давать окну сужаться меньше своего размера, а по хорошему, делай каркас из таблицы, разбивай е? на три части как я тебе говорил в первом замечании, ставь ей фиксированую ширину ивысоту 100%,и фиксированную ширину и высоту верхней и нижней ячейки, а средний оставляй без размера, он будет сам расширятся от контента

Sign In

float. Баги отображения при уменьшении размера окна IE.

Question

WM

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

WM

Link to comment

Share on other sites

oknechirik

Link to comment

Share on other sites

WM

Link to comment

Share on other sites

IrbIz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information