Горизонтальное меню без float

    Пост скорее для себя, чем для других.
    Код и подробности под катом.

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <style type="text/css">
    6. * {
    7.   padding:0;
    8.   margin:0;
    9.   border:0;
    10. }
    11. #content {
    12.   margin:50px;
    13.   padding:50px;
    14.   background:#eee;
    15.   text-align:center;
    16.   list-style:none;
    17.   white-space:nowrap;
    18. }
    19. #content LI {
    20.   display:inline-block;
    21.   margin:0 -2px;
    22.   vertical-align:top;
    23. }
    24. #content LI A {
    25.   display:inline-block;
    26.   background:#f9f9f9;
    27.   border:#ccc 1px solid;
    28.   margin:0 2px 0 0;
    29.   padding:5px 15px;
    30.   text-decoration:none;
    31.   color:#00f;
    32.   vertical-align:bottom;
    33. }
    34. #content LI A:hover {
    35.   color:#f00;
    36.   background:#fff;
    37. }
    38. @-moz-document url-prefix() {
    39.   #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
    40.   #content LI {margin:0 -2px;} /*For FF*/        
    41.   #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/
    42. }
    43.  
    44. </style>
    45. <!--[if lte IE 7]>
    46. <style type="text/css">
    47. #content LI {
    48.   display:inline;
    49.   margin:0;
    50. }
    51. </style>
    52. <![endif]-->
    53.  
    54. <title>Title</title>
    55. </head>
    56.  
    57. <body>
    58.  
    59. <ul id="content">
    60.   <li><a href="#">Главная</a></li>
    61.   <li><a href="#">О нас</a></li>
    62.   <li><a href="#">О вас</a></li>
    63.   <li><a href="#">О них</a></li>
    64.   <li><a href="#">Ссылки</a></li>
    65.   <li><a href="#">Форум</a></li>
    66. </ul>
    67.     
    68. </body>
    69. </html>
    * This source code was highlighted with Source Code Highlighter.

    Пояснения:

    Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой? upd: habrahabr.ru/blogs/css/49756/#comment_1306559)

    Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!

    Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает :(

    Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;

    @-moz-document url-prefix() {
    #content LI {display:-moz-inline-grid;display:inline-block;} /*For FF2 only*/
    #content LI {margin:0 -2px;} /*For FF*/
    #content LI, x:-moz-any-link, x:default { margin:0 -2px;} /*For FF3*/}


    И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat

    И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.

    UPD: По просьбе gryzzly выкладываю наиболее интересные варианты, предложенные в комментариях:

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 109

      –12
      Если для себя, то уберите под кат и закройте запись.
      И нет проблем.
        +4
        легко
        +6
        кто бы что б ни говорил. СПАСИБО большое
          0
          Только что верстал сайт… Пришел выводу, что мою идею реализовать без inline-block вообще никак. :(

          Идея простая — несколько блоков (div) поместить в блок, чтобы они уходили влево за границы этого блока и пропадали со скроллбаром по X. (ни в коем случае не по Y)
          +3
          display: inline-block; — не понимают только FF1.5 и FF2.?.. (вместо знака вопроса — неизвестное число)
          конечно, стремлюсь к кроссбраузерности. Но в данном случае, увы, использую просто display: inline;…
          А все потому-что я такой плохой. Ну привык я, что пользователи, знающие что такое Firefox или Opera обновят свой браузер… а рабочее время на все эти дела (IE6+O9.6x+FF3) не очень получается тратить, хотя ужасно интересно найти между ними компромисс…
          Но я принял для себя стандарт… может он и плохой, но меня не подвел…
            +1
            Ваше право :) Если заказчик мне скажет: «Чтоб было валидно!», я скорее всего сделаю как раньше (если не удастся этого самого заказчика переубедить). Но я рад, что нашел для себя альтернативу, и она не так уж и бесполезна, мне кажется.
              +6
              Вообще если невалидна только CSS, то можно особо не беспокоиться по этому поводу. В спецификации CSS четко сказано, что нужно делать, если в стилях встречается незнакомое свойство или просто ошибка. Поэтому можно ожидать нормальной интерпретации браузером, особенно если стиль использует специфичные префиксы, наподобие -moz-, -webkit- или -ms-. Это гарантирует, что другие браузеры не будут пытаться применить это правило.
              В HTML же обработка ошибок не определена спецификацией, поэтому лучше их не допускать.
          • UFO just landed and posted this here
              +7
              Всегда приятно решить задачу без использования таблиц и с минимальными издержками. Стандарты это хорошо, но уж если выбирать между табличной разметкой и немного нестандартным CSS, я выберу второе.
                +3
                С минимальными издержками это как раз таблица.
                  +1
                  а решите завтро сделать вертикальное меню, и все перевёрствовать
                    +1
                    Если «всё перевёрстывать» это заменить <td></td> на <td></tr><tr></td> и заменить класс b-hmenu на b-vmenu, то да, всё перевёрстывать.
                      –2
                      афтар жжот :D
                      теги местами перепутаны…
                      заменить на
                        0
                        вы наверное хотели сказать «заменить на » ;)
                          0
                          сорри, съелись тэги в пред посте.

                          вы наверное хотели сказать «заменить <td></td> на <td></td></tr><tr>» ;)
                      • UFO just landed and posted this here
                        +5
                        Вы часто разбирались с чужими сайтами сверстанными таблицами???

                        Таблицы в html для того что бы выводить информацию соответствующего содержания. Вы то возможно и помните где какую таблицу с каким идентификатором используете, а вот для других людей верстка в DIV-ах будет выглядеть естественнее, понятнее (ну не пустое это слово семантика!!!).

                        К тому же, верстка DIV-ми проще. Это ведь охренеть можно потом прилаживать табличное горизонтальное меню к телу сайта, если оно (тело) имеет боковые границы. Возможно что сейчас это проблемы нет, но когда-то я тратил на это время и нервы. :(
                          0
                          А как сочетаются div и непустое слово «семантика»?
                            +1
                            Да в общем-то хорошо сочетаются.
                            Таблица имеет предопределенное семантическое значение — она должна содержать табличные данные.
                            Блок же (div) такого значения не имеет, значит его можно применять и для визуального оформления, не придавая никакой семантической окраски его содержимому.
                              0
                              Эм… Кажется вы написали скрипт-автоотвечалку на комментарии в которых встречаются слова «div» и «семантика».

                              Хорошо поясню еще раз. Верстка таблицами была оправдана когда:
                              1) по-другому просто нельзя было сделать
                              2) все стили были прописаны непосредственно в html документе

                              Не знаю как вас, но меня таблицы в чужих документах вводят в некоторый ступор. В лучшем случае верстальщик назначает элементам таблицы, которые имеют исключительно визуальное назначение, понятные идентификаторы отражающие цель использования этого элемента. В худшем случае верстальщик-оптимизатор добавляет к этим элементам класс из 2-х букв. С учетом того, что таблица используется не только для визуального оформления (в ней так же содержаться тексты, картинки и т.д.) часто бывает сложно понять где и для чего верстальщик использует элементы таблицы (тут у него просто пустая строка или это строка с каким-нибудь красивым визуальным разделителем? это пустая ячейка, которая заполнена в следующей строке или это контейнер для какого-нибудь элемента дизайна?).
                              Уверяю вас — я не тупой! Просто откройте чужой документ с табличной версткой и попробуйте разобраться в нем без inspect html. А теперь представьте, что вам в этом документе не пару слов с картинкой поменять, а сделать что-нибудь посерьезнее.
                              Разобраться иногда бывает достаточно сложно, но главное, сколько времени из-за этого отнимает плевая работа.

                              С DIV-ой версткой разбираться проще. Ну типо не надо представлять себе всегда всю структуру целиком, если код семантичный, то тексты все равно оформляются соответствующими тегами и DIV-ы выступают только в роди контейнеров. К тому же, верстая сайт таблицей вы из-за красивого хедера можете ввести таблицу из 12 колонок, когда сам контент потребует от 2 до 4, вот и появятся пустые элементами с разными colspan в которых кому-то потом придется разбираться.

                              DIV-ая верста более понятная, более естественная поэтому и «сочетается div и не пустое слово сематика».
                              Возможно вас покоробил мой тон? Уверяю вас, я не фанат блочной верстки, я — фанат быстро и качественно выполненной работы, за которую платят деньги. Именно по этому я и напирал на слово НЕПУСТОЕ.
                            +2
                            Поддержка такого кода будет исключительно занимательным процессом. А это — существенная часть издержек.
                          +8
                          Как раз таки у таблицы квадратные колёса из-за несемантичности.
                            –4
                            Семантичность эфемерна.
                              0
                              Проходящая или несуществующая? Первой она врядли будет — из модной, но практически бесполезной фичи семантичность превратится в один из неотъемлемых частей веб-документов.
                                +1
                                До тех пор пока не будет нормальной реализации CSS (да и в CSS ещё много чего не хватает), семантика будет эфемерной.
                                  0
                                  Нормальной или идеальной? Да и если в стандартах всё-всё будет описано, браузерам тоже нужно время, чтобы подтянуться.
                                +1
                                Привет!

                                Я против холиварсов, но здесь, кроме навигации, есть и другое применение: вывод картинок, например. Мне их не всегда удобно выводить таблицами. То же самое с навигацией и другими объектами.

                                Так что предлагаю всем верстать так, кому как удобнее и интереснее.

                                А семантичоесть — она да, скорее эфемерна.

                                Тут, как всегда, всё зависит от задачи.
                                –1
                                Кто вам такое сказал? Таблица — это семантичный код. Читайте Зельдмана.
                                  +1
                                  Таблица семантична для табличных данных. Для списков есть ul/ol.
                                    0
                                    А что есть для меню?
                                      +1
                                      Смотря что из себя представляет меню. Обычно это список, но, например, таблица стоимостей различных продуктов со ссылками на их описание — меню-таблица. Но использовать таблицу для списков — или незнание (CSS), или нежелание знать, или просто «надоело париться с этими селекторами и прочей лабуденью». По себе знаю.
                                        –1
                                        …или то, что списки не работают надёжно при неизвестном заранее контенте меню.
                                          0
                                          Шож это за меню то такое?
                                            –1
                                            Абстрактно-реализованное.
                                              0
                                              Ну, тогда возможно абстрактно-реализованные списки помогут? :)
                                                0
                                                К сожелению нет.
                                +5
                                Допустим. А если надо сверстать меню, которое еще и будет на несколько строчек разделяться при растяге страницы? Кажется тут таблицы облажаются…
                                  0
                                  Гады, заминусовали последнего рыцаря табличной верстки!
                                  0
                                  а display:-moz-inline-grid; хорошо себя ведёт? не праказничает если туда разные всякие блоки вставить? с float, например?
                                    +1
                                    Скажу честно — капризничает. Для каждого конкретного случая нужен индивидуальный подход :)
                                    +4
                                    По-моему, лучше использовать display: table и table-cell. Меньше кода, никаких хаков для FF.
                                      0
                                      Хаки со временем уйдут, а идея останется:)
                                        0
                                        Хаки не ест красиво :)
                                        Я встречал отцентрированные списки меню без float и работающие везде без хаков (в strict).
                                          +1
                                          дык пример если так удачно киньте)
                                            0
                                            Видел, но в большинстве примеров была куча рун типа IF IE
                                        +1
                                        Что вы думаете об этом способе? www.mauzon.com/?p=87 (кроме того, что там 2 «лишних» дива-обертки).
                                          +1
                                          Спасибо, я о нем просто забыл! Блин, бывают же конфузы… Ну ничего, зато поупражнялся.
                                        • UFO just landed and posted this here
                                            +1
                                            Думаю те кто пользуется FF уже давно скачал FF3. Кстати интересна статистика на этот счет. Особенно процент FF2.
                                            • UFO just landed and posted this here
                                                0
                                                Да, отсутствие «старых» плагинов + консерватизм пока играет не на руку FF3 :\
                                                0
                                                По статистике аналитикса группы хорошо посещаемых сайтов, пользователей Firefox 2 для рунета — 2,7%, для США — 3,4%.

                                                + offtop — Opera в рунете по тем же сайтам ровно треть, в США — 4,4%. IE в рунете 36%, в США 57%.
                                                0
                                                Да никто и не говорил, что способ идеально подходит для меню. До опытов с динамическим меня я даже не доходил :)
                                                В принципе, я искал решение для группы картинок, которые должны центрироваться внутри родителя и без проблем переноситься на другую строку, если не вписываются по ширине в оставшееся пространство.
                                                  +1
                                                  Кстати, картинки и без всяких ухищрений будут так себя вести :)
                                                +1
                                                Коммент для общественности по поводу @-moz-document. Мозилла предлагает собственный @-rule преимущественно для user style sheets. Использовать это правило для Mozilla specific CSS — интересное решение.

                                                По поводу того, что CSS невалиден могу сказать так — валидация кода нужна для выявления потенциальных ошибок, узких мест. Валидатор — не искусственный интеллект, и он не может знать, что какой-то браузер создал собственное решение для обхода своих же недостатков. Однако это свое решение не узкое место (почти) и не ошибка. Так что к невалидности в таких случаях можно относиться демократично.
                                                    0
                                                    Большое спасибо за ссылку! :)
                                                      0
                                                      да не за что, за первую или вторую? :)
                                                        0
                                                        Тогда и за вторую тоже спасибо :)
                                                    0
                                                    еще одно но

                                                    если нужно будет задать ширину*высоту для элементов списка — она не будет работать в ИЕ — так как элементы обозначены как inline
                                                      +1
                                                      В MSIE isplay: inline ведёт себя как inline-block.
                                                        0
                                                        как бы я хотел чтобы так оно и было :) но к сожалению это не так.

                                                        Вот наглядный пример того о чем я говорю:
                                                        • hello
                                                        • hello
                                                          0
                                                          извиняюсь, поспешил написать… вот он, пример:
                                                          <ul>
                                                          <li style="display:inline;width:200px;background:#9C6">hello</li>
                                                          <li style="display:inline-block;width:200px;background:#6CF">hello</li>
                                                          </ul>
                                                            +1
                                                            Да, но при условии, что у элемента врублен hasLayout
                                                        • UFO just landed and posted this here
                                                            0
                                                            Что сложного, заменить float:left; на display:inline;? И стоят эти стили в одном месте. И результат почти один и тот же… Только inline дает больше возможностей в расположении. Любой верстальщик должен это знать!
                                                              +3
                                                              Че-то больно вы дохрена кода ненужного наворотили. Достаточно написать:

                                                              #content LI {
                                                                display:-moz-inline-grid;
                                                                display:inline-block;
                                                                margin:0 -2px;
                                                                vertical-align:top;
                                                              }
                                                              


                                                              И для IE:

                                                              <!--[if lte IE 7]>
                                                              <style type="text/css">
                                                                #content LI {
                                                                  display:inline;
                                                                  margin:0;
                                                                }
                                                              </style>
                                                              <![endif]-->
                                                              

                                                                0
                                                                тогда уже вот так:

                                                                #content LI {
                                                                display:-moz-inline-grid;
                                                                display:inline-block;
                                                                margin:0 -2px;
                                                                vertical-align:top;
                                                                }
                                                                * html #content LI {display:inline;margin:0;}

                                                                  0
                                                                  А IE7?
                                                                    0
                                                                    ой, извиняйте, что то я не проснулся еще… вот так нужно:

                                                                    #content LI {
                                                                    display:-moz-inline-grid;
                                                                    display:inline-block;
                                                                    margin:0 -2px;
                                                                    vertical-align:top;
                                                                    //display:inline;
                                                                    //margin:0;
                                                                    }
                                                                      0
                                                                      CC все же лучше, чем грязные инлайн хаки, хотя бы потому что не нужно будет ничего исправлять с выходом IE8.
                                                                  0
                                                                  Да это все из-за двух пиксельного отступа между строчными блоками. Просто хотелось чтоб без него :)
                                                                    +1
                                                                    Так и будет без него. (Кстати, для IE еще не мешало бы hasLayout врубить, а то некоторые блочные свойства не будут работать).
                                                                      0
                                                                      Мда. Каюсь, увлёкся.
                                                                        +1
                                                                        Будет без отступа если не ставить пробелы между элементами ...</li><li>…
                                                                          0
                                                                          Да, пробельные символы это и есть причина этих отступов, но модифицировать исходный код из-за них считаю не лучшей идеей.
                                                                          • UFO just landed and posted this here
                                                                              0
                                                                              Нет, вы конечно правы, я согласен, что подгонка с помощью отрицательных маржинов тоже не выход, но что делать. А вы можете предложить какой-нибудь другой метод решения этой проблемы, кроме убирания пробельных символов из исходного кода?
                                                                              • UFO just landed and posted this here
                                                                    0
                                                                    Я с недавних пор пользуюсь JS скриптом что посоветовал тут на хабре один парень — этот JS идентифицирует броузер и операционную систему и добавляет соответствующий класс для тега body, оказалось невероятно гибко и удобно. Если ранее нужно было делать отдельно файл стилей для ие, как то их цеплять, правила что там как исключения прописывали были оторваны от основного файла что все осложняло в последующем редактировании, поиске правил и все такое.

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

                                                                    Пример:

                                                                    div#header {
                                                                    height: 93px;
                                                                    position: relative;
                                                                    background: red;
                                                                    }

                                                                    .win.ie6 div#header {
                                                                    height: 94px;
                                                                    }
                                                                      +2
                                                                      Ага, а потом вырубить JS и ужаснуться. Нет уж, только CC.
                                                                      • UFO just landed and posted this here
                                                                          +3
                                                                          Я живу в реальном мире, где до сих пор самый распространенный браузер IE, самое распространенное разрешение экрана — 1024x768, и где до сих пор существуют тысячи пользователей с выключенным JS. И мне важно, чтобы сайт нормально функционировал как с JS так и без него. А фиксить визуальное отображение элементов при помощи JS, когда есть альтернативный способ без JS, вообще считаю глупостью. Особенно таким способом, когда браузер определяется путем парсинга свойства userAgent.
                                                                            0
                                                                            Это не должно мешать продумывать «пути отступления».

                                                                            Половина сайтов захлебнется моментально еще и из-за глупости разрабов, которые забыли, например, к зааяксенным добавить прямые ссылки на отдельные страницы — но это издевательство, особенно, учитывая то, что не всегда дожидаешься загрузки монструозных js-ов. А еще есть NoScript — для параноиков безопасности.
                                                                            –3
                                                                            ну если так мыслить то и картинки нужно отключить, и моник ЧБ 10''. Я лично пока еще не встречал людей отключающих JS. 99% всех пользователей не знают что это такое даже.

                                                                            Потому я не переживаю.
                                                                            0
                                                                            ставить js-script в body — неэстетично, а если добавлять свойство восле загрузки в dom — появляются прыжки. Тоже некрасиво. Ну и вообще лишнее это.
                                                                            0
                                                                            О, мои CSS-хаки пошли в народ :)
                                                                              0
                                                                              Если это твое — то разработка что нужно. Очень выручает. Как по мне — лучший вариант. Правда если что нужно его обновлять, чтоб новые браузеры хавал. Например Хром там. хотя в нем все и так ровно, но на всяк выпадок.

                                                                              Вообще спасибо. Самое оно.
                                                                            • UFO just landed and posted this here
                                                                                0
                                                                                Без js все равно никуда не денемся, это вы правы абсолютно.
                                                                                Но использовать их для исправления таких багов — все равно что травить тараканов ядерным взрывом.
                                                                                Есть средства более дешевые и безопасные.
                                                                                0
                                                                                На первый взгляд ничем не отличается от этого:
                                                                                www.brunildo.org/test/ImgThumbIB.html
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    ну-да, я не совсем верную ссылку дал. Вот соседняя: www.brunildo.org/test/ImgThumbIBL.html
                                                                                    Должно работать везде.
                                                                                    • UFO just landed and posted this here
                                                                                      • UFO just landed and posted this here
                                                                                  0
                                                                                  Метод Токмакова можно улучшить, если клиринг использовать не :after {content:'' и т.д.} а overflow:auto для блока, относительно которого центрируешь. Хотя один лишний див все-таки остается, да.
                                                                                    +1
                                                                                    <style type="text/css">
                                                                                        .align_center {
                                                                                            position: relative;
                                                                                            width: 100%;
                                                                                            overflow:auto;
                                                                                        }
                                                                                        .align_center_to_left {
                                                                                            position: relative;
                                                                                            right: 50%;
                                                                                            float: right;
                                                                                        }
                                                                                        .align_center_to_right {
                                                                                            position: relative;
                                                                                            z-index: 1;
                                                                                            right: -50%;
                                                                                        }
                                                                                    </style>
                                                                                    <div class="align_center" style="border: 1px dashed red; color: red;">
                                                                                    Выравниваем относительно этого блока.
                                                                                        <div class="align_center_to_left">
                                                                                            <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;">
                                                                                                Ширина блока зависит от размера надписи.
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    
                                                                                      –1
                                                                                      Неплохо бы указывать источник:
                                                                                      www.artlebedev.ru/tools/technogrette/html/align-center/
                                                                                        0
                                                                                        habrahabr.ru/blogs/css/49756/#comment_1306540 «метод Токмакова»
                                                                                          0
                                                                                          а ссылка на сам метод есть в теле поста какбэ
                                                                                            +1
                                                                                            Ок, теперь после обновления топика все хорошо и понятно что к чему комментировалось, а до этого при беглом просмотре было не очень ;)
                                                                                        +1
                                                                                        Еще, автор, если Вам не сложно, может быть обновите пост с наиболее интересными вариантами, предложенными в комментариях?
                                                                                          –1
                                                                                          Firefox 2.0.0.20 users offered a free upgrade!

                                                                                          Earlier this month, Mozilla offered an update for all Firefox 2.0.0.20 users — a free upgrade to Firefox 3.0.5, the very latest and best browser from Mozilla offering more speed, requiring less memory, and providing the safest and easiest web browsing experience available.

                                                                                          Firefox 2 users last received a “major update” in December, prior to the final release of Firefox 2. As of this point, Mozilla will no longer be actively issuing security and stability updates to Firefox 2. Additionally, Firefox 2 will no longer have Phishing Protection as of January 20.

                                                                                          We strongly recommend that our users upgrade to Firefox 3.

                                                                                          поэтому думаю насчет ff2 заморачиваться более не стоит!

                                                                                            0
                                                                                            ну и кому тут что не понравилось?
                                                                                            +1
                                                                                            Firefox'a 2 осталось всего 3 процента. Я думаю, не стоит и заморачиваться. Тем более, эти -moz-inline-ххххх подглючивают неплохо так.
                                                                                              0
                                                                                              попробовал ваш вариант… в моём случае он не подошёл… как-то странно себя повели элементы внутри этого -moz-inline-grid. мне больше по душе -moz-inline-box, он более предсказуем и ближе к inline-block, как мне кажется… использую его не только для меню. всё это, конечно, ИМХО…
                                                                                                0
                                                                                                с -moz-inline-xxx ситуация такая, что нужно просто перебирать возможные значения (-moz-inline-grid, -moz-inline-stack, -moz-inline-box), они ведут себя по разному. Но, по моим наблюдениям, лучше всего себя ведет -moz-inline-stack. Также не мешает заключить то, что в элементе с -moz-inline-xxx в какой-нибудь блочный элемент, чаще всего это исправляет многие баги.
                                                                                                  0
                                                                                                  спасибо за совет, как-нибудь попробую…
                                                                                                0
                                                                                                Вот решение основанное на display:table-cell для нормальных и display:inline с hasLayout для инвалидов;
                                                                                                Сегодня использовал в проекте; Работает в фф2/3, сафари3, опера 9.5, ие6/7, больше не тестил;

                                                                                                <style type="text/css">
                                                                                                #header {
                                                                                                	background:black;
                                                                                                    font-size:1.4em;
                                                                                                }
                                                                                                    #header a {
                                                                                                        color:#fff;
                                                                                                    }
                                                                                                	#header div {
                                                                                                		margin:0 auto;
                                                                                                		display:table;
                                                                                                	}
                                                                                                		#mainmenu,#languages {
                                                                                                			display:table-cell;
                                                                                                            list-style:none;
                                                                                                		}
                                                                                                		#mainmenu li, #languages li {
                                                                                                			float:left;
                                                                                                                       margin-left:0.3em;
                                                                                                		}
                                                                                                </style>
                                                                                                <!--[if lt IE 8]>
                                                                                                <style type="text/css" media="all">
                                                                                                    #header div {/* block with centered inline-blocks elements */
                                                                                                        display: block;
                                                                                                        text-align:center;
                                                                                                    }
                                                                                                        #mainmenu, #languages {/* setting blocks to be "inline-blocks" (display:inline with hasLayout)*/
                                                                                                            display:inline;
                                                                                                            zoom:1;
                                                                                                        }
                                                                                                </style>
                                                                                                <![endif]-->
                                                                                                <div id="header">
                                                                                                      <div>
                                                                                                        <ul id="mainmenu">
                                                                                                          <li>
                                                                                                            <a href="#">Download</a>
                                                                                                          </li>
                                                                                                          <li>
                                                                                                             <a href="#">Cashier</a>
                                                                                                          </li>
                                                                                                          <li>
                                                                                                            <a href="#">About Us</a>
                                                                                                          </li>
                                                                                                        </ul>
                                                                                                        <ul id="languages">
                                                                                                          <li>
                                                                                                            <a href="#">English</a>
                                                                                                          </li>
                                                                                                          <li>
                                                                                                            <a href="#">FRANÇAIS</a>
                                                                                                          </li>
                                                                                                          <li>
                                                                                                            <a href="#">Deutsch</a>
                                                                                                          </li>
                                                                                                          <li>
                                                                                                            <a href="#">ESPAŇOL</a>
                                                                                                          </li>
                                                                                                        </ul>
                                                                                                    </div>
                                                                                                </div>
                                                                                                

                                                                                                Only users with full accounts can post comments. Log in, please.