Float и Mozilla Firefox

klevec
На сайте с 18.01.2014
Offline
29
2053

Здравствуйте, подскажите пожалуйста следующее, кто сталкивался.

На Мозилле неправильно отображается Флоат. Всё съезжает и отображается не так как надо.

Сайт: http://shtab-progress.ru/

1. В Мозилле последние пункты верхнего прикреплённого меню слетают на строку ниже.

HTML:

<!-- Меню сайта -->
<div class="block-fixed">
<nav>
<div class="wrapper">

<div class="menu">
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#requirements">Наши требования</a></li>
<li><a href="#join">Поддержать</a></li>
<li><a href="#volunteer">Записаться волонтёром</a></li>
<li><a href="#team">Лица</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
</div>

<div class="social-links">
<ul>
<li><a href="https://www.facebook.com/events/351248908406420" target="_blank"><img src="images/fb.png" alt="Антикризисный марш Фейсбук"></a></li>
<li><a href="https://vk.com/event87220980" target="_blank"><img src="images/vk.png" alt="Антикризисный марш В Контакте"></a></li>
</ul>
</div>

</div>
</nav>
</div>
<!-- Меню сайта -->

CSS:

.block-fixed {
position: fixed;
width: 100%;
height: 30px;
top: 0;
left: 0;
}

nav {
background: #66cc66;
height: 30px;
line-height: 30px;
}

nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

nav ul li {
display: inline;
}

nav li {
padding: 10px 12px;
margin: 0 -1px;
}

nav li a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 400;
font-family: "PT Sans", sans-serif;
}

nav li:first-child {
margin: 0;
}

.menu {
float: left;
}

.social-links {
float: right;
margin-top: 2px;
}

.social-links ul li {
padding: 0px 3px;
margin: 0 -1px;
}

.social-links img {
border: 0;
}

2. В Мозилле карта внизу страницы сайта убегает направо по непонятным причинам. Что можно сделать?

3. (ну и дополнительно, авось кто подскажет) Как сделать так, чтоб сайт с мобилки отображался также как с пк?

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#1

1) Float в фаерфоксе вообще не так работает как в других браузерах. Недавно мучался.

Думаю, надо указать ширину блоков в % и добавить display: inline-block;

2) Если коротко по второму пункту, то можно так: /ru/forum/873867

Но нужно еще продумывать тянущийся дизайн. А на таблицах он, кстати, проще всего :)

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Macdec
На сайте с 22.11.2013
Offline
56
#2

Попробуйте следующие стили:

nav li {

float: left;

line-height: 10px;

margin: 0 -1px;

padding: 10px 12px;

}

section#contacts {

width: 90%;

margin: 32px auto;

display: table;

}

Не стыдно падать, стыдно не подняться | WordPress статьи (http://wordsmall.ru/)
psics
На сайте с 02.04.2009
Offline
130
#3

задайте ширины блоку

.menu {

float: left;

width: 800px;

}

.social-links {

float: right;

margin-top: 2px;

width: 100px;

}

вот так выйдет

P
На сайте с 05.03.2009
Offline
45
#4
klevec:


<ul>
<li><a*href="#home">Главная</a></li>
<li><a*href="#requirements">Наши*требования</a></li>

Пункт меню съезжает на другую строчку по той причине что он в неё не влезает.

Когда ты выстраиваешь <li> в одну линию в независимости от margin и padding у них имеется отступ в несколько пикселей который видимо Mozilla Firefox и не переваривает в отличие от остальных браузеров.

Что бы от него избавиться нужно прописывать <li> вот так.

Закрывающий </li><li> и сразу после него открывающий


<ul>
<li><a*href="#home">Главная</a></li><li>
<a*href="#requirements">Наши*требования</a></li>

По этой причине список в линию я невыстраиваю.

По поводу карты она видима туда уехала из за float где то он скажем так не закрыт.

Надо очистить обтекание.

По крайней мере все эти косяки у меня решались именно так.

Делаю сайты любой сложности с 2004 года. Качественно, ответственно, честно.
klevec
На сайте с 18.01.2014
Offline
29
#5

Спасибо всем! Всё получилось!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий