Как начинающий верстальщик прошу помощи:
Выкладываю весь свой html и css код ниже.
Суть проблемы: в FF57 не отображается блок со ссылками на социальные сети. В html коде это блоки nav-social и footer-social. В IE11, Chrome и Edge все в порядке. При этом если в FF по F12 найти этот блок, то у него будет свойство display: none. И даже замена на display: block или display: inline-block не помогает.
Интересно, что при загрузке или обновлении страницы по F5 данные блоки как бы мигают (появляются и исчезают).
С чем может быть связана проблема?
Полный архив с картинками и шрифтами выложу при необходимости.
@font-face { font-family: "lato-bold"; src: url("../fonts/Lato-Bold.ttf"); } @font-face { font-family: "lato-black"; src: url("../fonts/Lato-Black.ttf"); } @font-face { font-family: "lato-regular"; src: url("../fonts/Lato-Regular.ttf"); } @font-face { font-family: "master-of-break"; src: url("../fonts/master_of_break.ttf"); } @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } body { margin: 0; padding: 0; background: #f1f1f1; } .clearfix::after { display: table; content: ""; clear: both; } .layout-positioner { width: 912px; margin: 0 auto; } .header-content { background: #683169; padding-top: 15px; } .header-content .logo { width: 235px; margin: 0 auto; } .nav-content { background: #ffffff; box-shadow: 0px 3px 12px 0px rgba(0, 1, 1, 0.18); } .nav-content ul { padding: 0; } .nav-logo a{ display: block; float: left; padding-top: 10px; font-family: "master-of-break"; font-size: 27px; letter-spacing: 0.1em; text-decoration: none; color: #683169; } .nav-menu { margin: 0; margin-left: 270px; } .nav-menu:nth-lastchild() { margin-right: 0; } .nav-menu li { display: inline-block; padding-top: 20px; margin-right: 20px; float: left; } .nav-menu a { font-family: "lato-bold"; letter-spacing: 0.1em; text-decoration: none; color: #875308; text-transform: uppercase; font-size: 14px; } .nav-menu a:hover { color: #683169; } .nav-social { margin: 0; float: right; } .nav-social li { display: inline-block; padding-top: 20px; margin-right: 10px; } .nav-social a { font-family: "FontAwesome"; text-decoration: none; color: #683169; font-size: 16px; } .gallery-content { margin: 0; padding: 0; list-style: none; padding-top: 120px; padding-bottom: 120px; white-space: nowrap; } .gallery-content li { display: inline-block; margin-right: 15px; } .gallery-content li:nth-lastchild() { margin-right: 0; } .main { background: #ffffff; padding-top: 60px; } .main h2 { position: relative; margin: 0 auto; font-family: "lato-black"; font-size: 23px; color: #683169; text-transform: uppercase; letter-spacing: 0.025em; width: 500px; padding-bottom: 20px; } .hr { display: block; margin: 0 auto; } .main p { font-family: "lato-regular"; font-size: 16px; color: #8e8e8e; padding-bottom: 40px; margin-bottom: 0; text-align: justify; } .address-block { background: #683169; color: white; font-family: "lato-regular"; margin: 0; padding: 0; text-transform: uppercase; font-size: 12px; letter-spacing: 0.005em; } .footer-contacts { width: 300px; float: left; } .footer-contacts p { margin: 0; padding-bottom: 25px; } .address { padding-top: 45px; } .address::before { display: inline-block; content: url("../img/location.png"); float: left; position: relative; padding-right: 20px; top: 3px; } .phone::before { display: inline-block; content: url("../img/phone.png"); float: left; position: relative; padding-right: 15px; top: 3px; } .email::before { display: inline-block; content: url("../img/email.png"); float: left; position: relative; padding-right: 15px; top: 3px; } .footer-social { float: right; padding-top: 100px; } .footer-social ul{ margin: 0; padding: 0; } .footer-social-menu li { list-style: none; display: inline-block; margin-left: 15px; } .footer-social a { font-family: "FontAwesome"; text-decoration: none; color: #dba512; font-size: 24px; } .footer-menu { margin: 0; padding: 0; background: #191919; min-height: 50px; font-family: "lato-regular"; font-size: 10px; color: #ffffff; text-transform: uppercase; } .footer-menu p { display: inline-block; float: left; padding-top: 20px; margin: 0; } .footer-nav-menu { margin: 0; padding: 0; float: right; } .footer-nav-menu li { display: inline-block; padding-top: 20px; margin-left: 20px; } .footer-nav-menu a { font-family: "lato-bold"; letter-spacing: 0.1em; text-decoration: none; color: #875308; text-transform: uppercase; font-size: 12px; }<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta charset="utf-8"> </head> <body> <header> <div class="header-content"> <div class="layout-positioner"> <div class="logo"> <img src="img/logo.png" alt="logo" width="235" height="225"> </div> </div> <nav> <div class="nav-content clearfix"> <div class="layout-positioner"> <span class="nav-logo"><a href="">Sew Lit</a></span> <ul class="nav-menu"> <li class="menu-item"><a href="#">Home</a></li> <li class="menu-item"><a href="#">About us</a></li> <li class="menu-item"><a href="#">Gallery</a></li> <li class="menu-item"><a href="#">Contact us</a></li> </ul> <ul class="nav-social"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> </nav> </div> </div> </header> <div class="gallery"> <div class="layout-positioner"> <div class="gallery clearfix"> <ul class="gallery-content"> <li><a href="#"><img src="img/1.png" alt=""></a></li> <li><a href="#"><img src="img/2.png" alt=""></a></li> <li><a href="#"><img src="img/3.png" alt=""></a></li> <li><a href="#"><img src="img/4.png" alt=""></a></li> </ul> </div> </div> </div> <div class="main"> <div class="layout-positioner"> <h2>Advices from our dedicated sew lite</h2> <img class="hr" src="img/hr.png" width="287" height="5"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute .Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute .Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute .Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute .</p> </div> </div> <div class="address-block clearfix"> <div class="layout-positioner"> <div class="footer-contacts"> <p class="address">123, Main Street, Your City,<br> New York 789456</p> <p class="phone">+01 2345 00000<br> +01 2345 0000</p> <p class="email">info@sewlite.com<br> www.sewlitw.com</p> </div> <div class="footer-social"> <ul class="footer-social-menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> </div> <div class="footer-menu clearfix"> <div class="layout-positioner"> <p>© Copyright by 2017. All rights reserved.</p> <ul class="footer-nav-menu"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div> </body> </html>
