Formatting problems in IE 8

  • Resolved Ate Up With Motor

    (@ate-up-with-motor)


    11 years, 1 month ago

    I was testing the theme in multiple browsers and realized there are a number of serious formatting problems when viewed in IE 8.

    First, the main menu items are not picking up the color specified in the style sheet and theme options: the menu “buttons” are background color instead and the mouseover colors don’t appear. (The buttons are also taking up more space than on other browsers, which is forcing the menu onto two lines.)

    Second, the sidebar gets forced all the way to the bottom of the page, appearing below the content area.

    Third, the border elements around each post don’t appear at all when viewed in IE 8.

    Fourth, when viewing a post, there’s no padding between paragraph elements. I haven’t changed the default padding (10px), which appears correctly in other browsers.

    Fifth, and probably the least serious, the genericons don’t show up; there are just empty spaces.

    (This is the development site if you want to see what I mean.)

    I’m guessing this is a function of the weird way IE interprets CSS, but I’m afraid I don’t know how to fix that. Any ideas?

    Sorry to keep bugging you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author ronangelo

    (@ronangelo)

    I’m guessing this is a function of the weird way IE interprets CSS.

    Yes. Old browsers also don’t know how to handle html5 tags like <nav>, <article>…. Which Frontier uses.

    but I’m afraid I don’t know how to fix that. Any ideas

    Using a plugin like modernizr should fix most of these issues.

    Thread Starter Ate Up With Motor

    (@ate-up-with-motor)

    Okay, I installed modernizr and that seems to have fixed many of the issues.

    The genericons still don’t show up (they now appear as empty box characters), which I’m not too worried about. However, I am concerned that the content area and main menu border properties are still not being followed. It seems like IE 8 is still expanding the element content/colors to the edges of those elements in a way that makes the borders disappear. (I’m dimly aware that IE treats width and margin/padding attributes differently than other browsers.) Do you have any suggestions in that regard?

    Thanks!

    Theme Author ronangelo

    (@ronangelo)

    It seems like IE 8 is still expanding the element content/colors to the edges of those elements in a way that makes the borders disappear.

    I’m actually not seeing this issue (I’m using IETester). Are you sure that’s IE8? Anyway, I can’t think of anymore suggestions if it is indeed still displaying that way.

    As for the genericons, you can download their font file https://genericons.com/ (You only need the genericons-regular-webfont.eot). Add that file on your child theme folder then add this on your css.

    @font-face {
    font-family: 'Genericons';
    src: url('genericons-regular-webfont.eot');
}

    Thread Starter Ate Up With Motor

    (@ate-up-with-motor)

    I will try that with the genericons.

    As for the other, maybe it’s that IE 8 doesn’t support the box-shadow property; there’s no shadow around any of the widgets, either, although there is in other browsers.

    Well, I can live without that. Modernizr at least keeps the layout from looking broken, even if it’s not as pretty this way.

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Formatting problems in IE 8’ is closed to new replies.