padding в FireFox

M

mirek

Участник
Регистрация
10 Июн 2011
Сообщения
165
Реакции
4
Вот так выглядит меню в Chrome

menu_chrome.jpg



А вот так в FireFox 20.0.1 ОС Windows 7 Разрешение 1366 х 768

menu_ffox.jpg


Видно, что меню сжалось относительно других элементгов


Ширина пунктов меню задается при помощи

Код: 
padding-left:30px;
 
  padding-right:30px;

В чем может быть причина ?
 
Ширина задается для отступов от текста
Тут скорей проблема в том что первый скрин с расширения 1280*1024 например а второй с 1366 х 768 а меню отцентрированое, текста мало вот оно и занимает только ту область что ему нужно
 
Yuriy_Z написал(а):
Ширина задается для отступов от текста
Тут скорей проблема в том что первый скрин с расширения 1280*1024 например а второй с 1366 х 768 а меню отцентрированое, текста мало вот оно и занимает только ту область что ему нужно
Нажмите для раскрытия...
Да. Но у меня есть скриншот с разрешением 1366 х 768 но Хром

В Хроме и при этом разрешении меню нормально отображается

То есть дело точно не в разрешении
 
Ссылка на сайт поможет определить в чем проблема, ссылку в студию
 
судя по скрину, FF не полностью сожрал файл стилей. Он в последнее время вообще стал сильно подглючивать, даже по стандартам. Ссылка нужна на сайт (что выше не работает), или архив с версткой дайте.
 
Для просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или Зарегистрируйся
 
mirek написал(а):
Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...

Для ie 6 и 7 версий таким образом не получится, так как значение table-cell для свойства display поддерживается только с 8 версии. Здесь можно пойти двумя путями:
1. Сделать меню настоящими таблицами
2. Либо применить данное решение Для просмотра ссылки Войди или Зарегистрируйся
Принцип решения такой:
1. Для родительского дива ставим text-align:justify;​
2. Делаем список, указываем и для <ul>, и для <li> display:inline​
3. Строка меню выровняется по ширине только если меню будет в несколько строк. Строка в единственном числе не будет растягиваться. Чтобы показать браузерам, что у нас в диве несколько строк мы эмулируем еще одну строку с помощью span. Добавляем в родительский див <span>​
4. Чтобы span смог эмулировать строку, он должен быть очень широким. Ширину для строкового элемента можно указать только при использовании inline-block. Соответственно меняем для спана дислей и устанавливаем ширину в 100 процентов.​
5. Чтобы спан стал невидимым указываем ему высоту 0 и размер шрифта 0​
6. Теперь меню выравнивается, но если в отдельном пункте меню будет несколько слов, то эти слова сильно разорвутся. Чтобы отдельный пункт меню из нескольких слов сохранял свою целостность добавим для <a> display:inline-block;​

Надо заметить что inline-block для ie 6 и 7 тоже отображается не совсем точно, но их можно научить отображать его правильно через специальный хак.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху