Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Exclamation CSS issue with older browsers regarding z axis and drop down menus!

    Hi, I have a predicament kind of! Older browsers don't seem to get the Z Axis too well do they in CSS? So I have a problem where in old browsers the drop down menu on my site doesn't go over the flash slider I have.

    Here is the site addy! http://www.whitehillenergy.com/ Any known fixes to that?

    Thank you in advance for all of your help!!!

  2. #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That isn't a flash slider. Change this
    Code:
    #slider { width:980px; padding:0; margin:0 auto;}
    to this
    Code:
    #slider { width:980px; padding:0; margin:0 auto; z-index:0; position:relative;}
    z-index isn't an issue with older browsers, it is just a matter of understanding how to use it. Anything with position:static which is the default cannot have a z-index applied to it. It needs to be position:relative|fixed|absolute.
    Change this
    Code:
    .nav{
        width:800px;
        background: #000;
        display:block;
        float:left;
        position:relative;
    }
    to this
    Code:
    .nav{
        width:800px;
        background: #000;
        display:block;
        float:left;
        position:relative;
    z-index:1;
    }

  3. #3
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hmm, I am referring to IE 7 by the way, I just checked the browser version. I have no idea why I was so confident it was a flash slider rather than jquery, sorry about that. I think it was because I was originally going to use a theme with a flash slider and got confused.

    Anyway, yeah actually the logo/menu location is even out of whack on this using IE 7.

    The code revisions you gave didn't work out for me but perhaps we are close.

    PS - I am not getting paid for this job, it is my dad's company and I am doing it as a family favor. If I am ever getting paid for a job I will simply not ask about that particular layout.

  4. #4
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @_Aerospace_Eng_ may I ask how you were able to view my CSS? Do you use firebug? I am not too familiar with ways to use look at a CSS file from an outside source.

  5. #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by luckydog2011 View Post
    @_Aerospace_Eng_ may I ask how you were able to view my CSS? Do you use firebug? I am not too familiar with ways to use look at a CSS file from an outside source.
    Firebug, for Firefox. IE developer Tools for IE browsers. Chrome has a code inspector as well. Firebug is my favorite. You should install it and learn to use it. Its invaluable.
    Teed

  6. #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I just checked in IE7. I think it is working ie the menu is going over the slider. I can't tell for sure because of your logo. It is dropping down meaning you don't have enough width in your header for both your menu and logo to be there.

  7. Users who have thanked _Aerospace_Eng_ for this post:

    luckydog2011 (01-01-2012)

  8. #7
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well there should be 3 names on the menu and only two are showing up, the third is going beneath the slider.

  9. #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm, it should be working. Try using z-indexes greater than 1. Also try this
    Code:
    div#slideshow { float: left; width: 100%; height: 358px;z-index:0;position:relative}

  10. #9
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well here is a link to an article discussing some stacking context issue with IE7 and I think that's my problem. I also attempted to adjust the width to get everything in order but I guess that didn't work either.

    UPDATE: I figured that part out, the Z-Index needed to go into the .nav ul or something but I still can't seem to get my logo to align properly and I did set the width of the .topnav and shrunk the .nav. I tried clearing the bottom but that didn't work. Not sure why it is so very persistent to hang over the slider... Anyway Thanks a lot! I think we have a resolved issue, I suppose unless there is a quick and easy solution to my logo problem I will just fiddle with it or try posting another thread about that!
    Last edited by luckydog2011; 01-03-2012 at 06:30 PM.

  11. #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try a float:left on .nav, it is taking up the entire width of your header causing the logo to drop down. Why this works in other browsers I don't know. They should all have the same behavior, it could be the way the float on the logo h1 is being handled.

  12. #11
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Nope, I tried a number of things but I did figure out that it was actually the .nav li where the z-index had to go specifically. Because of the stack context changing based on the parent element you may have to put some z-index value into the parent as well, which I suppose in this case is .nav right?

    Anyway I would call this resolved! I appreciate the help a lot! I will open another thread for that other madness!


 

Tags for this Thread

Posting Permissions

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