CSS Rendering Issue in Firefox

Question

I am just about to wrap up my first ever major web development project after teaching myself to code over the past couple of months. However, I am still struggling with a couple of the basics it would seem.

I have a instance of the page loading completely differently on Firefox than it does in either Safari or Chrome.

You can see an example of the page I am referring to here: http://fmhgifts.com/home-office/ but I have included some screenshots as well to demonstrate what I mean. First off here is it displaying correctly in Chrome: and then here is the exact same page as it renders in Firefox:

I have spent some time trying to play around with the web development toolbar in order to diagnose the problem but so far have been unable to do so. If someone with more experience would be able to help me with this I would be insanely grateful.

Answer 1

The problem is that you're using -webkit-transform, which is specifically intended for webkit-based browsers (Firefox does not use webkit, and neither does Internet Explorer). There are a number of ways to achieve a grid without -webkit-transform. You seem to be using one such way already: the top and left CSS properties (there are also bottom and right properties). Play around with those.

Answer 2

Just try remove float:left from

#filter-bar {
    float: left;
    margin-bottom: 35px;
}

rest i think it will take care on its own . Try and let me know . since its a floating elemnt the other divs are getting pushed up rather than being dow . Firefox is actually right in that sense . u will need to re adjust chrome styling making it uniform for all .