IE space between rows

Question

My site looks very different from FF and IE (http://www.kiubbo.com), as you can see there its a lot of space between ".news_item" lines in IE 8

If anyone has any idea why?

Thanks

Answer 1

I would recommend using a list to define your rows rather than a bunch of divs because it is more semantic. This could also help solve the space problem you're having.

Answer 2

the difference between ie and ff in padding and margin act, play with it in '.news_item' class

Answer 3

For IE running in compatibility node (i.e. like older versions of IE), your empty

<span class="news_item_title"></span>

at the end of each news item seems to render differently between IE and FF. Do you really need it there?

If it's IE8 you're specifically worried about, force it into standards mode by adding the relevant meta tag to your pages:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

That makes the page render almost identically to FF, apart from your top ad being aligned differently.

Answer 4

Validate the code. The w3C validator found 57 errors in the page, some of which can affect the layout.

The standards are quite clear on how to render correct code, but there is no standards for how to render incorrect code. The browsers just try to make the best of it, but they have different methods for what to do with incorrect markup.