Grow your CSS skills. Land your dream job.

Help with CSS Menu States

  • # March 29, 2013 at 6:11 pm

    You magnificent bastards! http://vapedgoodz.com to see how I pulled it off. I owe a debt of gratitude to @WolfCry911 (as usual) as well as to @cwork and his outside the box thinking. Thanks guy!

    Best,
    Tanner

    # March 29, 2013 at 6:27 pm

    Internet Explorer is the biggest piece of …. ugh.

    1. Could either of you explain why IE is displaying my container div as left aligned? Opera, Safari, FireFox and Chrome all display it correctly, what’s up with IE?

    2. Why does IE choose to show selected pages with a green background and green text while all other browsers choose to display selected pages with a yellow background and green text?

    My brain is fried. When will Internet Explorer go away … forever?

    # March 29, 2013 at 6:46 pm

    your html is malformed – the doctype is inside the body

    # March 29, 2013 at 7:41 pm

    Say whaaaaaaat?

    # March 29, 2013 at 7:44 pm

    Haha. It is! Must have done that when I was excluding the menu from the header.php file. Thanks @WolfCry911! Time to take a break!

    Best,
    Tanner

    # March 29, 2013 at 7:50 pm

    That fixes the centering issue, thank you. Still don’t know why menu buttons are different in IE though.

    If I’m on the goodz.php page in all other browsers the Goodz menu button is green text on yellow background

    If I’m on the goodz.php page in IE the Goodz menu button is green text on green background.

    Any ideas on that? What’s your PayPal, @WolfCry911? I’d like to send you a few bucks for a beer. @Paulie_D and @CWork as well.

    # March 29, 2013 at 10:04 pm

    I appreciate the offer, but it’s truly not necessary. Let’s just make it a virtual beer ;)

    I’ll take a look at the menu buttons in IE…

    # March 30, 2013 at 5:42 am

    no problem, tanner. I’m new here, and just glad I could be of some help at least :) As for IE, I can confirm there is no issue in IE 10, but I did see the bug in 9. SO…I am not an expert, but I think you might need to somehow make IE <= 9 compatible with the html 5 doctype. Or maybe use Modernizr and see if that helps?

    # March 30, 2013 at 8:25 am

    It’s not the doctype – no new elements are used. It’s the filter properties. The problem is that it appears the filter on .button can’t be overruled later with another filter (someone please correct me if I’m wrong).

    # March 30, 2013 at 12:41 pm

    Figured out the issue. Maybe someone could explain it to me. The CSS that commanded the button states by the body id had to come before the CSS that commanded the button states normally. Again this is only IE acting this way. Wonder why. http://vapedgoodz.com

    # March 30, 2013 at 12:58 pm

    It’s as I stated, once a filter is used, it can’t be overwritten. So with the standard button styling coming first, the id class descendant selector couldn’t overrule the standard button background.

    With the descendant selector first that background filter is applied before the standard button filter and works!

    If it were me, I’d do away with the filters altogether and let (older) IE users suffer – that or use a simple background sprite for everything.

    # March 30, 2013 at 2:10 pm

    Here are three simple ways to do it. They all work in IE.http://www.websitecodetutorials.com/code/css/highlight-current-page.php

    # March 30, 2013 at 3:46 pm

    @wolfcry911 I didn’t know that about filters! Thanks for the tip.

Viewing 13 posts - 16 through 28 (of 28 total)

You must be logged in to reply to this topic.

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