Margins drastically different in Safari than Chrome and Firefox

I just jumped into a project that was about 70% finished. The home page html5 video section and general layout of home page look perfect on Chrome and Firefox, but in Safari, giant random margins appear above and below the html5 video header. I realized that adding width:100%; and height:100%; are causing the added margins.

Please take a look and compare them on each browser.

I've tried adding display:block to the video container as well as changing margin to padding.

Many thanks in advance.


I took out width:100% and height:100% and added min-width:100% and it did the trick.

Need Your Help

NodeJS reading dynamically directory

javascript node.js readfile readdir

I am making a tool that reads text files from a directory. I am using NodeJS fs.readdir and fs.readFile functions. The problem is that if I add a new folder I have to run the server again. Do you h...

Horizontal space between divs

css .net html margin

I'm doing a webpage for a school project And I've run into this problem.