CODEWITHSUNDEEP
htmlcsslayoutgoogle-chrome
Luuk
Luuk

Reputation: 51

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.

Upvotes: 2

Views: 6975

Answers (6)

Relaxing In Cyprus
Relaxing In Cyprus

Reputation: 2016

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.

Upvotes: 0

stefanglase
stefanglase

Reputation: 10402

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.

Upvotes: 7

Alex
Alex

Reputation: 12433

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

Upvotes: 0

Andy E
Andy E

Reputation: 344675

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;

Upvotes: 0

jason
jason

Reputation: 1172

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

Upvotes: 0

Machiel
Machiel

Reputation: 1515

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?

Upvotes: 2

Related Questions