<li><a href> Within a Relative div - IE problem

[acer34e]

I have an unsorted list/links inside a Navigation div. The problem occurs because that nav div is set to position:relative z-index:2 because it is meant to hover over a banner image located above it transparently. Everything works fine in mozilla browsers but when viewed with IE, the list links no longer work. There is no hover and you can't click them. I've tried giving the ul and li relative positioning but that doesn't help. If I take the position:relative out of the nav bar the links work, but I lose that transparency. I hope someone else has run into this problem and fixed it. If any code is needed just let me know.
Thanks!

[acer34e]

I figured out what the problem is, but not the fix:
In the navigation div is a transparent background image. In mozilla browsers it renders correctly. In IE I had it set up with the alpha transparency, and that is what caused the links to not work. If anyone has any idea how to make the background image transparent in IE, and still have the links work I'm dying to know!

CSS
============
#nav {
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='img/selectArea.png');
background-repeat:no-repeat;*/
background: url(../img/selectArea.png) no-repeat;
width:588px;
height:125px;
margin-top:-33px;
margin-bottom:-18px;
position:relative;
z-index:2;
}
#nav ul {
margin-top:5px;
margin-left:-200px;
border:solid red 1px;
}
#nav ul li {
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
margin:auto;
display:block;
background:url(../img/buttonImg.gif) no-repeat center;
padding-left:25px;
padding-right:5px;
float:left;
}

(I commented out the setup that makes transparency work and the part not commented is not transparent but with working links)

[doodlebee]

Question:

I don't think I'm understanding *your* question very well...

Are you trying to have links on top of some kind of header image (or something like that)? Why are you using transparent images behind your links?

I'm thinking I don't understand your question very well, but from what I *do* get from it...why don't you just have a div with your image set as the background, and remove the background from the links? Then the image is still there, and the links will function.

Is this what you mean?

[acer34e]

The images that are in the list are just arrow images that I have padded to show up to the left of the list items. ie:
> Contact Us
> Home

These are all within that nav div. The problem I'm having is making the nav background image transparent in IE without losing the function of the list links.

*a {
position:relative!important;
}
#nav ul li a:link,
a:visited,
a:hover,
a:active {
color: #069;
text-decoration:none;
}
#nav ul li a:hover {
color:#c00;
}

[coopersita]

I've seen this happen before. It's the filter you are using for the png transparency. It sometimes triggers a bug.

To fix the bug, you need to set the item that contains the links to position:relative as well. Test to see which one does the trick:
#nav ul li
or
#nav ul
or both

[doodlebee]

oooohhhh... I see. (yes, sometimes the light bulb is quite dim. ;) )

Okay. Well, the guy before me had a good suggestion - sometimes IE just wants you to get *really* sepcific. Another suggestion (in regards to specificity) would be to also add in "a", alongside "a:link" - I've found sometimes if you don't have them both, then IE will ignore links. (Yes, I know how have it specified elsewhere, but not for the #nav ul li stuff - you have the default set.)

So now, I'm getting your issue. When the background is transparent, then typically the only way you can click a link is if you're actually hovering over a letter, right?

Why don't you try setting your links - instead of "position:relative", set them as "display:block, float:left;" and set a width for them. So if you set tham at say, 150pixels wide, then for 150 pixles you'll be hovering over the link whether you're on a letter or not. (I believe this also helps the background display a bit better.)

Just remember to clear your floats underneath the nav bar. And hopefully my light bulb got slightly brighter there ;)

[acer34e]

Thank you for the replies!
I tried setting position:relative with the ul li in a few ways and none worked. I also tried being more specific with placing the a, also to no avail.

When using the filtered image, you cannot click the link even if your mouse is over the letter itself. There is no hover and you're not able to visit. For some reason the image doesn't act as a background and covers the link. If I take out the position:relative on the nav div, the links work, but I lose transparency. It's been driving me crazy, but I'm glad I have some help now.

[doodlebee]

Just for s***s and giggles, could we see the HTML code for your site? Just curious as to what's there :)

[coopersita]

Is there a space between the * and the a in * a {position:relative}? It seems to be *a...

[acer34e]

