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
    23
    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
    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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    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
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    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
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    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
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    luckydog2011 (01-01-2012)

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    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.

  • #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}
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    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 05:30 PM.

  • #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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    23
    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
    •