SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish dropdown messing up with form

    Here is the link to the site: http://www.geocities.com/deronsizemore/requestinfo.htm

    I started developing this form and noticed that when you rollover the "Health Products" link at the top of the page and try to go down to the cosmetics and misc. items the form disapears and doesn't give you a change to even click on them...I have this suckerfish dropdown on every page and this is the only page this is happening so Im sure its go to do with the form.

    -Deron

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try adding a z-index to your nav to bring it on top.

    Code:
    #navbar {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background: #ffffff;
    height: 16px;
    padding-left: 25px;
    position:relative;
    z-index:100;
    }
    Be careful with forms though because some elements are windowed elements and will lay on top of everything else whatever you do. (such as select boxes).

    However the above seems to work ok locally.

    Paul

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks or the response Paul. I never have been exposed to a z-index so I didn't know. Suppose I put a z-index of only 50 instead of 100 what does that matter??

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    The z-index just needs to be higher than the z-index of the element you want to cover.

    I just used an arbritary number 100 as it was easy to be sure that it would be higher. It would probably work if it was just 2. It just needs to be higher than the z-index of the element you want to cover.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also noticed...that Paul added the position : relative; to the css.

    You HAVE to have position specified within the CSS code because you are basically positioning the element. Without specifying the position of an element, the z-index will NOT work.

    You can just use z-index : 1; etc. Which ever one element has the higher z-index value will be above.

    Just a little fyi.

    Michael

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Michael - I forgot to mention that

  7. #7
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for the help


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
  •