a tags are no longer clickable in IE6

I was wondering if someone could help with a simple, but baffling problem I have been unable to find a solution for?

I have a navigation bar at the top of a web page in which the clickable navigation links are aligned to the right.

I then have a png image (using sleight.js for IE 6) that is absolutely positioned over the top left of the navigation bar - nowhere near the a tags.

In all browsers these navigational links are clickable except in IE6. I have also set the z-index for each of the elements to manipulate the stacking order. Does anyone have any ideas why the links may not be clickable now?

This is my code (using a CMS so navigation markup is unchangeable. Also just showing one link here in primary nav as table markup is quite complex):

HTML:

<div id="body">

	<img src="/images/note.png" alt="this is the image" id="stickyNote">

   <div id="header">
	  <ol>
		<li><a href="#">back to main home</a></li>
	  </ol>
	  <ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Accessibility</a></li>
		<li><a href="'#">Site map</a></li>
	  </ul>


	  <form method="post" name="quick_search_box" id="searchBox" action="#">
		<input id="search" value="Search this site" name="search" size="17" class="quickSearchTextBox" alt="Search For" type="text">
		<input name="submit" id="submit" value="go" class="quickSearchButton" type="submit">
     </form> 
	  <br class="clear">
	  <h1>Welcome</h1>
   </div>

   <div id="primaryNav">
	 <table style="border: medium none ;" summary="This table holds the container for this level of site navigation" cellpadding="0" cellspacing="0" width="100%">
	 	<tbody>
			<tr class="HorzNav">
				<td width="100%">
					<table style="border: medium none ;" class="HorzNav" summary="This table holds the horizontal navigation links" cellpadding="0" cellspacing="0">
						<tbody>
							<tr>
								<td class="HorzNav">
									<a class="HorzNav" href="#">Click here</a>
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
   </div>
 </div> 

Code (markup):

CSS:

div#body{
	position: relative;
	z-index: -1;
}

img#stickyNote{
	position: absolute;
	margin:0 0 0 200px!important;
	width: 307px;	
	z-index: 1000!important;
}

div#primaryNav{
	/*=stacking order created for sleight png fix in IE*/
	position: relative;
	z-index: -1;
	margin: 10px 0 0 26px;
	font-size: 11px;
	width: 765px;	
}

div#header ul{
	font-size: 11px;
	margin: 10px 0 0 0;
	padding: 0 0 0 30px;
	width: 250px!important;
}


div#header ol{
	font-size: 11px;
	margin: 10px 0 0 4px;
	padding: 0;
	background: transparent;
	width: 150px!important;
}

div#header{
	margin: -200px 0 0 0;
}

div#header h1{
	text-indent: -9999px;	
	background-image: url(/images/app-header.gif);
	background-position: top left;
	background-repeat: no-repeat;
	height: 133px;
	width: 775px;
	margin:0 0 0 1px;
	padding: 0;	
	/*=stacking order created for sleight png fix IE 6*/
	position: relative;
	z-index: -1;
}

Code (markup):

I have seen a stacking order issue today already with IE 6 so I though this might be a z-index problem, but I am not sure.


Thanks in advance for your help with this!

 

There are stacking issues in IE6, esp when relatively positioned things are next to absolutes, for instance. Keep in mind that Gecko browsers see z-index: -1 as meaning "behind the body" as there's really no such thing as negative (though negative numbers are allowed). I try to start everything with 1 and raise stuff higher, to 10 or 100.

I've never seen a menu in a table before. And I can't picture this site at all. The image is the first thing in the source. How close is it to the table???

 

Hiya!

I am not overly impressed that the navigation is in a table (styling has been a nightmare!) but that is the markup I have to work with as I have no access to it.

If you take a look at the example.gif file attached you can get an idea of the layout. Basically, there is a header div with a background image, a primaryNav div containing a table with the navigation and the png if positioned absolutely over the two.

This seems to knock out the links in IE6. I resorted to using -1 for z-index as I could not get the png to sit on top of the primary nav and header. It was always underneath and I could not make head nor tail of the stacking order which is very simple to work out in firefox, IE 7 etc.

I am using a conditional comment for these styles so they only apply to IE.

 

hmmm, I would've also thought abso-po would have it sitting on top.

If it weren't IE6, I'd dare to say put the PNG in the header and float it, and let that float dangle out-- but IE6 automatically encloses floats, incorrectly.

Is there any way that nav can come out of the table?? That or someone with major table knowledge might find that there's something setting this off?

There's a version of the peekaboo bug which affects lists but usually makes them disappear, not removing their clickability.

 

Hi,

I was working on a sort of similar problem - in Firefox, I was working on clickable divs to act as custom tabs at the top of a box-type widget.

When testing in IE, only the content I placed in the div would be clickable - but because there is artwork under the div, I wanted to be able to have a div with no content. I tried   as a placeholder - no joy in IE. Only a small sliver of where the space was was clickable, the rest of the div was not.

Then I used a background color in the CSS for the DIV and suddenly, it worked. It seems there needs to be a zone of content inside the div to make it clickable.

I did not want to use a background color, so I tried an image. Created a transparent gif in photoshop with some image on the left side of the gif, then positioned it out of the background of the DIV and attached it to the CSS of the DIV. And it worked.

KLUDGE to make IE DIVs clickable (from FileTransfer.com)
background-image:url(/Images_App/FT_Main_TabOptionBack.gif);
background-position:-2px -2px;

Now the DIVS are clickable, I don't have to muck about with changing the background...

If you are interested in seeing the results, after Jan 31, go to FileTransfer.com and get a free trial account.

 

Hey!

Here is an easy fix... Apply the css background filter for IE, then position all of the links inside of it "relative" and things become clickable in IE 6.

Nothin' much to it:

*background-image:none; /* turn off the standard css background for IE */
*filter: progidXImageTransform.Microsoft.AlphaImageLoader (src='/ad/images/player-header-swoosh.png', sizingMethod='crop'); /* IE 6 and 7 method.*/

Then set the anchors to "position:relative" inside of this Div and your good.

Check out:

http://reignwaterdesigns.com/ad/tidbits/hacks/ie_png_fix.shtml

For details and examples... REALLY simple and it WORKs in all browsers

Cheers!

Addam Driver