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
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: http://pele.com.ua/contacts.php
Please help me get rid of this bug in IE... thanks guys
0
This discussion has been closed.
Comments
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 aclass="icq".then in the stylesheet, add:
ul li .icq { background: url('http://web.icq.com/whitepages/online?icq=310639415&img=5') no-repeat middle left; padding-left: 40px; }This is off the top of my head, so there may be a typo or omission somewhere.
those navigation lists have the highest
z-indexvalue, 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 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!) :-)
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?
here is the html:
<li><span class="icq"> </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('http://web.icq.com/whitepages/online?icq=310639415&img=5') }<h3>áòÑÂ÷ь ÿþ <a href="http://www.icq.com/download/"><acronym title="I Seek You">ICQ</acronym></a></h3> <ul><li style="background-image: url('http://web.icq.com/whitepages/online?icq=310639415&img=5'); background-repeat: no-repeat; padding-left: 20px;"> 310-639-415</li></ul>An odd bug though. One that persists in IE7 also.
Although im not finished with the positioning of the email bg, still, the bug is fixed. Thanks a lot!!
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. : )
That is all.
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.
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.
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 com.apple.Safari IncludeDebugMenu 1launch 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