В ие все в норме а в остальные меня не любят

Вид для печати

26.09.2007, 15:24
Cheese

Есть такой шаблон:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ****"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ****<title></title> </head> <style type="text/css"> body{**** ****width:100%; ****height: 100%; ****margin-left: 0px; ****margin-top: 0px;} /******HEADER***********/ .header {****background: url(../im/hed_r.jpg) no-repeat top right; ****font-family: Arial, Helvetica, sans-serif; ****vertical-align: top; ****width: 100%; ****height: 275px; ****display: block;} /********Блок навигационного меню***********************************/ .dmenu {****width: 300px; ****height: auto; ****vertical-align: top; ****float: left; ****background-color: #32CD32;} /******Контейнер для FrauxColumns**********************/ .contbdy { background: *url(../im/razd.jpg) repeat-y top left;**** vertical-align: top; display: block; width: 100%; height: auto; background-color: #80ff00; } /****Блок контента***************************************************/ .scont { ****font-family: Arial, Helvetica, sans-serif; ****font-size: 13pt; ****text-align: justify; ****vertical-align: top; ****height: auto; ****padding-left: 20px; ****padding-right: 10px; ****display: block; ****margin-left: 300px; ****overflow: hidden; ****background-color: #ff66ff; } .blt { ****display: block; ****width: 656px; ****height: 250px; ****vertical-align: top; ****float: none; ****background-color: #ffffcc; } .mblock1 { ****width: 190px; ****height: 680; ****vertical-align: top; ****padding-left: 20px; ****padding-right: 20px; ****float: left; ****background-color: #333399; } </style> <body> <div class="contbdy"> <div class="dmenu" > Тут навигация </div> <div class="scont"> <div class="blt" align="right"> ****Тут несколько дивов со всякой фигней </div> <div class="mblock1"> Тут полоса с картинками </div> <div align="justify" class="content"> Тут типа контент </div></div></div></div> </body> </html>

С ИЕ этот шаблон дружит а вот нормальные браузеры его уродуют как бог черепаху. Вроде бы все с ним в порядке...Непонимаю... Может кто подскажет что же все-таки не правильно?
...Хоть и выкинул все лишнее всеравно много букв получилось [Only registered and activated users can see links. Click Here To Register...]
26.09.2007, 15:40
Aykroyd

Подход неправильный. Необходимо делать все наоборот. Сначала добиваемся, чтобы во всех нормальных браузерах было все в норме, а вот потом начинаем разбираться с IE и задаем вопросы...
26.09.2007, 18:36
Cheese

Цитата:

Originally posted by Aykroyd@Sep 26 2007, 13:40
Подход неправильный....
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Хорошо, меняем подход....
Тот же шаблон только

Код:

body{****width:1000px; ****height: 100%; ****min-height: 100%; ****min-width: 1000px; ****margin-left: 0px; ****margin-top: 0px;} .header {****background: url(../im/hed_r.jpg) no-repeat top right; ****font-family: Arial, Helvetica, sans-serif; ****vertical-align: top; ****width: 100%; ****height: 275px; ****display: block;} .dmenu {****width: 300px; ****height: 100%; ****vertical-align: top; ****float: left; background-color: #32CD32;} .contbdy { background-color: #80ff00; vertical-align: top; display: block; width: 1000px; height: auto; overflow: hidden; } .scont { ****font-family: Arial, Helvetica, sans-serif; ****font-size: 13pt; ****text-align: justify; ****vertical-align: top; ****height: auto; ****padding-left: 20px; ****padding-right: 10px; ****display: block; ****overflow: hidden; ****width:auto; background-color: #ff66ff; } .blt { display: block; width: 656px; height: 250px; vertical-align: top; background-color: #ffffcc; } .mblock1 { ****width: 190px; ****height: 680; ****vertical-align: top; ****padding-left: 20px; ****padding-right: 20px; ****float: right; background-color: #333399; }

в нормальных браузерах отображается корректно а ИЕ в некоторых случаях
содержимое .scont прижимается к левой границе окна после того как заканчивается содержимое .dmenu...
... Так хочется вернуться к абсолютному позиционированию....
26.09.2007, 18:47
Aykroyd

А ниче, что один закрывающий див – лишний? )

