Layout all over the place in IE8 and older Firefox

HTML & CSS
1

Hi, I need some help with my HTML 5 site which I’ve started with enthusiasm, but I’m not enough of a proficient coder to warp my mind round the behaviour of the layout in older browsers and IE.

It looks fine in FF8 and Chrome. But when I look at it in FF3 and IE8 the layout is all over the place. Both of these browsers eem to behave similar.

Could anyone have a look at it? I feel that I’m missing something fundamental but cannot work it out. Many thanks!

2

IE 8-6 won’t let you style the unknown elements (such as header,footer, article etc.). The workaround for this is to create an element with javascript and then you can style it.
For article it will look like that:
document.createElement(“article”);

There are ofc ready js libraries for this:
http://www.modernizr.com/

Hope this helps.

3

Thanks for the reply, sularome.

That’s why I have this in the header (at least that’s what I understand will fix it):

<!--[if lt IE 9]>  
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->

Also, I’m using jQuery 1.7, and I thought that would solve it also.

In any case, despite these two things above being in place, I get a broken layout in IE8 and FF3.

Sill need help here…
Many thanks!

4

Ah, sorry, i missed it.

I think this will help then:


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
5

That fixed it, thank you! So, I need to have both, the javascript and the display: block; part, right?

I wasn’t aware of that. Many thanks.