Links not clickable in IE?

[mikel2k3]

I posted about this site a week or so ago, and had some GREAT help from Mission that completly sorted out what i was after.

However, the problem now being that the links arnt clickable in IE.
For the links to work, the user has to right click > open in new window, which obviously isnt ideal.

So any clues/help is appreciated:
http://www.shawnwrightdesign.com


- Mike

 

[misson]

Sorry about that. It was a problem I had worried about but didn't seem to be causing problems in testing. Since the children of a.tipped are absolutely positioned, a.tipped doesn't have any content to give it any size.

I've since tried giving it size using:

<!--[if lte IE 7]>
<style type="text/css">
#logo .tipped {
    zoom: 1;
    height: 150px;
    width: 150px;
    margin-top: -150px;
}
#logo .left {
    margin-left: -150px;
}
#logo .right {
    margin-right: -150px;
}
</style>
<![endif]-->

which worked in that the a.tipped now had size in IE, but they still weren't clickable. The fact that you can right click the links and get the link context menu (even without the forced sizing) suggests there's some other cause to IE's behavior.

The cheap and dirty temporary fix would be to set an click handler on the .flagged elements

	  <a class="left tipped" href="download.php">
		<span class="flagged" href="download.php" onclick="window.location='download.php'">
		  <img class="letter" src="http://forums.x10hosting.com/images/s.png" />
		  <img class="tip" src="http://forums.x10hosting.com/images/downloadpdf.png" alt="Download PDF" border="0" />
		</span>
		<img class="caption" src="http://forums.x10hosting.com/images/portfolioandbio.gif" alt="Portfolio and Bio" border="0" />
	  </a>
	  
	  <a class="right tipped" href="mailto:nobody@nowhere.net">
		<span class="flagged" onclick="window.location='mailto:nobody@nowhere.net'">
		  <img class="letter" src="http://forums.x10hosting.com/images/r.png" />
		  <img class="tip" src="http://forums.x10hosting.com/images/linktoemail.png" alt="Link to email" border="0" />
		</span>
		<img class="caption" src="http://forums.x10hosting.com/images/contactme.gif" alt="Portfolio and Bio" border="0" />
	  </a>

Since the set (IE7 ∩ {browsers w/ JS disabled}) is probably empty, it should work even though it's an egregious kludge.

As you don't seem to be concerned w/ IE6, play with sibling selectors and a different structure:

	<div id="logo">
	  <img class="caption" src="http://forums.x10hosting.com/images/shawnwrightdesigner.gif" alt="Shawn Wright Designer" />
	  
	  <a class="left tipped" href="download.php">
		  <img class="letter" src="http://forums.x10hosting.com/images/s.png" alt="S" />
		  <img class="tip" src="http://forums.x10hosting.com/images/downloadpdf.png" alt="Download PDF" border="0" />
	  </a>
	  <img class="caption" src="http://forums.x10hosting.com/images/portfolioandbio.gif" alt="Portfolio and Bio" border="0" />
	  
	  <a class="right tipped" href="mailto:nobody@nowhere.net">
		  <img class="letter" src="http://forums.x10hosting.com/images/r.png" alt="R" />
		  <img class="tip" src="http://forums.x10hosting.com/images/linktoemail.png" alt="Link to email" border="0" />
	  </a>
	  <img class="caption" src="http://forums.x10hosting.com/images/contactme.gif" alt="Portfolio and Bio" border="0" />
	  
	  <!--#logo--></div>

I'll try to u/l another page using the above structure sometime in the next few (very busy) days.

Another error in my original code: the .flagged elements are <div>s, which aren't allowed within <a>s. Changing them to <span>s is a step towards making the document valid HTML 4.01 Transitional, though they'll be dropped entirely in the page that uses the sibling selector.


Edit: It didn't take as long as I thought it would. The new & improved version has a much better structure. The captions are outside the links, which I wanted to do before but it makes supporting IE6 impossible without resorting to JS to display the captions. In the demo, I didn't bother adding IE6 support. Another issue with this version is I had to explicitly take into account the height of the letter images in order to get them properly positioned vertically; if the height of the images are changed, the style sheet would also have to change. If I think about it a little bit longer, I might be able to remove this restriction.

 

[mikel2k3]

Thanks once again mission!

However there seems to be an issue with the positioning of the Emailing Element... In FF its over to the left too far, and in IE its too far to the right.

Once a final version has been made up, ill try find some way of repaying you for your efforts bud!

 

[misson]

There was an errant class selector, which has been removed.

It would be nice if the page was usable in IE6, even if it didn't have the rollover affect. A conditional comment and a little JS might be in order.

 

[mikel2k3]

Thanks mission... your a star

As for IE6... If users are viewing in it, my theory is they deserve to have a bad viewing experience.

However, if you want to put something together for it to be conditional and that the two tabs are still visible, but the text beneath the logo stays constant too that should be fine.

 

[misson]

As for IE6... If users are viewing in it, my theory is they deserve to have a bad viewing experience.

Don't punish IE6 users for MS's mistakes. Maybe they have an old computer that won't run WinXP. There are still quite a few Win98 and Win2k users out there.

The most recent version has been updated to support IE6. I had to use JS for the caption rollover and to fix PNG transparency w/o sullying the page's structure for other browsers. Only a few lines of CSS were needed to fix the layout, and a few more to handle IE6 :hover bugs. I also filled in the center of the letter images to make them clickable/hoverable in IE (transparent areas aren't active regions of <a> elements in IE). The GIMP slightly altered the color of the "S" image (possibly due to gamma), so you might want to do this with whatever you used to create the images. I also changed the "D" image so it's about the same size as the "S" to simplify the layout in IE6 when the PNG transparency fix is applied.