Grow your CSS skills. Land your dream job.

Opacity and layers in IE7

  • # May 22, 2008 at 9:38 am

    This is a bit of a complicated query. I’m trying to write a dropdown transparent menu with floating submenus. It works fine in FF but in IE7, the transparency applied to the initial dropdown causes the submenu to truncate at the edges of its parent. If you remove the transparency on the parent it works fine, but that’s not what I want! Any help would be very much appreciated. I suspect this is a bug in IE7 which I’m not going to be able to find a workaround for… Code is below, ignore the IE7 alignment issues – I haven’t sorted this yet.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    # May 22, 2008 at 5:04 pm

    I threw this up online in case it helps anyone troubleshoot. At first glance… I have no idea what’s wrong :D

    http://css-tricks.com/examples/adamrj-TEMP.html

    # May 22, 2008 at 8:29 pm

    A dropdown menu only with css? Is this all browser-compatible? I can remember you once said that that would be almost impossible and that javascript was the best solution to do this :roll:

    # May 22, 2008 at 10:42 pm

    Nah CSS-only rollovers are totally possible, I just tend to like the javascript ones better as they support stuff like clicking and animations/fading, and delays and stuff like that.

    You can poke around on CSS Play for about a zillion nice examples of CSS only dropdowns:
    http://www.cssplay.co.uk/

    The problem here is the weird truncation happening in IE7 on the submenus. I haven’t had time to dig into it yet, but it’s super weird that transparency is causing it. Might possibly be an undocumented (as of yet) bug.

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

You must be logged in to reply to this topic.

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