SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Boston, MA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help - Drop Down Menu gets overlapped in Firefox 2

    Hi everyone,

    For some reason, my drop down menu (courtesy of Dynamic Drive) gets hidden by the banner graphic beneath it. In every other browser that I've tested (IE6, IE7, Safari, Opera), the [B]menu drops in front of the banner like it should, but in Firefox 2, it gets overlapped instead.

    I have position:relative with a z-index:1 set for the main banner graphic and position:absolute with a z-index:2 for the phone image on the right. And the drop down menu has z-index: 999999 for the stacking order, so that it sits at the very top. I avoided using negative z-indexes, as Firefox 2 ignores it.

    Here's the link to the markup: http://www.digital-abode.com/i2c_test/about/contact.htm

    Here's the CSS to the drop down menu: http://www.digital-abode.com/i2c_test/css/menu_DD.css

    Also...

    Here's the markup and CSS code for the banner graphic and phone photo:

    /////////////////////////////////////////////////////////////////////////////////////////////////////

    <div id="innerHeaderWrapper">
    <h2>Contact Us</h2>
    <p id="tagline">Protect your most valuable <br /> &nbsp;&nbsp;assets. Contact us today.</p>
    <div id="contact"><img src="../img/phone.png" /></div>
    </div>


    #innerHeaderWrapper {
    position: relative;
    width: 711px;
    height: 141px;
    margin: 2em auto 0;
    background: transparent url(../img/inner_header_gfx.gif) no-repeat center top;
    border: 0px solid blue;
    z-index:1;
    }

    #innerHeaderWrapper h2 {
    font: bold 12px "MetaOT-Bold", Arial;
    color: #c7202d;
    padding: 1.5em 0 .6em 7em;
    margin: 0;
    line-height: 17px;
    text-transform: uppercase;
    letter-spacing: 2px;
    height: 10px;
    }

    #innerHeaderWrapper p#tagline {
    font: normal 40px "Adobe Garamond Pro", Garamond, Arial;
    color: #c7202d;
    margin: 0;
    padding: 0;
    margin: 0 0 0 1.3em;
    letter-spacing: 1px;
    line-height: 44px;
    }

    #innerHeaderWrapper #contact {
    position: absolute;
    top: -15px;
    left: 510px;
    width: 192px;
    height: 168px;
    z-index:2;
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////

    In Firefox 2, I can't figure out how to get menu to appear on top of the banner when it drops. Is this a known bug in Firefox 2? When I completely remove the positioning for the banner and photo, the menu displays the correctly. I only get this problem when I start to introduce positioning.

    I'm not exactly new to CSS, but this one problem has nearly brought me to my knees. Any help is very much appreciated.

    Thanks so much,
    Catherine

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have position:relative with a z-index:1 set for the main banner graphic and position:absolute with a z-index:2 for the phone image on the right. And the drop down menu has z-index: 999999 for the stacking order, so that it sits at the very top. I avoided using negative z-indexes, as Firefox 2 ignores it.
    The higher z-index isn't applyed until it also get a position:relative.

    In Firefox 2, I can't figure out how to get menu to appear on top of the banner when it drops. Is this a known bug in Firefox 2? When I completely remove the positioning for the banner and photo, the menu displays the correctly. I only get this problem when I start to introduce positioning.
    (You can also test removing the overflow:hidden on the #header.)
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Boston, MA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,

    Thank you for the response. Unfortunately, I tried both of your suggestions but neither seem to work.

    The higher z-index isn't applyed until it also get a position:relative.
    Whether I apply a position: relative or position:absolute, to the banner or phone graphic, there seems to be no visual difference.

    (You can also test removing the overflow:hidden on the #header.)
    Not sure what you mean here, since I don't have "overflow:hidden" assigned to either the banner or phone graphic. if you're referring to the CSS for my DD menu, I tried removing "overflow:hidden", but no luck.

    Thanks,

    -Catherine

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you mean here, since I don't have "overflow:hidden" assigned to either the banner or phone graphic. if you're referring to the CSS for my DD menu, I tried removing "overflow:hidden", but no luck.
    In the master.css section Header Styles:
    Code:
    #header {	
    	width: 778px;
    	padding: 0 0 0 0;
    	clear: both;
    	overflow: hidden;
    	border: 0px solid blue;
    	}
    If needed maybe I can look closer at the positioning later.


    (You have a typo in the ie6.css; the Star-Html hack should be *(space)html.)
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Boston, MA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,

    I wanted to come by and say THANK YOU!!! for your wonderful help. You saved me endless hours of frustration. I wouldn't have thought twice about removing the "overflow:hidden" to resolve my issue, thinking that the actual problem was much bigger than that. But it took a genius like you to figure it out for me.

    Also, I wanted to mention that removing this offending line of CSS code fixed another major problem that I've been having with my Firefox display.

    So I am doubly grateful.

    Thanks again!

    -Catherine


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •