Firefox CSS specific code not working


I have this page:

The two rotating images are off a bit by around 2 pixels. You can see the blue horizontal bar is slightly off to the left of the couple with the laptop.

I read on stackoverflow that this should work:

/* for ei-slider */
#family_img img {
    height: 415px !important;
    margin-left: -37px !important; /*sanjay - -9px*/
    margin-top: 62px !important;
    width: 585px !important;

#young_couple img {
    margin: 1px 0px 0px -34px !important; /*sanjay - no margin for this image*/
    height: 458px !important;

@-moz-document url-prefix() {
    #family_img img {height: 417px;}
    #young_couple img {height: 460px;}

Open in new window

But it doesn't work. It's in an external stylesheet at stylesheet04.css. What could be the problem?

Thank you<><
Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?
Victor KimuraConnect With a Mentor SEO, Web DeveloperAuthor Commented:
oh, I forgot to place the !important code in it:

@-moz-document url-prefix() {
    #family_img img {
        height: 417px !important;
        margin-left: -36px !important;
    #young_couple img {height: 460px !important;}

Open in new window

It works now! =)
Victor KimuraSEO, Web DeveloperAuthor Commented:
Forgot the !important attribute code. Works now!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.