Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Уежают DIVы

Автор: CmndrAlexGreen 31.3.2011, 20:39

Уважаемые профессионалы, помогите разобраться:
Делаю сайт на дивах, вроде как все более менее правильно, делаю-делаю, смотрю его периодически в браузере Chrome который показывает все правильно и логично (у меня в линуксе он единственный)).
Но тут как-то с флешки загрузился на работе на старом ХР в IE5 или 6 (помоему), а там третий верхний див якобы не вмещается в строке и переносится на новую строку. Общую ширину делал немного шире, как раз на случай если какой нибудь браузер решит добавить пару пикселей.

html

Код


<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>sait</title>
</head>
<body><div id="box">

<div id="logo">sait</div>
            <div class="abox240"><ul>
                        <li><a href="" title="">Оглавление</a></li>
                        <li><a href="" title="">Карта сайта</a></li>
                        <li><a href="" title="">О сайте</a></li>
                        <li><a href="" title=""></a></li>
                    </ul></div>
<div class="abox240"><img src="img/poisk.gif" alt="" /></div>
<div class="bbox240"><ul>
                        <li class="name1"><a href="" title=""></a></li>
                        <li><a href="" title=""></a></li>
                    </ul></div>
<div class="bbox240"><ul>
                        <li class="name1"><a href="" title=""></a></li>
                        <li><a href="" title=""></a></li>                    
                    </ul></div>
<div class="bbox240"><ul>
                        <li class="name1"><a href="" title=""></a></li>
                        <li><a href="" title=""></a></li>                    
                    </ul></div>
<div class="bbox240"><ul>
                        <li class="name1"><a href="" title=""></a></li>
                        <li><a href="" title=""></a></li>
                    </ul></div>
<div class="bbox240"><ul>
                        <li class="name1"><a href="" title=""></a></li>
                        <li><a href="" title=""></a></li>
                    </ul></div>
<div class="bbox240"><ul>
                        <li class="name1"><a href="" title=""></a></li>
                        <li><a href="" title=""></a></li>
                    </ul></div>


<div id="footer"><!начало подвала>
<span id="copyr">sait © 2011</span>
</div><!конец подвала>

    </div><!конец бокса>
</body>
</html>

CSS

Код


body {
padding:0; 
margin:0; 
background:#f8f8f8; 
font-family:arial, verdana, sans-serif; font-size:76%; 
color:#000; 
text-align:center;
}


#box {
width:1000px; 
margin:0 auto;
}

#logo {
width:490px;
height:100px;
background:#fff;
margin:5px;
float:left; background:url(img/logo490.gif) no-repeat;
}

.abox240 {
background:#fff;
width:240px; 
height:100px;
margin:5px;
float:left; background:url(img/abox240.gif) no-repeat;
}

.bbox240 {
background:#fff;
width:240px; 
height:200px;
margin:5px;
float:left; background:url(img/a3box240.gif) no-repeat;
}

.bbox240 ul {
padding-top: 14px;
padding-right: 14px;
padding-bottom: 0px;
padding-left: 14px;
line-height: 18px;
}

#footer    {    clear:both; width:1020px; height:25px; 
    }
#copyr    {    margin-left:20px; font-size: .7em;
    }

Помогите советом, как победить старый IE (при том что в новом все отображается нормально)

Автор: Ctulhy 1.4.2011, 10:01

Ты бы код хоть как-то обработал или верстку в архиве залил, догадываться где и что не работает не прикольно, особенно при неправильном отображении страницы.

У тебя IE6, IE 5.5 уже совсем не в моде.

Смотри на margin-left и на margin-right (cправедливо и для padding) у левого и правого блока соответсвенно. У IE6 есть загадочная особенность удваивать отступы. Бороться с этим просто: если у тебя margin:0 0 0 20px; пишешь вслед за ним _margin:0 0 0 10px;

Так же можешь почитать про комментарии для IE и подключить специальный css файл для IE6.

И кстати, недавно майкрасофт (у них сайт не корректно отображается в IE6) все же убедительно попросил разработчиков не поддерживать IE6, н.о к сожалению реалии пока что иные и частенько приходится писать кучу хаков для осла.

Автор: mcTep 1.4.2011, 12:53

Пропишите всем плавающим элементам display:inline

Автор: SelenIT 1.4.2011, 15:23

Еще от убегания блока с float:left часто помогает clear:right его левому соседу.

Автор: CmndrAlexGreen 1.4.2011, 22:18

Да вероятно это ie6, я их не различаю, поскольку пользуюсь 1-2 раза в год, а так чисто случайно ин html свой запустил и увидел такое безобразие.

Непонял(( margin:0 0 0 20px; ,а следом margin:0 0 0 10px; - какое из них будет исполнятся то(.

SelenIT, мне кажется clear:right не поможет и не уместен он тут, блоки просто по коду идут один за другим с обтеканием с лева.

Автор: SelenIT 5.4.2011, 19:06

Цитата(CmndrAlexGreen @ 1.4.2011, 22:18

)

и не уместен он тут

Ну, вреда от него по логике не будет (если справа нет элементов с float:right, конечно... но вроде их нет;). А польза в IE6, вообще отличающемся весьма своеобразной логикой — http://cssing.org.ua/2008/08/29/float-mess/#comment-13155...

Автор: systemIV 6.4.2011, 11:54

Прошу прощение у топикавтора, не хотел создавать отдельную тему.
У меня тоже проблема с DIVами. Предположем в одном блоке у меня расположены 2 блока, один под другим. Верхний залит бэкграундом и по центру написан текст. В нижнем тоже самое. Так вот. С фоном всё в порядке, а текст если выравнивать МАРГИНами остаётся в притык с верхним краем нижнего блока. Если сделать выделение в Хроме, то весь отступ уходит до текста первого блока.

Автор: mcTep 6.4.2011, 14:39

systemIV, код в студию. И подробнее задачу опишите. Не понятно, чего надо добиться

Автор: systemIV 7.4.2011, 12:55

mcTep, стояла проблема в обтекании. Сейчас выставил абсолютное позицианирование, всё нормально