Search the Community

Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай. body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }

Доброго времени суток, столкнулся с проблемой, скрипт не работает в Firefox но прекрасно работает в Chrome. Суть скрипта, каждые 10 секунд "переключать" рандомную фотку вот скрипт: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script> $(document).ready(function() { $('#slider4').children('div').each(function(n_div,div) { $(div).children('img').each(function(n_img,img) { if(n_img) $(img).css({'opacity':'0.0'}); else { $(div).attr({'value':(n_img+1)}); $(img).css({'opacity':'1.0'}); } }); }); window.setInterval(function() { $('#slider4').children('div').each(function(n,element) { var img = $(element).attr('value');; var rnd = Math.floor(Math.random()*(5-1+1))+1; if(img != rnd) { $(element).attr({'value':rnd}); $(element).children('#img' + (n + 1) + img).animate( {'opacity':'0.0'}); $(element).children('#img' + (n + 1) + rnd).animate( {'opacity':'1.0'}); } }); },10000); }); </script> P.S Скрипт не мой, взял с этого форума, вырезал лишнее. Не кидайтесь сильно камнями)

Добрый день! Создал меню, текст в google chrome отображается не вылезая за границы, а в firefox как на картинке. В чем проблема и как это исправить?

Всем привет. Столкнулся с такой необъяснимой проблемой: Имеется страница на которой есть текстовые инпуты и кнопка, которая открывает фрейм с другими инпутами. Имеется userscript, которые реализует функционал виртуальной клавиатуры http://userscripts-mirror.org/scripts/show/10974 Он работает на всех страницах в яндексе, в гугле, в инпутах на моём сайте, но не работает в инпутах внутри открывающегося фрейма Почему внутри фрейма может не выполняться userscript? В консоле браузера нет ни каких ошибок и вызова юзерскрипта. Так же интересуют альтернативные варианты создания(подключения) виртуальной клавиатуры внутри фрейма с чужим сайтом.

Только вот такое дерьмо не надо предлагать. Надо IDE типа Visual Studio, но с возможностью прицепиться к их процессам и дебагать их JS.

Всем привет! Есть страница: http://krls.beta3.ceteralabs.com/ На ней баннер, который под видео, закрывает собой текстовый слайдер (подробнее во вложении) а браузере FireFox. В Chrom'е всё нормально. Подскажите, где тут CSS подправить можно? Ещё к странице подключено app.js , там тоже стили прописаны, но почему то для FireFox они не срабатывают. Помогите пожалуйста

Столкнулся со следующим странным поведением. В хроме пока работает transition, фон просвечивает через border-radius (наведите на первый пункт). В Лисе градиент имеют такую особенность: полосочка 10px, полосочка 10px, прозрачность, на стыке второй полосочки и прозрачности образуется некий серый фон толщиной пикселя в два. Поскольку фон в примере двухнаправленный, то Вы, убрав одно направление (65 или 66 строчка, не забудте в конце оставленной строчки поставить точку с запятой ), можете увидеть что полоска есть только в том направлении, где нулевой переход из цвета в прозрачность. По обеим глюкам: что это? откуда это? куда писать? какие способы бороться? Спасибо за внимание

Буду очень благодарен, если вы мне подскажите, как можно решить проблему. Скидываю простейший пример вёрстки, демонстрирующей проблему, без лишнего мусора - https://github.com/R45H/bug-in-ff. Нужно, чтобы в firefox отображалось также, как и в хроме. С учётом адаптивности. Здесь используется флексбокс и паддинг снизу в % для сохранения пропорций картинок. Проблема заключается в том, что при указании flex-direction: column; лиса схлопывает картинки (а хром нет). Мне подойдёт любое решение, но поведение и вид должны быть такими же, как в примере в хроме: - пропорциональное уменьшение картинок; - блоки с синей обводкой растягиваются на всю оставшуюся высоту; - голубой и зелёный блоки подстраиваются по высоте друг под друга (неважно где сколько текста); - на планшетах всё должно разворачиваться по-бутстраповски (как сейчас в примере). Заранее спасибо за помощь.

