CSS не загружается в Firefox, работает в Chrome / Safari

Question

CSS не загружается в Firefox, работает в Chrome / Safari

0

У меня есть портфолио, работающее на 4- ом курсе. Мой сайт здесь.

Я добавил пользовательский CSS, чтобы вы могли нависнуть над каждым изображением и показать ему до/после. Таким образом, эффект опрокидывания существенно.

Это пользовательский CSS, который я добавил:

#menu .item.selected a{ background: #444; }

::-moz-selection{ background: #A5A29F; color:#fff; text-shadow: none; }
::selection { background:#A5A29F; color:#fff; text-shadow: none; }
.rollover a{
   display: block;
   text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
} 


#example a{
    height: 550px;
    width: 450px;  
    background: url('www.example.com')
    no-repeat right top;
}
#example a:hover,
#example a:active{
   background-position: 0 0; 
}

И я загрузил каждое изображение в виде пользовательского HTML-текста и использовал его как код -

<div class="text_content">
     <div class="rollover" id="gold">
        <a href="http://a1.format-assets.com/image/private/s--K-oDqQbt--    /c_fill,g_center,h_550/a_auto,fl_keep_iptc.progressive,q_95/161188-8364422-gold.jpg">

        </a>
        </div>
PHOTO BY STEFAN B.
</div>

Im действительно потерял, почему он работает безупречно в Chrome и Safari и, похоже, не работает в Firefox. Я знаю, что это возможно, потому что этот сайт использует почти те же самые коды, что и я, и он работает на FireFox.

user3697775 02 июнь 2014, в 01:32

Источник

0

Работает ли он в других браузерах, IE, Safari, Opera и т. Д.?
Timmah 01 июнь 2014, в 23:23
1

Вы должны будете объяснить нам, что значит «работать без нареканий». Какая часть сломана? Не ожидайте, что мы откроем ваш код в разных браузерах и увидим те же проблемы, что и у вас.
Sparky 01 июнь 2014, в 23:23
0

@Timmah Это работает в Safari, я не проверял другие. Если это не работает в IE или Opera, это нормально, если я могу заставить его работать в Firefox.
user3697775 01 июнь 2014, в 23:26
0

@Timmah Изображения просто не отображаются в FireFox. Просмотр в Chrome и Safari.
JakeGould 01 июнь 2014, в 23:26
0

@Sparky В Chrome & Safari все загружается и эффекты наведения работают. В Firefox фотографии не загружаются. Вы по-прежнему можете перемещаться по сайту, но вы можете видеть только подпись к фотографии со ссылкой, но она не загружает реальную фотографию.
user3697775 01 июнь 2014, в 23:27
1

Посмотрите на свою консоль Firefox. Есть все виды Unknown property - Declaration dropped ошибки и предупреждения на вкладке CSS.
Sparky 01 июнь 2014, в 23:34
0

@Sparky Здесь определенно есть что убирать. Но конкретная ошибка была совершенно очевидна, когда CSS был загружен в текстовый редактор с окраской контекста.
JakeGould 01 июнь 2014, в 23:39
1

@JakeGould, О, я уверен, что это было очевидно ... просто пытался заставить ОП сделать это. +1 от меня на ваш ответ, хотя.
Sparky 01 июнь 2014, в 23:49

Показать ещё 6 комментариев

Теги:

jquery

html

css

google-chrome

firefox

1 ответ

Ещё вопросы

Работает ли он в других браузерах, IE, Safari, Opera и т. Д.?
Вы должны будете объяснить нам, что значит «работать без нареканий». Какая часть сломана? Не ожидайте, что мы откроем ваш код в разных браузерах и увидим те же проблемы, что и у вас.
@Timmah Это работает в Safari, я не проверял другие. Если это не работает в IE или Opera, это нормально, если я могу заставить его работать в Firefox.
@Timmah Изображения просто не отображаются в FireFox. Просмотр в Chrome и Safari.
@Sparky В Chrome & Safari все загружается и эффекты наведения работают. В Firefox фотографии не загружаются. Вы по-прежнему можете перемещаться по сайту, но вы можете видеть только подпись к фотографии со ссылкой, но она не загружает реальную фотографию.
Посмотрите на свою консоль Firefox. Есть все виды Unknown property - Declaration dropped ошибки и предупреждения на вкладке CSS.
@Sparky Здесь определенно есть что убирать. Но конкретная ошибка была совершенно очевидна, когда CSS был загружен в текстовый редактор с окраской контекста.
@JakeGould, О, я уверен, что это было очевидно ... просто пытался заставить ОП сделать это. +1 от меня на ваш ответ, хотя.

JakeGould · Accepted Answer · 2014-06-01T21-06-00.000Z

Существует опечатка в вашем CSS в custom_stylesheet.css над здесь. Проблема заключается в этом фрагменте кода CSS:

/*This is for you Matt*/
#giveIDnamehere a{
    height: 550px;
    width: ; /*Set half the image width here*/ 
    background: url('); /*Link to image here*/
    no-repeat right top;
}
#models a:hover,
#models a:active{
   background-position: 0 0; 
}
/**/

Обратите внимание на background: url('); просто устанавливается в одну цитату ' когда это должно быть ''.

/*This is for you Matt*/
#giveIDnamehere a{
    height: 550px;
    width: ; /*Set half the image width here*/ 
    background: url(''); /*Link to image here*/
    no-repeat right top;
}
#models a:hover,
#models a:active{
   background-position: 0 0; 
}
/**/

Как только я отредактировал это в копии рабочего стола, которую я сделал из HTML и CSS для отладки, все, похоже, работает в FireFox 29 в Mac OS X 10.9.3:

Также, как отметили другие, здесь определенно много, чтобы почистить здесь. Но конкретная ошибка была довольно очевидной, как только CSS был загружен в текстовый редактор с раскраской контекста. Посмотрите на следующий снимок экрана с BBEdit, чтобы понять, что я имею в виду. Черт возьми, посмотрите на контекстную раскраску в моем примере ошибки выше.

Кроме того, вот ваш CSS и HTML, хорошо отформатированный в BBEdit с помощью встроенных инструментов форматирования кода в Pastebin:

Очистка кода и удобство форматирования помогает быстро устранить такие проблемы.

Вау, я не могу поверить, что это была проблема. Я не понимал, что это была проблема вообще. Спасибо, очень ценю это.
Строка, которая следует no repeat , также неверна, и width должна иметь значение.
@AndyG Да. Здесь много, чтобы навести порядок. Но это задача для оригинального плаката. И, возможно, эта простая ошибка научит его, как лучше отлаживать код.
Спасибо, ребята, обязательно постараюсь научиться убирать вещи лучше. Рад, что эта главная проблема была решена, хотя. Очень ценю помощь.
@ user3697775 Пожалуйста, проверьте мои последние изменения. Внизу ссылки на ваш код, очищенный на Pastebin. Я должен был сделать это, чтобы решить эту проблему, чтобы вы могли иметь их. Пожалуйста, учитесь на чисто отформатированном коде; это может помочь вам сэкономить тонны головных болей!
@JakeGould Это здорово, спасибо большое. Обязательно посмотрю их и оставлю на всякий случай, если у меня возникнут проблемы. Спасибо, что нашли время, чтобы сделать это.