There wasn't a space between the * a, so I put one in and it didn't work.
Following is the html for the header hat this is all part of:
<div class="headerContainer">
<div id="topHeader"></div>
<div id="logo"></div>
<div id="logoFoot"></div>
<img src="img/banner.png">
<div class="center">
<div id="nav" class="fltLT">
<ul class="fltRT">
<script type="text/JavaScript">checkHome();</script>
<li class="button fltLT"><a href="#1">Shop</a></li>
<li class="button fltLT"><a href="#2">About Us</a></li>
<li class="button fltLT"><a href="#3">Contact</a></li>
</ul>
<menu>
<li class="first">
<label>By Brand</label><br />
<select name="byBrand" onChange="jumpMenu('parent',this,0)">
<option value="">select a brand</option>
<option value="blah.php">select</option>
<option value="blah.php">select</option>
<option value="blah.php">select</option>
</select>
</li>
<li>
<label>By Product</label><br />
<select name="byBrand" onChange="jumpMenu('parent',this,0)">
<option value="">select a brand</option>
<option value="blah.php">select</option>
<option value="blah.php">select</option>
<option value="blah.php">select</option>
</select>
</li>
<li>
<label>By Condition</label><br />
<select name="byBrand" onChange="jumpMenu('parent',this,0)">
<option value="">select a brand</option>
<option value="blah.php">select</option>
<option value="blah.php">select</option>
<option value="blah.php">select</option>
</select>
</li>
</menu></div>
<div id="searchMenu" class="fltRT">
<h1>SEARCH</h1>
<form method="get" action="http://www.nexternal.com/fse">
<input name="Target" value="products.asp" type="hidden">
<input name="Keyword" type="text" size="12">
<input type="submit" value="go">
</form>
</div>
</div>
</div>

As you see, the nav div is position to be transparent over the bottom part of the banner image and the top part of the content caontainer below it. I'm working on putting a stager up so you can visit it and see what's going on for yourself.

[doodlebee]

There's a few tags in there that I don't recognize at all - like what is <menu>? Never heard of such a tag 9doesn't mean it doesn't exist - but I've never heard of it!). I've also noticed that in a section of li's at the top, you have a <select> attribute, but it's not within a form tag.

Jst one suggestion to try: you may want to validate your code. It's no guarantee that it will "make everything fall into place", but sometimes it does happen, simply because if the syntax isn't correct, it'll force the browser in to "quirks" mode, which will sometimes display your site unexpectedly. If it validates, the browsers will render your code correctly, and if the CSs is right, then it'll snap back into place.

As I've said, there's no guarantee of that - but sometimes it happens.

I *would* like to see the site - I'm more of a visual person - but I'm afraid if you post the link, the mods will remove it (they don't like links to outside sites here). So could you also PM it to me too? Thanks :)

[acer34e]

doodlebee -
i just sm'd you the link
let me know if you come up with anything

[doodlebee]

Ahhh! now I totally see what you're doing here. (Tolja I'm a "visual" person ;) )

Now, what I'm seeing here is basically a header div and towards the bottom of the header, you want to have your links. To me, looking at the code, you're overthinking your problem.

Okay, first off - agh! Javascript to determine the browser, and swtich stylesheets appropriately? Agh! You care causing yourself some *major* work that's absolutely unecessary. Plus, if someone comes to the site with javascript turned off, no stylesheet will be served.

What you *should* do is code the site for Mozilla, and use a conditional comment to serve up "fix it" code for IE. (EVen IE tells you this is the option they recommend). No need to create two full separate stylesheets - just do Mozilla, and IE will read it. Then it'll see the conditional comment fixes, and that will override for IE specs. No need to worry about javascript - and *definitely* cuts back on the amount of work you need to do.

That being said - I see what's up. The curvy at the top is the top section of the header, the green thing I'm seeing is the logo image, then those neat dotty things are below the logo image, then you have a wide space before the content begins. You're trying to place the navigation half over the "neat dotty things" and the wide blank space between the dotty things and content area.

Here is how I'm going to make your life easier. LOL

Okay, the "topHeader.png" img, logo image and the neat dotty things, as well as that kind of shaded area on the bottom half of your navigtion - just combine them all into one header image. If you need the logo to be "clickable" - that's easy enough to accomplish - but from the code I'm seeing, it doesn't look like it does. So just combine them all into one nice image. Set it as the background for your header. The put your navigational buttons within the header div, and position them with margins and such at the bottom, like so:

<div id=header">
<div id="nav">
nav links here
</div></div>
<div id="content">
blah blah blah...

Cleans up your code, solves your problem with layers and trying to split everything and show them between divs.

If you fear the header graphic would be too large in filesize, I would 1) recommend *not* using PNG - yes, the graphic turns out great, but the filesize is huge - just use JPG and compress it to your satisfaction; and/or 2) split it into two areas: headerTop and headerBottom. headerTop can be to top area and the logo, headerBottom can be all the stuff behind the navigational bar.

That would be the easiest and cleanest method to solve your problem - believe me.

And really - get rid of the javascript and go with conditional comments - it soooo makes your life a hell of a lot easier.

HTH!

[acer34e]

I figured out a workaround for it. I realize now I should have done this sooner:
I took the list out of the nav div and gave it a higher z-index than the div and used negative margins to fit it into its correct position. For some reason I just didn't see the list outside of the nav div so I never tried it. Thank you doodlebee for your help and suggestions.
As per the jscript... it's how the boss wants it, so the dude abides(<--Big Lebowski plug).
Cheers!