CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
samrap
samrap

Reputation: 5673

Firefox not rendering entire CSS document

EDIT

Problem Solved! For some reason I needed to put the background style before the ms vendor prefixes

So I launched my website last night and after sending the link out to some of the guys in chat I found that the background image is not displaying at all in Firefox. The path is correct. I went to Firefox and opened firebug, and it seems that Firefox is completely ignoring an entire section of my CSS document. This is not happening in Safari or Chrome. Here is the chunk that I am having a problem with:

(What is looks like in view page source in Safari and Chrome)

#header {
    width: 100%;
    min-height: 300px;
    overflow: hidden;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
    sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
    sizingMethod='scale')";

    background: url(/images/ios7.jpg) no-repeat fixed;
    webkit-background-size: 100% 100%;
    moz-background-size: 100% 100%;
    o-background-size: 100% 100%;
    background-size: 100% 100%;
}

(What I see in firebug)

#header {
    background-size: 100% 100%;
    min-height: 300px;
    overflow: hidden;
    width: 100%;
}

Not only is it ignoring the largest section of this style, but it rearranged the rest of it. I've never seen anything like this. You can view the site at samrapdev.com

I've come across a few other strange things Firefox seems to be doing such adding styles I never specified, for example:

.mainNav ul li:hover {
    background: rgba(255, 255, 255, 0.2);
}

Is changed in firefox to:

.mainNav ul li:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
}

What is going on here?

Upvotes: 0

Views: 91

Answers (2)

Quentin
Quentin

Reputation: 943108

Firebug shows you the applied styles after the CSS is parsed, and it reorders the properties for consistency.

CSS has rules which cover unrecognised properties (ignore them) and shorthand properties with optional values left out (set them to defaults).

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
sizingMethod='scale');

Proprietary Microsoftism. Ignored.

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
sizingMethod='scale')";

Ditto.

webkit-background-size: 100% 100%;

Invalid. (If it was -webkit- then it would be an experimental property for WebKit browsers and should be ignored).

moz-background-size: 100% 100%;

Invalid. (If it was -moz- then it would be an experimental properties for Mozilla browsers. Firefox now supports the property without the prefix so it should still be ignored.)

o-background-size: 100% 100%;

As webkit but for Opera.

background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);

This is an example of the default values being inserted.

Upvotes: 2

Durai
Durai

Reputation: 582

I think it's because of a script error.When i check it in firebug i am getting the following script error

TypeError: listElm[index] is undefined listElm[index].fadeIn(900);

fixing this will solve the Background issue.

Upvotes: 0

Related Questions