Здравствуйте! Решил наконец-то освоить верстку с применением хваленых div-ов , но возникло несколько проблем с отображением и позиционированием блоков в браузере Mozilla Firefox. Пример странички находится здесь. Таблица стилей расположена здесь В explorere отображается все как надо, а вот в Лисе - сами видите, какое безобразие.      Очень хочется понять, какие очевидные лаги имеются в коде. В особенности меня удивляет середина страницы. По сути - в середине находится большая вертикальная ячейка таблицы, в которую последовательно добавляются блоки div с информацией (сейчас - их на страничке 3)  Но в Мозилле получается такая тема - 
1) Блоки запросто выходят за пределы таблицы, вместо того, чтобы ее растягивать. Тем не менее, находятся они именно в ячейке таблицы.
2) Сами блоки понимают границы друг друга. Это вроде бы верно.
3) Текст, который расположен внутри блока, блок не растягивает, а благополучно выходит за границы блока. В результате, размеры блоков вообще не изменяются, а тексты накладываются друг на друга...

Страничка пока еще сыровата, имеются невалидности. Но я уверен, что дело упирается именно в само описание div-ов и их применение. Хотя я всего лишь хотел разбить страницу на логические блоки...

Честно говоря, я только начинаю изучать верстку блоками, и хотел бы услышать мнение знающих людей по данному вопросу. Если не трудно - поделитесь, пожалуйста, советами и ссылками по сабжу. 

Жду гневных ответов и  идей "как сделать лучше"    Уверен, что почти у каждого человека найдется свое мнение на этот счет!  

Это сообщение отредактировал(а) St. Andrew - 12.5.2006, 13:54

1. Зачем помещать таблицу в div?
2. У тебя не указано расположение блоков. Вот они и располагаются где хотят =)
 

Replicator, табличка внутри div, на мой взгляд, не несет в себе ничего особенно страшного. Просто нужно было как-то заголовок новости сделать.   Если есть идея как сделать качественнее - с радостью послушаю! Честное слово! 
А если речь идет просто о большой таблице в самом главном блоке (которая делает главную разметку), то я это сделал т.к. никак не получалось разместить блоки один рядом с другим по горизонтали (тогда я еще про float не прочитал    Сейчас бы я, наверное, сделал бы все без таблицы. Но разве так делать нельзя и из-за этого все так ползет?

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

И все-таки я никак не пойму, почему в Мозилле текст не растягивает блок...     

Это сообщение отредактировал(а) St. Andrew - 12.5.2006, 23:36

Firefox очень корректно отображает код, так что если в нем что-то не так, то это ошибка разработчика почти на 100%.

Думаю, нужно сделать

и указать точные координаты каждого блока. 

И что народ ведётся на эту верстку дивами? Нафига она? Очередное бесполезно-моднюче-понтовое веяние.

Верстайте так как удобнее и парьтесь на пустом месте. 

на самом деле все просто зависит от прямоты рук и места  откуда они растут... 

Replicator, твои слова по поводу корректности кода в Мозилле вызывают уважение к этому броузеру.   В общем, попробую координаты прописать! Может тогда и таблица не нужна будет!   

dstorm81, идея хороша. Поддерживаю. 

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



 

jsse, вот что значит неуметь высказать свою мысль. Ты говорил что тебе нужно обтекание. в твоём коде обтекания нет 

Гг.. Ты перепутал топик. Обтекание нужно здесь - http://forum.vingrad.ru/index.php?showtopic=94149  

Это сообщение отредактировал(а) jsse - 15.5.2006, 15:24

jsse, ч не перепутал, просто по словам

подумал что ты об этом. Сори. 

Продолжаем разговор    В общем, решил я переделать верстку заново, более грамотным образом. И теперь пишу блоки сразу на два броузера - лису и IE. Появился вопросик. В общем, хочу сделать шапку сайта - блок -> 3 рисунка, которые расположены справа, слева и в центре этого блока. Для их позиционирования использую таблицу (по другому не выходит). Код странички :



И описание блока с css: 



Я хочу, чтобы табличка с рисунками было позиционирована на всю ширину странички (без полос прокрутки). И пишу для этого - ширина блока - 100%, а ширина таблицы - 100% (естественно, рассчитывая на 100% от ширины блока). Но, как только ставлю padding , то IE и MF демонстрируют чудеса изобретательности. В IE размер блока остается 100%, а таблица слева и справа сжимается на 10 пикселей. Это - гуд. Но в MF сам блок расползается на 10 px влево и вправо, а таблица не изменяется, появляются полосы прокрутки. 
Как от этого избавиться, и сделать так, чтобы в обоих броузерах все выглядело одинаково и именно на 100% в ширину? 

Кстати, если из описания блока выкинуть ширину вообще, то картина становится диаметрально противоположной! В IE теперь блок растягивается, а в MF - все почему-то хорошо...

Может кто-нибудь объяснить, почему так происходит? И было бы просто классно, если бы кто-нибудь подкинул ссылку на книжку, в которой подробно излагаются вопросы позиционирования в css на примере разных броузеров!!!
 
Заранее спасибо за помощь!      

Точно такие же траблы с padding.
Пробывал, как описано здесь (FAQ), но фига  
 

Довольно распространенная трабла...
Как известно IE отошел от стантартов w3c, и margin воспринимает по-другому.

Существуют хаки для решения этой проблемы.

вот пример





P.S. Учитесь верстать без таблиц! Таблицы используйте только для отображения табличных данных.
 

jsse,  спасибо за идею. В принципе, я тут уж сам начал подумывать о том, чтобы один блок в другой вкладывать. Обнаружил еще замечательную закономерность - если пытаться таблицу вбивать в блок, а ширину задавать в процентах, то в одном броузере проценты отсчитываются относительно того блока, к котором таблица находится непосредственно, а в другом - относительно того блока, в котором находится блок, содержащий таблицу!    Вот это стандарты!

А вообще проблему с шапкой я решил так:





Правда, padding решил тогда не использовать.    Кстати, может кто-нибудь объяснить, что означает значение auto и как оно высчитывается?  Вроде работает...иногда  

Еще из приколов IE стоит отметить, что он в упор не понимает параметр min-width.  Ну а когда после верстки сайта я решил в тег body добавить margin'ы , то все эти отступы в IE благополучно уехали за пределы экрана. А Лиса в этом отношении реально рулит! Теперь я подгоняю под IE. 

Давайте напишем письмо президенту, чтобы он стандарты ввел единые на css! Вот жизнь-то будет!