SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie8 Layout Issues

    Site is badly broken in ie8.

    www.ogsindustries.com/lemdev/

    user: ogs
    pw:4321


    Can someone please explain to me the major things that ie does not render correctly. Is there a "main" culprit? I use a lot of floats, are they rendered differently in ie? Is it simple padding/margins that are different?

    I do use some CSS3 properties but those are for gradients/rounded corners. Not so much for layout.

    In the meantime doing some research, thanks guys!

  2. #2
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok - I think it was mostly an HTML5 issues, this is my first HTML5 I've done, so I included this...

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

    A few things are still messed up though.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Yes you must include the shiv if you are using the new html5 elements as Ie8 and under don't understand them. You would also need to set the elements to block but it is already handled in your reset sheet.

    A few things are still messed up though.

    You will need to be specific Which things exactly?

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Specifically, section id="bottomContent" > section id="col4" ...there should be 4 'boxes all lined up in a row.

    You can check in Chrome or Firefox to see what it should look like.

    Thanks!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You are using :last-child to target the last div at the bottom but ie8 doesn't understand last-child so gets no styling. You will have to add a class to that div in the html for ie8 and then target it directly with css.

    e.g.
    Code:
    #col4 div.lastone {
      background: none repeat scroll 0 0 transparent;
      border: medium none;
      float: right;
      margin: 0;
      width: 225px;
    }
    Don't comma separate that rule with the :last-child rule block because browsers are required to drop the whole rule block (including all comma separated selectors) when they encounter something they don't understand.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah! Interesting, thanks Paul!


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
  •