Twenty Twelve IE8 issues and gray bar at top

  • Hi All

    I’ve just updated a website using the twenty twelve theme. In general I’m very happy with it but have a couple of issues

    https://oaktree-floors.co.uk/

    1) There is a gray bar at the very top of the page (in firefox and IE8)

    2) In IE8 the menu is stuffed. I’ve tried installing a plugin (respond.js) to fix this but it doesn’t seem to work

    Any ideas ? Many thanks

    Steve

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Steve,

    The grey bar at the top of your page is there in every browser for me. This is because your <div id="page" class="hfeed site"> has a margin-top applied to it, pushing it down the page and leaving the grey space.

    The value for the margin-top is in REM, which is a CSS3 attribute – this is probably why you’re not seeing it in every browser, because it won’t be supported in older browsers. I’m not a fan of using REM values for this reason, but that’s just a personal preference. You definitely have a margin-top there which is causing the grey space.

    I also notice that padding around your <div class="wrapper" id="main"> looks different in IE8 (there’s a lot more of it), which may also be a REM issue.

    As for the menu, there’s a few things going on. First of all IE8 isn’t picking up your display: inline-block; for the menu items. There are some compatibility issues with IE8 and inline-block. You haven’t defined a DOCTYPE, so doing that might help (something like XHTML 1.0 Transitional perhaps).

    As for why the menu is starting off hidden in IE8, I’m not sure. The “Menu” toggle button has a display: none; applied, which is being obeyed in Firefox at least, but doesn’t seem to be working in IE8.

    I’m not sure where this menu toggle is coming from, but as you don’t seem to want to use it at all, I’d consider removing it.

    Hope that helps.

    Pete.

    Thread Starter Stevehello1234

    (@stevehello1234)

    Thanks Pete – looks like there is a bug raised on the IE8 functionality so I guess I’ll need to wait for the WP team to release the fix

    Thanks for looking at it for me

    <div id=”page” class=”hfeed site“>

    .site{ margin:0 auto !important} – will fix the issue

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Twelve IE8 issues and gray bar at top’ is closed to new replies.