SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout all over the place in IE8 and older Firefox

    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.

    http://fusion.com/hunton/dealers.php

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

  2. #2
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/
    http://code.google.com/p/html5shiv/

    Hope this helps.

  3. #3
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, sularome.

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

    Code:
    <!--[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. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, sorry, i missed it.

    I think this will help then:
    Code:
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

  5. #5
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •