Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

dropdown menus challenge for сss pro's: z-index problem in IE

edited October 2006 in Vanilla 1.0 Help
I have made a dropdown menu (based on Suckerfish guide). The problem is that sometimes the objects on the page are still visible even though the menu list is dropped on top of them. For browsers other than Internet Explorer I have used the z-index property, and the problem dissappeared. However, the problem remained in Microsoft Internet Explorer! Below is the beta version of the site, don't mind the letters, they are in Cyrillic font. Please hover over the leftmost item in the top horizontal menu and see how the icq flower and the email gif appear above the appearing dropdown layer. Here is the link: Please help me get rid of this bug in IE... thanks guys


  • Short answer: Don't forget you can use a negative z-index.

    Long answer: I would suggest making the ICQ flower part of the background.

    Remove the <img> tag for the flower, and on the LI add a class="icq".

    then in the stylesheet, add:ul li .icq { background: url('') no-repeat middle left; padding-left: 40px; }

    This is off the top of my head, so there may be a typo or omission somewhere.
  • Is there anything in css to tell the menu to be opaque or not transparent?
  • Mark might know. I remember have read something like that on Swell
  • I just found this site which uses drop-menus that work over his images.
  • first, thank you all.. I have asked this question twice in cssbeauty (1 and 2), once in welovecss, and got zero decent replies in a week... but here i got many good ones in a matter of an hour.. thats why i love lussumo (thanks, Mark)... couse people love you more here... kool... thanks guys... now back to the topic...

    those navigation lists have the highest z-index value, which makes this problem dissapear in FF, etc. however, not in IE.. and the funny thing is that in other pages, eg. catalog stuff, there are also images which are under the menu, but they are not seen when the hor menu item is hovered... how come? no idea!! so this contact page is the only page on the website with this strange phenomenon... so it is not a matter of just any images being seen, but only these two ones...

    thanks guys... i will try what you offered WallPhone, and will report any news..

    thanks again
  • I found the article on swell... but I don't think it is related.
  • As I don't have IE on this computer, I can't see the problem, but I would agree with WallPhone. Take out the image and add it to your css. I believe (as do many others that use CSS) that the html/php document should be for information and the css should be to make that info look pretty. The IQC thing is a pretty thing, not an info thing. Put it in the css. I would think that should fix it. I'll look at it more when I get home though...

    I have a drop down menu that covers my img on a different site if you want to see what I've done in my code. my unfinished site (and if it doesn't work correctly in IE, PLEASE let me know!) :-)
  • edited October 2006
    You could try the yahoo UI library; there is Menu control.
  • oh my God... ive typed a huge reply and then clicked a link... the text is gone...

    anyway...thanks guys... i have tested your suggestions locally... no result... making them backgrounds does not fix the problem... also, an important thing is that on the entire website images are under dropdowns (eg. on catalog page or the index page), but only on this very contacts page these little imgs show up... how come? no idea! im not saying im a css guru, but i can't understand at all why in the world they appear above..

    anyways, thanks for suggestions... any more ideas are appreciated?
  • There is a chance that something is different in the code on that one page. If you can put them online and give a URL, we could maybe see what the difference is...
  • edited October 2006
    guess you are right.. here is the updated page.... note that the icq server changed the flower to a bigger picture. so ive made it bigger for you to see what it says.. :)

    here is the html: <li><span class="icq">&nbsp;</span> 310-639-415</li>
    and here is the css:span.icq {height: 10px; padding-right: 100px; position: relative; top: 3px; z-index: 1; border:none; background-image: url('') }
  • This worked for me: <h3>Связь по <a href=""><acronym title="I Seek You">ICQ</acronym></a></h3> <ul><li style="background-image: url(''); background-repeat: no-repeat; padding-left: 20px;"> 310-639-415</li></ul>

    An odd bug though. One that persists in IE7 also.
  • edited October 2006
    WallPhone, you are the best!!!

    Although im not finished with the positioning of the email bg, still, the bug is fixed. Thanks a lot!!
  • "I just found this site which uses drop-menus that work over his images."

    That site is a beauty jimw, but I have had my problems with one of its drop downs. I thought I had made minimal changes to the CSS and the HTML code, and it all looked great on Safari (yes some people still use it!) and Firefox, but it went all crazy on IE (why was I surprised?), even though it contained hacks to keep IE in order. It was all to do with vertical alignment, and I think if I work hard enough, using some sites people on this forum told me about to adress IE stupidities, I can probably fix it. But the real difficulty is that apparently similar code produces different effects in different places, so identifying which IE hack is needed is tricky.

    None of which is relevant to the current isuue, just my way of bashing IE I guess. : )
  • Yeah for IE bashing!

    That is all.
  •  Quote: ercatli all looked great on Safari (yes some people still use it!)...
    And why wouldn't we use Safari?
    I like Firefox, a great alternative to Exploder (whatever version) but Safari loads up in under 3 seconds where Firefox takes almost 15 seconds.

    Also, Safari is way faster, especially loading un-cached pages. If I didn't know better I'd swear Apple have code in OS X to favor Safari, a bit like Microsoft deliberately slowing down Word Perfect in favour of Microsoft Word years ago.

    All in all, Safari is slicker and respects CSS and other standards. I loved it the first time I used it and it's getting better with every update.

    The only sites that don't work with Safari are those deliberately coded so. If I change the user agent the page loads perfectly.
  • Wanderer

    Yeah I'm happy with it overall, and use it in preference to Firefox, without really knowing why, I just like it better I guess. You have given me some reasons to support my prejudice! Thanks.

    But what is a "user agent", how do I change it, and do I really need to know?? Thanks.
  • edited October 2006
    I'm using Webkit. nightly build of safari.
    ercatli u ahve to enable debug mode in safari to see the debug menu and then u will be able to change the useragent.
    open up terminal and type this
    % defaults write IncludeDebugMenu 1
    launch safari and u should see the debug menu. click on it and then u can see the useragent. Select Windows IE for pages that won't work in safari. Gogole reader is broken in safari. not even if u change the useragent it doesn't help
  • Yup, what MySchizoBuddy said!
This discussion has been closed.