Верстка CSS DIV. Помогите!

1

horoose

19 февраля 2009, 12:07

1371

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

Помогите решить.

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

Код:

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Посуточная аренда квартир Петербург</title>

</head><body>

<div id="news"> НОВОСТИ</div>

</div>

</div>

<div id="copyring">Санкт-Петербург<br>Design by ProF@N</div>

</div>

</body></html>

Код СSS:

<!--

HTML {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}

BODY {PADDING-RIGHT: 0px;

margin: 0px auto; width: 1020px;

PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #f0f0f0; FONT-SIZE: 11px; BACKGROUND: #555; PADDING-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #dedede; SCROLLBAR-SHADOW-COLOR: #f0f0f0; COLOR: #555; SCROLLBAR-3DLIGHT-COLOR: #f0f0f0; SCROLLBAR-ARROW-COLOR: #000000; PADDING-TOP: 0px; SCROLLBAR-DARKSHADOW-COLOR: #f0f0f0; SCROLLBAR-BASE-COLOR: #f0f0f0; TEXT-ALIGN: center; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal;}

#menu_top {width: 770px; text-align: center; vertical-align: top;}

#th1 {background-image: url(images/Sub_1.gif); height: 22px; font-size: 11px; font-weight: bold; color: #AEBCE9; text-transform: uppercase; padding-top: 10px; padding-right: 62px; text-transform: uppercase;}

#th2 {background-image: url(images/Sub_btn.gif); height: 20px; padding-top:3px; padding-right: 45px; padding-bottom: 0px;}

#th3 {background-image: url(images/Sub_2.gif); height: 23px; font-weight: bold; color: #AEBCE9; padding-right: 62px; text-align: right; text-transform: uppercase; padding-top: 9px;}

#info {padding-right: 30px; BORDER-bottom: #fff 1px solid; padding-bottom: 3px; padding-top: 2px;}

#reclama {padding-right: 55px; padding-bottom: 3px; padding-top: 3px;}

#logo {font-size: 14px; font-weight: bold; color: #4463C4; padding-top: 36px; padding-left: 10px; text-transform: uppercase;}

#page {BACKGROUND: #fCf; left-padding:20%; width: 1020px; TEXT-ALIGN: left;

}

#rightcol {background: #121; FLOAT: right; MARGIN: 376px 0px 0px 0px; WIDTH: 805px; BACKGROUND-COLOR: #DDD; padding-right: 0px; padding-bottom: 15px;}

#leftcol {background: #33a; TEXT-ALIGN: right; FONT-SIZE: 11px; FLOAT: left; MARGIN: 376px 0px 0px 0px; WIDTH: 215px; PADDING-left: 0px; padding-bottom: 15px; TEXT-ALIGN: right;}

#context {Clear:both; background: #CCC; width: 805px; height: 800px; font-family: Arial, Helvetica, sans-serif; COLOR: #000; font-size: 12px; text-align: justify;}

#news {background: #ADA; float: right; min-width: 223px;width: 25%; height: 600px; font-family: Arial, Helvetica, sans-serif; COLOR: #100; font-size: 15px; text-align: justify; MARGIN: 0px 0px 0px; 0px;}

#main {background: #ADC; float: left; min-width: 582px; width:70%; height: 600px; font-family: Arial, Helvetica, sans-serif; COLOR: #100; font-size: 15px; text-align: justify; MARGIN: 0px 0px 0px; 0px;}

#header {CLEAR: both; POSITION: absolute; TOP: 0px; height: 122px; BACKGROUND: #6f88d8; width: 1020px; ;BORDER-TOP: #555 5px solid; MARGIN: 0px 0px 0px; 0px; padding: 0px 0px 0px; 0px; }

#menutop {CLEAR: both; POSITION: absolute; TOP: 91px; height: 31px; width: 770px; TEXT-ALIGN: center; background-color: #6f88d8;}

#menu {FONT-SIZE: 13px; PADDING-TOP: 0px; FONT-FAMILY: Arial; height: 55px; width: 770px; BACKGROUND-IMAGE: url(images/Bot_Adr_bg.gif);}

