Chrome messes up the website layout, FF and IE is good

Question

I am working on a website: http://www.bbp.nl/luuk-test/wac It displays really well on FF and IE. I went to test it in Chrome and it is totally messed up. Somehow Chrome displays all the divs underneath each other. I really don't know where to look since it also validates well in the W3C validator.

Also googled it, but could not find anything. Does anyone know the answer? Please help.

Answer 1

First of all it would be useful if your HTML is easier to read.

You open a paragraph-tag at line 41, maybe that is the issue?

Answer 2

You are using -moz-box-sizing in line 20 of your style sheet for your divs to change the calculated size of your boxes for mozilla browsers. This isn't recognized in chrome.

See: https://developer.mozilla.org/en/CSS/-moz-box-sizing

You can apply the fix for browsers using webkit, too:

div {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box; 
}

In my opinion a better approach would be to make your website look fine without this workaround and calculate your box-size based on its desired size minus its paddings.

Answer 3

Get this add-on for firefox it will tell you all the errors you have on your page... including the open-ended <-p-> tag as Machiel mentioned...

https://addons.mozilla.org/en-US/firefox/addon/249

Answer 4

In your CSS, you have:

box-sizing: border-box;
-moz-box-sizing: border-box;   

To get this working in WebKit (Chrome/Safari), use -webkit-box-sizing

-webkit-box-sizing: border-box;

Answer 5

I would completely remove those box-sizing properties and use more compliant properies like padding, margin, width and height for the sizing.