FUCKING CSS and browser inconsistencies.

Trying to make a simple static site but these fucking browsers are making it so hard I want to program console application instead.

Also for some reason mobile Firefox don't give the right window height and width fuck everything.

If you want to take a look at what I am talking about

rammmukul.github.io

I know the code is a mess but I wanted to make a working prototype fast (which it is now) but have to look so many CSS properties just to make it look right but even after making it right on every desktop browser (no idea about safari) mobile FF has decided to fuck everything up for no apparent reason.

And the wort thing is edge is doing the best job of all.

And I have to make some 4-5 changes just for Firefox which is my primary browser.

i always do height: 0; and width: 0;

@calmyourtities for which element?

@rammmukul body, html or just body, i cant remember. i think i also added a display of position property too…

Well I have to do height: 100%; because FF thinks body should have height:0px; by default.

Body height on ff, as it should, reflects the content you put there.
Static, absolute or float elements do not change that.

@nbamaral sure but every other browser by default have height:100%; and it also makes css backgrounds (like I am using as achieving the same result with images is somewhat impossible and would make the site heavy) clip off annoyingly.

@rammmukul
Without code is hard to comment.
I know the problem you mention.
You can either javascript an adjust() to change those Heights without relying on defaults (always shaky ground), explicitly assign values to those elements or use vh/wh on that media query. I've resorted to those 3, always code for ff desktop, check on chrome and test on ff mobile because the emulator (even if they're both Firefox) is not accurate on body/html height. Hope it helps