Treehouse: Grow your CSS skills. Land your dream job.

Problem in IE – Really need help here

  • # February 22, 2010 at 9:32 am

    Hi Everyone,

    I am really struggling with the menu on this site:

    I am using Chris’ Magic Line which is working perfectly(except on IE5.5, IE6 and Opera).

    The problem is that in IE(8 is the only version I have), the ‘current’ page menu item turns black. Everywhere in my CSS tells it to be #ccc(or #fff if it is the current item).

    The strange thing is that the menu works pretty much as it should in: FireFox, Safari, Chrome, Opera(apart from the Magic Line)
    I also tested in IETester and it works fine in: IE6(apart form Magic Line), IE7, IE8 and IE Default(whatever that is)

    It works with IE8 in ‘compatibility view’, but doesn’t work in normal view. Also the client is using IE 7 and it doesn’t work for them.

    If anyone can shed any light on this for me I would really appreciate it!

    I’m using WordPress 2.9.2 and my CSS file is here:

    Thanks in advance!

    # February 22, 2010 at 1:10 pm

    Very odd indeed!

    One thing, this may not solve your problem, but IE sometimes doesn’t like it when there is a space before the Doctype. Make sure the Doctype starts on line 1.

    # February 22, 2010 at 2:34 pm
    "TheDoc" wrote:
    Very odd indeed!

    One thing, this may not solve your problem, but IE sometimes doesn’t like it when there is a space before the Doctype. Make sure the Doctype starts on line 1.

    Thanks for your help TheDoc, I didn’t realise it wasn’t on line 1, I have corrected that now but it didn’t fix the problem.

    I am on my laptop now and tried in IE8 on this and it has the same problem, so it’s definitely not a problem isolated to my PC.

    I have tried adding ‘!important’ to all of the ‘color’ attributes but that hasn’t worked.

    I really don’t understand this!
    Any more suggestions?

    # February 22, 2010 at 5:13 pm

    I’m honestly at a loss.

    # February 23, 2010 at 3:08 am

    you have this:

    #main-nav li.current_page_item, #main-nav li.current_page_item a { color: #ffffff; }

    and I dont know why – because any element inside your #main-nav li.current_page_item will be white – yet you then specify the A tag.

    I would try removing the first part and just using #main-nav li.current_page_item a { color: #ffffff; } if only because its a little redundant coding like that

    Oh and if you have IE8 – you have IE7… hit F12 or navigate to the developers tools in the menus and you will see you can set it to IE7 mode :)

    # February 23, 2010 at 6:06 am

    Hi Rob, thanks for your input.

    I have removed ‘#main-nav li.current_page_item’ and that doesn’t seem to make any difference, but as you say, no point having it there anyway if it’s not needed.

    I tried adding ‘!important’ to the color but that didn’t do anything.

    I also tried setting the background color of #navigation to #ff0000 just to see if the font was actually going black, and it still doesn’t appear, so it seems as if the text is for some reason going transparent. It is there though, because if you select it, then it highlights the text.

    Also thanks for the tip on IE7 mode, I tried that and it worked perfectly… I am getting more and more confused by this…

    # February 23, 2010 at 8:24 am

    Running XP on VMWare, the link only turned black in IE8 using IE8 standards, in IE7 with IE7 standards it worked OK. What you could try is making IE8 run with IE7 standards, while you are figuring it out.
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    # February 23, 2010 at 7:03 pm

    Brilliant, I didn’t know that was possible!

    Ok with it forced into compatibility mode at least it works for now.

    Any idea where I should start looking to get this sorted for real?

    # February 24, 2010 at 9:28 am

    Well if it works for you like that and the other browsers are OK, I wouldn’t bother bashing my brains out trying to find a solution. I’m sure you have lots of more important things to do, just put it down to the idiosyncracies of IE… ;)

    # February 25, 2010 at 5:37 am

    I suppose you are right, it just feels like a bit of a cheat!

    The website is pretty much finished now, what do you guys think of the design?

    # February 25, 2010 at 6:08 am

    No that’s not cheating, that’s MS and their stupid non standards browsers trying to make everyone do things their way instead of making a proper browser.

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

You must be logged in to reply to this topic.