Grow your CSS skills. Land your dream job.

Background color not showing in IE8? Why??

  • # March 7, 2013 at 12:09 pm

    Hi

    On the following code does anyone have any ideas why the background image and colour is not showing up in IE8, it works fine in IE9, Chrome, Firefox etc

    Code Snippets are shown below, it’s really frustrating so I would appreciate any fix for this please

    CSS Code Snippet

    HTML Web snippet

    # March 7, 2013 at 12:15 pm

    typo?

    navi#top

    # March 7, 2013 at 1:22 pm

    Yup. <NAVI> is not an HTML element that IE8 understands.

    # March 7, 2013 at 4:19 pm

    Sorry it should say

    # March 8, 2013 at 1:13 am

    Well fix that and you’re set.

    # March 8, 2013 at 3:46 am

    By the way: don’t qualify your selectors. Especially when using ID.

    # March 8, 2013 at 2:38 pm

    I have and it still is not working. Is

    If this is the case, how can I build in the functionality required so the menu background shows in IE8 and below

    # March 8, 2013 at 2:39 pm

    Have you linked in the HTML5 Shiv?

    I would do that but a quick fix would be to change [nav] to [div]

    # March 8, 2013 at 4:10 pm

    One other thing that might help is clearing the floats you have set on your menu items.

    There are a couple methods to do this. First is you add a div with a class of clear (class could be anything really) after the list item just before the closing ul tag (if the menu in generated place before the closing nav tag). Then in your stylesheet add a rule for clear with an attribute of clear both.


    .clear { clear: both; }

    Another method that has less browser support (does not work in old IE) is to use a pseudo element instead of an extra div to clear.

    nav ul:after {
    content: “”;
    display: table;
    clear: both;
    }

    This may not solve the issue outright however, I would do as Paulie_D suggests and include HTML5Shiv on your page too. Place the following in your head to get HTML5 tag support in old versions of IE.

    src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”

    EDIT: I just can NOT get the code highlighter working like it should! *grumble*

    # March 12, 2013 at 7:22 am

    Many thanks the HTML5Shiv did the trick

    The only issue I have now is when viewing the menu on iPAD/touch screen tablets when pressing the menu item which fires the mega menu, when pressing the link to open the menu, the mega menu appears briefly but then the resulting page loads so the user is unable to access any of the links in the drop down menu.

    Is there a way to stop this or to show an Ipad only menu? or can the nav be adjusted to cater for touch screen tablets?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".