Посмотрел я Ваш код...
Простите, Вы хоть сами-то понимаете, что Вы пишете?

Задаете одновременно ширину и высоту в совокупности с минимальной шириной и высотой... Не обнуляете отступы у body... vertical-align: top; в блочных элементах – это для чего? display: block; для блочных элементов – это зачем? height: auto; для блока в прямом потоке, для которого и так height: auto; по умолчанию...

.dmenu: {height: 100%;} – это 100% от чего? Извините, родитель данного элемента не имеет явной высоты...

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

.mblock1 {height: 680;} – 680 чего? килограмм?

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

Цитата:

в нормальных браузерах отображается корректно а ИЕ в некоторых случаях
содержимое .scont прижимается к левой границе окна после того как заканчивается содержимое .dmenu...

Проблема в IE от того, что для блока .scont не включено специфическое свойство [Only registered and activated users can see links. Click Here To Register...]... Его можно включить, например, следующим методом: * html .scont {height: 1%;}...
27.09.2007, 11:59
Cheese

Цитата:

Originally posted by Aykroyd+Sep 26 2007, 16:47--><div class='quotetop'>Цитата(Aykroyd @ Sep 26 2007, 16:47)</div>

Цитата:

А ниче, что один закрывающий див – лишний? )[/b]

Не страшно. Он наверное приблудился когда я убирал из странички лишнее...

<div class='quotetop'>Цитата(Aykroyd @ Sep 26 2007, 16:47)</div>

Цитата:

Размер шрифта в пунктах обычно только для печати задается...[/b]

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

Цитата:

Originally posted by Aykroyd@Sep 26 2007, 16:47
.mblock1 {height: 680;} – 680 чего? килограмм?

Ну тут откровенный ляп...

<!--QuoteBegin-Aykroyd@Sep 26 2007, 16:47
грязь, в общем...
честно говоря, даже не понятна суть такой раскладки...

А чего непонятного? Раскладка в две колонки с хидером, причем правая колонка
раскладывается еще на две но не с самого начала... Возможно ваш трехколоночный шаблон из прикрепленной выше ветки более совершенен, но он меня пугает использованием js для борьбы с min-... в IE, поэтому рисовал сам как умею, а умею плохо [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by Aykroyd@Sep 26 2007, 16:47
Проблема в IE от того, что для блока .scont не включено специфическое свойство [Only registered and activated users can see links. Click Here To Register...]... Его можно включить, например, следующим методом: * html .scont {height: 1%;}...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
:hi: Снимаю шляпу....
27.09.2007, 16:01
Aykroyd

Цитата:

Originally posted by Cheese@Sep 27 2007, 11:59
Не знал... по-моему где-то у Темы встречал фразу, что задавать шрифт в пикселах - дурной тон... хотя могу и ошибаться
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Правильно. Задавать надо в процентах и em-ах...
[Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by Cheese+Sep 27 2007, 11:59--><div class='quotetop'>Цитата(Cheese @ Sep 27 2007, 11:59)</div>

Цитата:

Раскладка в две колонки с хидером, причем правая колонка
раскладывается еще на две но не с самого начала...[/b]

Такими методами раскладка в две колонки не делается...
Обычно левая колонка флоатится налево, а правая – направо...
Тогда и хаков для IE6 практически не понадобится...

<!--QuoteBegin-Cheese@Sep 27 2007, 11:59
Возможно ваш трехколоночный шаблон из прикрепленной выше ветки более совершенен, но он меня пугает использованием js* для борьбы с min-... в IE,
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
JS тут ни при чем...
Он в любом случае понадобится, если сайт "резиновый"...
Какими бы блочными методами он не верстался...