Здравствуйте, уважаемые форумчане) Помогите с небольшой проблемой. Криво отображается блок в Firefox. Хотя в Chrome все нормально. Хром Firefox Код CSS и HTML: .mail-delivery { box-sizing: border-box; float: right; width: 560px; max-height: 220px; padding: 6px; color: #5a5a5a; font-weight: 400px; border-radius: 16px; background: url("../img/message-pattern.png") #fff; } .message-wrapper { box-sizing: border-box; width: 549px; max-height: 208px; padding:5px 20px 5px 20px; background-color: #f8f7f4; border-radius: 15px; clear: both; } .message-wrapper p { box-sizing: border-box; margin-bottom: 35px; color: #5a5a5a; font-size: 16px; font-weight: 400; line-height: 22px; } .message-wrapper form { font-size: 0px; } .feedback.pop-window { display: block; } .message-wrapper input[type="email"] { box-sizing: border-box; display: inline-block; width: 356px; margin: 0; margin-right: 10px; margin-bottom: 36px; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; color: #323232; font-size: 16px; line-height: 24px; vertical-align: top; box-shadow: 0 0 0 2px #d3d3d2; border: none; border-radius: 5px; } .message-wrapper input[type="submit"] { display: inline-block; padding:10px 21px; color: #fff; font-size: 17px; line-height: 24px; vertical-align: top; font-weight: 700; text-align: left; border: 0; border-radius: 40px; background-color: #e94e37; background-image: linear-gradient(to bottom, #f26843 0%, #e74b36 100%); box-shadow: 0 2px 2px rgba(172, 16, 0, 0.64); cursor: pointer; outline: none; } <div class="mail-delivery clearfix"> <div class="message-wrapper"> <p> Подпишитесь на нашу сладкую рассылку и будете всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой не нужной ерунды. Честно =) </p> <form class="message-delivery" action="url" method="get"> <input class="form-field" id="mail" type="email" name="email" placeholder="Электронная почта" required> <label class="login-form__label" for="mail">Электронная почта</label> <input type="submit" value="Отправить"> </form> </div> </div>

В фаерфоксе возникает проблема с относительными вертикальными отступами у флекс элементов. margin padding Посмотрите оба примера в хроме и в фаерфоксе. В хроме всё отображается так как надо, а в фаерфоксе нет(((. В чём проблема?

Всем привет. Есть сайт: http://www.tongat-1.ru/ В Chrome и Opera нормально всё отображается, а вот в FireFox блок с видео с ютуба почему то съезжает вниз ((. Народ, подскажите как CSS мне подправить, какой костыль дописать чтоб в FireFox этот блок тоже нормально отображался?

Ломается верстка меню в FireFox (40-ая версия и ранее) Меню отскакивает вправо: Сайт на worspress

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Recipes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="css/style.css" rel="stylesheet"></head><body> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div></body></html>.image { display: inline-block; height: 100px; width: 24%; border: 1px solid black;}@media screen and (max-width: 640px){ .image { width: 49%; }}https://yadi.sk/d/l4naCM-4q4suC- файлы Простой пример. Блоки размещаются в одну линию, а при ширине экрана 640 и меньше их ширина становится 49%, т.е. в один ряд размещается два блока. Проблема : в firefox (и только в нем) блоки принимают ширину 49% уже при экране 768px. Почему?

Во всех браузерах кроме Firefox, Ajax работает. Код ниже. В Firefox выдает следующее: На сервере откуда берется html, в htaccess прописано: var urlPage = 'https://страница,где должна происходить магия', queryLink = 'https://ссылка с айди/?id=', linkPartners = 'https://ссылка на html на сервере.html'; $.ajax({ url: linkPartners, success: function(html){ if (urlPage == window.location.href) { $(".orange-box .blink").html(html).css({ "background": "none", "padding": "0" }); $(".orange-box").css('background', 'none'); $(".ob-content").css('background', 'none'); }; $('.table-partners tbody a').attr('href',function(){ linkSub = this.href + $('#inner_link').data('link'); return linkSub; }); } }); $.ajax({ url: queryLink + $('#inner_link').data('link'), success: function(html){ if(urlPage == window.location.href ) { if (html != "") { var objJSON = jQuery.parseJSON(html); if (objJSON != null) { var balance = objJSON.sum; if (balance != null) { $('.profileData h4').append('<div class="bal-left">Действительны до <a href="#" target="_blank">1.10.2015</a>: <strong>' + balance + ' </strong></div>'); return; } } }; } $('.profileData h4').append('<span style="display:none;"></span>'); } });

Есть вот такая конструкция.. http://jsfiddle.net/4376rfy8/3/ В IE, Google Chrome и Opera вроде работает, а вот в FireFox текст в левой колонке почему то съезжает вниз, методом тыка выяснил что скорее всего виноват display: table; в родительском контейнере. Но вот обойти этот глюк пока не могу придумать как((( Может кто сталкивался с подобным!? Что нужно в итоге: 1) левая и правая колонка одинаковой высоты с плавующей шириной 2) в правой колонке 4 блока которые центруются(выравниваются) по вертикали, причем верхний блок должен прилипнуть к потолку, а нижний к полу.

Не знал к чему отнести этот вопрос, и написал в этой ветке. У меня "типа" динамический сайт, есть файл "config" где я подключаюсь к БД, определяю какие то константы основные. Есть модель, где я получаю какую-то информацию из БД Есть контроллер, в котором я данные из БД сообщаю с активным шаблоном. Есть соответственно папка шаблонов. В шаблонном файле index.php есть такая строчка <?php include "pages"."/" .$view. ".php"; ?>В папке "pages" у меня хранятся шаблоны страниц. в файле "controller.php" есть такая строчка $view = empty($_GET['view']) ? 'pictures' : $_GET['view'];в принципе все работает, не знаю насколько это правильная схема, но все работает. Страницы подаются динамически. но когда я смотрю стили в firebug, то не вижу там название css файла, только по #2 понимаю, что это 2 подключенный файл css в то время как на статичном, да и везде раньше было именно название файла там Подскажите, что я делаю неправильно

Ребят, помогите с сайтом. К сожалению поздно додумался проверить его во всех браузерах, в итоге не могу разобраться в чём проблема. Сайт небольшой, писал его в Dreamweaver. По сути это таблица из двух столбцов, в левом лого (с параметром position: absolute), ниже форма заявки. А в правом контент. Ниже этой таблицы футер. На фоне этой таблицы шаблон картинки, которую я потом поменяю. Проблема в том, что в IE (11) и Firefox содержимое левого столбца смещается ниже таблицы. И я не допёр почему. Вот архив с сайтом.

Во всех других браузерах проблемы не наблюдаю. Именно Firefox, версия 29.0. Масштаб >=100%. При 80% - нормально, а при 100% и больше делает некоторые линии жирнее. Подскажите пожалуйста как бороться с этим багом? код: <!DOCTYPE HTML><html lang="ru"><head> <meta charset="UTF-8"> <title>JavaScript уроки</title> <style type="text/css"> table { border-collapse:collapse; } td { padding:4px; border:1px solid black; } </style></head><body><!-- <script type="text/javascript" src="operatpry_cikla.js"></script> --><table> <tr> <td> random_text </td> <td> random_text </td> <td> random_text </td> ... <td> random_text </td> </tr></table></body>

https://developer.mozilla.org/en-US/Firefox/Releases/29

Дело в следующем: при наведении на пункт меню, над ними появляются иконки. Вот демка: http://videostroy.com/ Во всех браузерах кроме Firefox иконки отображаются верно. Каждая последующая иконка отсчитывают координату X от предыдущей. И только в Firefox отсчет ведется от начала блока. Помогите решить проблему пожалуйста. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.link1').hover(function() { $('#ico1').show(); } ).mouseout(function() { $('#ico1').hide(); } ); $('.link2').hover(function() { $('#ico2').show(); } ).mouseout(function() { $('#ico2').hide(); } ); $('.link3').hover(function() { $('#ico3').show(); } ).mouseout(function() { $('#ico3').hide(); } ); $('.link4').hover(function() { $('#ico4').show(); } ).mouseout(function() { $('#ico4').hide(); } ); $('.link5').hover(function() { $('#ico5').show(); } ).mouseout(function() { $('#ico5').hide(); } ); $('.link6').hover(function() { $('#ico6').show(); } ).mouseout(function() { $('#ico6').hide(); } ); $('.link7').hover(function() { $('#ico7').show(); } ).mouseout(function() { $('#ico7').hide(); } ); }); </script> <style> .menu-top-icons { margin-bottom: -5px; position: relative; /*border: 1px dashed black;*/ } .menu-top-icons ul { width: 95%; float: right; } .menu-top-icons ul li { display: inline-block; text-align: center; } .menu-top { padding: 0 5px 0 0; margin: 47px 0 0 442px; position: absolute; } .menu-top ul { width: 187%; float: right; display: table; border-collapse: collapse; } .menu-top ul li { display: table-cell; /*text-align: center;*/ } .menu-top ul li a { text-decoration: none; color: #444; font: normal 18px Tahoma; } .menu-top ul li a:hover { border-bottom: 1px dashed #95705d; color: #95705d; } #ico1, #ico2, #ico3, #ico4, #ico5, #ico6, #ico7 { display: none; vertical-align: bottom; } </style></head><body> <div class="menu-top-icons"> <ul> <li style="margin-left: 34px;"><img src="images/home.png" width="50" id="ico1"></li> <li style="margin-left: 101px;"><img src="images/about.png" id="ico2"></li> <li style="margin-left: 83px;"><img src="images/services.png" width="45" id="ico3"></li> <li style="margin-left: 104px;"><img src="images/articles.png" id="ico4"></li> <li style="margin-left: 95px;"><img src="images/reviews.png" id="ico5"></li> <li style="margin-left: 152px;"><img src="images/qanda.png" id="ico6"></li> <li style="margin-left: 165px;"><img src="images/contacts.png" id="ico7"></li> </ul> <div class="menu-top"> <ul> <li><a href="/" class="link1" onMouseOver="a_hover();" onMouseOut="a_out();">Главная</a></li> <li><a href="about.html" class="link2" onMouseOver="a_hover();" onMouseOut="a_out();">Рћ нас</a></li> <li><a href="services.html" class="link3" onMouseOver="a_hover();" onMouseOut="a_out();">Услуги</a></li> <li><a href="articles.html" class="link4" onMouseOver="a_hover();" onMouseOut="a_out();">Статьи</a></li> <li><a href="reviews.html" class="link5" onMouseOver="a_hover();" onMouseOut="a_out();">Отзывы</a></li> <li><a href="faq.html" class="link6" onMouseOver="a_hover();" onMouseOut="a_out();">Р’РѕРїСЂРѕСЃ-ответ</a></li> <li><a href="contacts.html" class="link7" onMouseOver="a_hover();" onMouseOut="a_out();">Контакты</a></li> </ul> </div> </div></body></html>

Современный Firefox умеет парсить данные в формате JSON самостоятельно, без подключения каких-то сторонних JavaScript скриптов. В подтверждение этому существует данная статья на MDN. Вот только в статье описаны примеры, когда сами JSON данные уже сразу объявлены непосредственно в переменной JavaScript. Кто-то владеет информацией, возможно ли JSON данные выдрать именно из отдельно оформленного *.json файла сдантартными средствами Firefox? Или для этого нужно использовать сторонние скрипты? P.S. Интересует только конкретно Firefox, т.к. реализую свою задачу только под него.

Доброго времени! Вот код: http://jsfiddle.net/Z6L4r/ в ff 24 (kubuntu) ссылка Help отображается внизу header-а, хотя должна быть с отступом в 10px сверху (примерно по центру header-а) opera, chromium - все нормально. Подскажите решение, пожалуйста. Спасибо.

Недавно узнал про сервис jsbin.com . Посмотрел. Понравилось. Только вот не могу понять: в видеотуториале открывают какую-то консоль и с помощью команд настраивают внешний вид и добавляют свои библиотеки. Насколько я понял, у автора видеотуториалов Хром. А что за консоль? В фаерфоксе есть что-то похожее? В фаербуге не нашел как вводить команды. Можете подсказать? Вижу тут людей много пользуются этим сервисом, должен хоть кто-то знать.

Привет всем. Заметил, что в firefox выравнивание текста по baseline происходит отлично от других браузеров. Baseline не совпадает на 1px. Вот что я имею ввиду: Кто как с этим борется? Исходник на jsfiddle: http://jsfiddle.net/KtbDU/

Здравствуйте, подскажите, пожалуйста, как сделать что бы в firefox заработало position-relative, display-table:cell и outline. демо код времменое решение: @-moz-document url-prefix() { .block { display: block; outline: none; } } но с таким фиксом картинка не будет центироватся