It was not very clear to me what the problem was. I could not see any
real issue by looking at the example. However, I did notice that in
IE, the top links are not clickable because the cheerleader graphic
container is sitting on top of the link. If this is the issue you are
experiencing and requesting assistance with, the following code will
address the issue:
<style type="text/css">
.menu { position: relative; padding: 220px 0 0 0; background: url
(http://sonata.websitewelcome.com/~tiptop/images/
cheerleader_inner.png) no-repeat left top}
.menu span { position: absolute; display: block; width: 100px;
height:48px; background: url(http://sonata.websitewelcome.com/~tiptop/
images/cheerleader_inner.png) no-repeat left -220px }
.menu ul { padding-left: 100px; }
</style>
<div class="menu">
<span></span>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">The Tiptopians</a></li>
<li><a href="#">Fun Stuff</a></li>
</ul>
</div>
All that I have done here is prevent the issue of having a cheerleader
container that sits on top of the links. This technique also does not
require you to fiddle around with z-index at all, which can be a bit
tricky at times. The cheerleader graphic is actually underneath the
menu. I've added a non-semantic span to the container that contains
the cheerleaders feet (using the same background image as the
cheerleader with a tweaked background-position to show only the feet),
and is positioned on top of the menu. As long as the link is on the
right side of the the cheerleaders feet, then it will be mouse-
accessible in IE.
This only addresses the no-click issue with the cheerleader. You will
have to add your styles back in for the menu items. Also keep in mind
that I created this html/css from a blank html document, so some of
your styles may conflict with it. I've tested this solution in IE6,
IE7, FF3, and Safari 3, so you should be able to use this if you so
choose.
Hope this helps!
On Nov 28, 6:52 pm, McKaulick <[EMAIL PROTECTED]> wrote:
> Hello, I have this z-index problem with IE/7 and tried many things to
> fix and just can't seems to find the way. You can clearly see what is
> going on at this page.http://sonata.websitewelcome.com/~tiptop/fun_stuff.php
>
> With FF, Google Chrome and Safari, the z-index works well but with IE/
> 7 no. On the page you will see a cheerleader floating over a menu
> list. The links has z-index:2 and the cheerleader has z-index:1. The
> CSS use css_browser_selector.js so I can separate the elements from a
> browsers to another and looks like this:
>
> #cheerleaderinner{float:left; margin:0;padding:0; width:163px; margin-
> right:21px;height:270px; margin-left:24px; z-index:1;
> position:relative; background-image:url(images/cheerleader_inner.png);
> background-repeat:no-repeat}
>
> On the menu, I put the z-index on the "a" like this:
> /* WORKS FINE */
> .gecko .sidebar .cur a{padding-top:13px; float:left; text-align:left;
> margin-left:126px; z-index:2; position:relative; margin-top:0px;}
> .gecko .sidebar .normal a{padding-top:9px; float:left; text-
> align:left; margin-left:126px; z-index:2; position:relative; margin-
> top:0px;}
>
> .safari .sidebar .cur a{padding-top:13px; float:left; text-align:left;
> margin-left:126px; z-index:2; position:relative; margin-top:0px;}
> .safari .sidebar .normal a{padding-top:9px; float:left; text-
> align:left; margin-left:126px; z-index:2; position:relative; }
> /* END WORKS FINE */
>
> /* WORKS BAD */
> .sidebar .cur a{padding-top:13px; float:left; text-align:left; margin-
> left:126px; z-index:2; position:relative;}
> .sidebar .normal a{padding-top:9px; float:left; text-align:left;
> margin-left:126px; z-index:2; position:relative; }
> /* END WORKS BAD */
>
> For the complete CSS here's the
> source:http://sonata.websitewelcome.com/~tiptop/tiptop.css
>
> Any help would be appreaciated. I am was suppose to push this website
> live tonight. Will have to wait a little.
>
> Thanks,
> Patrice
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [EMAIL PROTECTED]
-~----------~----~----~----~------~----~------~--~---
