[FIXED] Why aren't my overflow and display properties working in Firefox and Chrome?

Issue

I have in my CSS this class:

.middleContent { overflow: hidden; display:inline-block; }

This works in IE but not in Firefox or Chrome so I wanted to do a sanity check here because I am not sure how to write this and might need direction.

To leave it working in IE, I left the above line:

.middleContent { overflow: hidden; display:inline-block; }

So for Firefox and Chrome, do I add the following lines like this:

For Firefox:

@-moz-document url-prefix() { 
     .middleContent { overflow: hidden; }
}

For Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .middleContent { overflow: hidden; }
}

Solution

Yes, you are correct. To Target Chrome :

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 div{top:0;} 
}

To Target any firefox:

@-moz-document url-prefix() { 
      .selector {
         color:lime;
      }
    }

Answered By - yardie

Answer Checked By - Terry (PHPFixing Volunteer)