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

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.

---

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.

---

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?

---

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

---

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;

---

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

---

Chrome doesn't support box-sizing, which is annoying because its part of CSS3.

The problem arises if you specify a margin of 100% for a DIV, then give it a border and a margin of 5px (for instance). With box-sizing set to border-box, you get a nice indented DIV. Without box sizing, the div overflows. Now, you could get around it by using a wrapper DIV, but thats extra markup, or by specifying the width in pixels, but that won't work if you don't know the width.