Форум hotibo.ru

alexey · 27.03.2010 14:11

Столкнулся с такой проблемой:

Делаю стартовую страницу с большим меню. Пункты меню (фиксированной ширины) должны выстраиватся в ряд и далее переносится на новую строку. Каждый пункт меню - обтекаемый блок.
В идеале всего 6 пунктов - 3 на первой строке и 3 на второй. Ширина 3 блоков с отступами и бордюрами равна ширине блока в который они все вместе завёрнуты.

Кроссброузерность достугнута - всё ок. Но иногда FF и Opera неправильно отображают это меню. Они могут показать так: на первой 1(!), на второй 3 и на третьей 2, иногда 1-1-3-1, вобщем разные варианты. Нажмёшь refresh и всё нормально...
Не подскажете, в чём проблема?

Код:


   
      TITLE
      Menu #1
      Menu #2
      Menu #3
      Menu #4
      Menu #5
      Menu #6

Код:

.content_bg
{
   background-color: #272727;
   border: 1px solid #6C6C6C;
   width: 760px;
   margin: 0 auto;
   clear: both;
   color: #F2F2F2;
}
.content
{
   display: table;
   margin: 15px auto;
   text-align: left;
   width: 711px;
   color: #F2F2F2;
   font-size: 80%;
   clear: both;
}
.content_menu_item
{
   display: inline;
   float: left;
   background-repeat: no-repeat;
   margin: 12px 10px;
   width: 217px;
   height: 112px;
   color: #FFFFFF;
}

Wizard · #2 28.03.2010 17:17

у меня всё пашет, а что не так вообще?

alexey · #3 28.03.2010 17:35

Да, оно пашет, вот только не всегда!

Причём касается не только конкретно этого меню, а вобще плавающих блоков.
Т.е. если есть один большой блок (например 300px), а в нём 3 маленьких (100px), то при первом просмотре они выстраиваются в линию, а при повторных могут быть перенесены на другую строку. Выходит, что когда читается с сервера - размеры считаются нормально, а когда из кеша - хрен знает как...
Делаешь рефреш - и опять в одну линию!
Как уже говорил - замечено на FF и Opera, с IE всё нормально.
Я уже и с параметром display все возможные варианты попробовал - не помогает.

Главное, что логики в этом никакой нет!

Wizard · #4 28.03.2010 20:05

Я бы сказал, что в коде где-то неточность, возникла проблема с доктайпом и т.п. а IE как всегда все баги игнорирует. Как-то раз столкнулся с подобной проблемой, помогает определение ширины блоков в процентах, или хотябы внешнего блока по точкам а внутренних в %. Если всё настолько безнадёжно, так что ничего другое не поможет, напиши скрипт, который сам обновляет страничку при запуске:)))

AKS · #5 28.03.2010 21:28

Wizard
В данном случае (parent : 300px; childs : 100px;) скорее всего добавляются отступы, которые в браузерах всегда есть по умолчанию - вот и получается чехарда.

alexey · #6 28.03.2010 22:25

Wizard
спасибо, пошёл проверять

AKS
Причём добавляются, но только иногда
На самом деле прописано
* { margin: 0; padding: 0; }
И я даже пробовал размеры внутренних значительно уменьшать.

К слову: DTD XHTML 1.0 Transitional

Смешно то, что все внутренние элементы могут быть идентичны между собой, но может получиться так, что на первую строчку броузер только один элемент поставит, а на вторую 3.

locker · 29.03.2010 23:02

Попробуй для всех блоков указать margin-left: -2px; возможно полегчает, хотя у меня тоже все нормально робит

Отредактированно locker (29.03.2010 23:04)

Форум hotibo.ru

#1 27.03.2010 14:11

float div - перескакивает на новую строку

Код:

TITLE

Код:

#2 28.03.2010 17:17

Re: float div - перескакивает на новую строку

#3 28.03.2010 17:35

Re: float div - перескакивает на новую строку

#4 28.03.2010 20:05

Re: float div - перескакивает на новую строку

#5 28.03.2010 21:28

Re: float div - перескакивает на новую строку

#6 28.03.2010 22:25

Re: float div - перескакивает на новую строку

#7 29.03.2010 23:02

Re: float div - перескакивает на новую строку

Board footer