SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Popup over Select Option

    Hello,

    I've created a tooltip popup with CSS. But when the CSS popup floats over a select box, you see the select box through the popup!

    Go to http://www.ballot-box.net/test.html and pass your mouse over the "??" to see what I mean.

    Does anyone know how to correct this?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I'm not very experienced with CSS but wouldn't changing/setting the z-index fix that?

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting the z-index won't work, I don't think that it is possible in IE because of IE bugs. It works in Opera 7b1

    You'll have to make sure that option boxes, flash movies and things like that do not have a chance of overlapping you tips, because they allways show up ontop of eachother. I've never actually tried putting two combo boxes ontop of eachother... wonder what it would do??

    Douglas

    (it's because Ie draws comboboxes like yours after it draws the HTML, and flash draws itself after the HTML too...)
    Hello World

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    According to microsoft:

    The select is a window element, all windowed elements paint themselves on top of all windowless elements by design. The best way to workaround this issue of windowed elements drawing on top of windowless elements is to hide the select element through script.

    i.e. put the select in a layer and then you can set the layer to visible or hidden as you require.
    Or
    select1.style.display="none"; or
    select1.style.visibility="hidden";

    However Mozilla conforms to the Z index (except for the scrollbars) so I expect its IE that has got it wrong.

    Hope this helps.

    Paul

  5. #5
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, on Mozilla 1.2 (Linux) I don't see the popup at all.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You cannot get a layer to pop up over a <select> box. You also cannot get one to pop up over an applet or other plug-in. This is because the <select>, as well as other plug-ins, are defined by the system instead of the browser.
    More info here: http://www.webreference.com/dhtml/diner/seethru/

  7. #7
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Mozilla draws the form elements itself rather than the system so it would work there but all other browsers, the OS draws the form element so that match in with the OS "theme".


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
  •