I’m working on a new website – http://cravezilla.com – which runs on WordPress. I’ve optimized the site for Chrome, Mozilla, Safari and IE9+. However, on IE8 the columns of my site get all thrown off, and I’m having trouble figuring out why?
I’ve attached a screenshot of my IE8 preview. Is there something I could include in the CSS to fix this problem?
Here’s the image:
You are using box-sizing property which is not supported by IE8. Thing is that you have a wrapper div for those 3 elements with fixed width of 950px. And you specify the width of each element 33.3% and padding 8px. It works with box-sizing because padding is not added to the width. And as IE doesnt have that method and adds the padding to the width you get 33.3% + 33.3% + 33.3% + padding values which is wider than 950px fixed size and that results in third element floating to the new row.
I suggest you remove the box-sizing attribute and set fixed width to those divs to around 300px. It should be on line 483 in your css file.
Hope it helps.
try this in your css file