#copyring {TEXT-ALIGN: left; FONT-SIZE: 11px; FLOAT: left; MARGIN: 0px 0px 0px; WIDTH: 205px; height: 50px; PADDING-left: 10px; PADDING-top: 5px; BACKGROUND-IMAGE: url(images/Bot_Adr_ug.jpg); background-repeat: no-repeat; background-position: right;}

#bottommenu {FLOAT: right; WIDTH: 545px; height:38px; BACKGROUND-IMAGE: url(images/BOT_BG.gif); padding-top: 17px; padding-right: 10px; margin: 0px;}

#footer {CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center; BORDER-TOP: #555 1px solid; BORDER-bottom: #555 5px solid; background: #ddd;}

#border {border: #000 1px solid; width: 170px; height: 128px;}

.imglogo {TEXT-ALIGN: left; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-top: 15px; border: 0px; FLOAT: left; }

a {color:#b64545;}

a:hover {color:#a21c1c;}

.sublnk {font-size: 11px; font-weight: bold; color: #5164AD; text-decoration: none;}

.sublnk:hover {COLOR: #FFF; TEXT-DECORATION: underline; font-size: 11px; font-weight: bold;}

.bottomlnk {COLOR: #718ad9; FONT-SIZE: 10px; TEXT-DECORATION: none; text-transform: uppercase;}

.bottomlnk:hover {COLOR: #11366F; FONT-SIZE: 10px; TEXT-DECORATION: underline; text-transform: uppercase;}

.menulnk {COLOR: #FFF; FONT-SIZE: 11px; font-weight: bold;}

.menulnk:hover {COLOR: #fff; FONT-SIZE: 11px; font-weight: bold;}

.maplnk {COLOR: #11366F; FONT-SIZE: 10px; TEXT-DECORATION: none; text-transform: uppercase;}

.maplnk:hover {COLOR: #11366F; FONT-SIZE: 10px; TEXT-DECORATION: underline; text-transform: uppercase;}

h1 {font-size: 14px; font-weight: bold; margin: 0px; text-transform: uppercase; color: #0B2063; white-space: nowrap; padding-top: 8px; padding-left: 8px; padding-bottom: 10px;}

h2 {font-size: 12px; font-weight: bold; margin: 0px; text-transform: uppercase; color: #0B2063; padding-top: 10px;}

p {margin-top: 10px;}

.bold {font-weight: bold;}

#page2 {BACKGROUND: #fff;}

#way {PADDING-TOP: 15px;}

#small {font-size: 11px;}

li {line-height: 150%;}

//-->

</STYLE>

149

Sentoro

19 февраля 2009, 14:01

#1

У вас стили в самой странице чтоли? :) и что мешает вставить хак для ИЕ?

Продается СДЛ на тему инвестирования (http://www.telderi.ru/ru/viewsite/903457)

H

1

horoose

19 февраля 2009, 14:41

#2

нет . Стили в отдельном файле. Просто я код в пост вставил.

А какой хак есть для IE? Просто я не специалист, перерыл уже кучу документации, в результате либо шапка глючит либо колонки сдвигаются. Не знаю что делать.

[Удален]

19 февраля 2009, 14:55

#3

<!--[if lte IE 6]>

коды коды

<![endif]-->

вместо 6 подставить нужную версию, вместо le любой оператор (lt <, gt >, lte <=, gte >=, e или eq = )

H

1

horoose

19 февраля 2009, 15:46

#4

neolord:


вместо 6 подставить нужную версию, вместо le любой оператор (lt <, gt >, lte <=, gte >=, e или eq = )

ЧТО ЭТО????? Где можно прочитать про хака для div в IE.

[Удален]

19 февраля 2009, 16:28

#5

это хак для IE =) ну не совсем хак конечно но работает

Вставляете этот код в <head>, а внутри скобок пишете <style> и объявляете специфические для данного браузера стили

например

<!--[if lte IE 6]>

<style>

a

{

color:#FFFFFF;

}

</style>

<![endif]-->

в ие 6 и ниже ссылки будут белыми. Если для седьмого и ниже - вместо 6 ставите 7

Можно воспользоваться таким вот

.class

{

property:value;

//property:value;

_property:value;

}

вторая строчка выполнится только в ие 7 и 6, а третья только в ie 6.

Что делать, чтобы попасть в ответы Google Bard

Курс биткоина превысил $50 тысяч