Jump to content

Link not clickable in IE but fine in other browser

snailface

By snailface
in HTML/XHTML

 Share

Recommended Posts

snailface Newbie

snailface

Posted
Posted

I'm working on a project where pieces of content will be contained within "tabbed" containers.In one of the containers, each tab contains a list of links, and for some reason, on all of the tabs, except for the first one, the first link in the list is not clickable in IE 6, and I can't figure out why, though I'm sure it's something super simple.It's almost as though some invisible element is covering it, preventing the user from clicking on it.I put together a sample page to illustrate. The code is below.<html><head><title>HTML Template Test Page</title><link rel="stylesheet" href="./css/newCSS.css" type="text/css"><style type="text/css">/************* Begin Testing Declarations *************/.testShellCenter {width: 50%;border: solid 1px #999999; }.testShellRight {width: 25%;border: solid 1px #999999; }/************* End Testing Declarations *************//************* HTML ELEMENTS *************/body {margin: 0px;padding: 0px;font-size: 62.5%;color: #000000;font-family: verdana, arial, helvetica, sans-serif; }table {font-size: 1em;}ul {position: relative;clear: both;margin: 0 5px 1em 5px;padding: 0;list-style: none; }li {margin: 0px 0px 0.4em 0px;padding: 2px 0px 2px 22px;background: url(../images/bullet.gif) 0px 1px no-repeat; }a {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:link {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:visited {font-size: 1em;font-weight: bold;color: #808080;text-decoration: none; }a:hover {font-size: 1em;font-weight: bold;color: #006699;text-decoration: underline; }/************* CLASSES *************/div.htmlPortlet {position: relative;width: 100%;font-size: 1.1em;margin: 5px 0px 5px 0px; }div.hiddenContent {display: none; }div.shownContent {display: block; }/************* TABBED PORTLET SPECIFIC STYLES *************/div.tabbedPortlet {margin: 0px 0px 0px 0px; }div.tabbedPortlet table.portletTabs {margin: 0px; }div.tabbedPortlet table.portletTabs td {background:#B8D1EB;border:1px solid #B8D1EB;font-weight: bold;text-align: center;padding: 5px 0px 5px 0px;margin: 20px; }div.tabbedPortlet table.portletTabs td.tabOn {background:#FFFFFF; }div.tabbedPortlet div.tabbedContentWrapper {overflow: auto;height: 240px;padding: 5px 0px 5px 0px; }</style><script language="javascript">function showTabbedContent(clicked){tab = clicked;tabToShow = tab.id;tabNav = tab.parentNode;for(i=0; i<tabNav.childNodes.length; i++){navTab = tabNav.childNodes;if(navTab.nodeName == "TD" && tabToShow == navTab.id){navTab.className = "tabOn";}else if(navTab.nodeName == "TD" || tabToShow != navTab.id){navTab.className = "tabOff";}}contentToShow = tab.id + "Content";tabNav = tab.parentNode;while(tabNav.className != "portletTabs"){tabNav = tabNav.parentNode;}tabWrapper = tabNav.nextSibling;while(tabWrapper.nodeName != "DIV" || tabWrapper.className != "tabbedContentWrapper"){tabWrapper = tabWrapper.nextSibling;}for(i=0; i<tabWrapper.childNodes.length; i++){content = tabWrapper.childNodes;if(content.nodeName == "DIV" && contentToShow == content.id){content.className = "shownContent";}else if(content.nodeName == "DIV" && contentToShow != content.id){content.className = "hiddenContent";}}return false;}</script></head><body><div class="testShellCenter"><div class="tabbedPortlet"><table class="portletTabs" width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td id="FirstTab" class="tabOn"><a href="#" onclick="java script:showTabbedContent(this.parentNode);">First</a></td><td id="SecondTab" class="tabOff"><a href="#" onclick="java script:showTabbedContent(this.parentNode);">Second</a></td><td id="ThirdTab" class="tabOff"><a href="#" onclick="java script:showTabbedContent(this.parentNode);">Third</a></td></tr></table><div class="tabbedContentWrapper"><div id="FirstTabContent" class="shownContent"><ul><li><a href="#">test1</a></li><li><a href="#">test2</a></li></ul></div><div id="SecondTabContent" class="hiddenContent"><ul><li><a href="#">test2</a></li><li><a href="#">test3</a></li></ul></div><div id="ThirdTabContent" class="hiddenContent"><ul><li><a href="#">test4</a></li></ul></div></div></div></div></body></html>

Link to comment
Share on other sites
htmlkid Newbie

htmlkid

Posted
Posted

first, next time put the code into Code tags(next to quote on advanced reply) or use the following 

[code] insert code here

[/code] secondly what version of IE are you using to view the page the code you are using may be ignored if your using a low version

Link to comment
Share on other sites
snailface Newbie

snailface

Posted
  • Author
Posted

My apologies.Here is the code again.

<html><head><title>HTML Template Test Page</title><link rel="stylesheet" href="./css/newCSS.css" type="text/css"><style type="text/css">/************* Begin Testing Declarations *************/.testShellCenter {	width: 50%;	border: solid 1px #999999; }.testShellRight {	width: 25%;	border: solid 1px #999999; }/************* End Testing Declarations *************//************* HTML ELEMENTS *************/body {	margin: 0px;	padding: 0px;	font-size: 62.5%;	color: #000000;	font-family: verdana, arial, helvetica, sans-serif; }table {	font-size: 1em;}ul {	position: relative;	clear: both;	margin: 0 5px 1em 5px;	padding: 0;	list-style: none; }li {	margin: 0px 0px 0.4em 0px;	padding: 2px 0px 2px 22px;	background: url(../images/bullet.gif) 0px 1px no-repeat; }a {	font-size: 1em;	font-weight: bold;	color: #006699;	text-decoration: none; }a:link {	font-size: 1em;	font-weight: bold;	color: #006699;	text-decoration: none; }a:visited {	font-size: 1em;	font-weight: bold;	color: #808080;	text-decoration: none; }a:hover {	font-size: 1em;	font-weight: bold;	color: #006699;	text-decoration: underline; }/************* CLASSES *************/div.htmlPortlet {	position: relative;	width: 100%;	font-size: 1.1em;	margin: 5px 0px 5px 0px; }div.hiddenContent {	display: none; }div.shownContent {	display: block; }/************* TABBED PORTLET SPECIFIC STYLES *************/div.tabbedPortlet {	margin: 0px 0px 0px 0px; }div.tabbedPortlet table.portletTabs {	margin: 0px; }div.tabbedPortlet table.portletTabs td {	background:#B8D1EB;	border:1px solid #B8D1EB;	font-weight: bold;	text-align: center;	padding: 5px 0px 5px 0px;	margin: 20px; }div.tabbedPortlet table.portletTabs td.tabOn {	background:#FFFFFF; }div.tabbedPortlet div.tabbedContentWrapper {	overflow: auto;	height: 240px;	padding: 5px 0px 5px 0px; }</style><script language="javascript">function showTabbedContent(clicked){	tab = clicked;	tabToShow = tab.id;	tabNav = tab.parentNode;	for(i=0; i<tabNav.childNodes.length; i++){  navTab = tabNav.childNodes[i];  if(navTab.nodeName == "TD" && tabToShow == navTab.id){ 	 navTab.className = "tabOn";  }else if(navTab.nodeName == "TD" || tabToShow != navTab.id){ 	 navTab.className = "tabOff";  }	}	contentToShow = tab.id + "Content";	tabNav = tab.parentNode;	while(tabNav.className != "portletTabs"){  tabNav = tabNav.parentNode;	}	tabWrapper = tabNav.nextSibling;	while(tabWrapper.nodeName != "DIV" || tabWrapper.className != "tabbedContentWrapper"){  tabWrapper = tabWrapper.nextSibling;	}	for(i=0; i<tabWrapper.childNodes.length; i++){  content = tabWrapper.childNodes[i];  if(content.nodeName == "DIV" && contentToShow == content.id){ 	 content.className = "shownContent";  }else if(content.nodeName == "DIV" && contentToShow != content.id){ 	 content.className = "hiddenContent";  }	}	return false;}</script></head><body><div class="testShellCenter">  <div class="tabbedPortlet">    <table class="portletTabs" width="100%" border="0" cellpadding="0" cellspacing="1">      <tr>        <td id="FirstTab" class="tabOn"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">First</a></td>        <td id="SecondTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Second</a></td>        <td id="ThirdTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Third</a></td>      </tr>    </table>    <div class="tabbedContentWrapper">      <div id="FirstTabContent" class="shownContent">        <ul>          <li><a href="#">test1</a></li>          <li><a href="#">test2</a></li>        </ul>      </div>      <div id="SecondTabContent" class="hiddenContent">        <ul>          <li><a href="#">test2</a><!--link not clickable in IE6--></li>          <li><a href="#">test3</a></li>        </ul>      </div>      <div id="ThirdTabContent" class="hiddenContent">        <ul>          <li><a href="#">test4</a><!--link not clickable in IE6--></li>        </ul>      </div>    </div>  </div></div></body></html>

The links that don't appear clickable are marked with comments.The version of IE in which I found this is 6.Also, I found that the links are not entirely unclickable. There appears to be about a 1px wide space at the beginning of the link that is clickable.Thanks in advance for the help.

Link to comment
Share on other sites
Jack McKalling Dedicated Member

Jack McKalling

Posted
Posted

Actually, IE makes a link clickable if it has an HREF attribute specified correctly. Having one with value "#" is not properly defined, you should also give the name of the anchor you are linking to, or, give the relative address of the file you are targetting. :)Else, use eg. "java script:void()" or "http://nothing"Else2, replace the anchors by spans, like this: <span onclick='location.href="somewhere"; '>test</span>:)

Link to comment
Share on other sites
snailface Newbie

snailface

Posted
  • Author
Posted

I'm afraid that adding a valid link does not correct the issue.Here is code with URLs in the HREF attribute. I still get the same issue.

<html><head><title>HTML Template Test Page</title><link rel="stylesheet" href="./css/newCSS.css" type="text/css"><style type="text/css">/************* Begin Testing Declarations *************/.testShellCenter {width: 50%;border: solid 1px #999999; }.testShellRight {width: 25%;border: solid 1px #999999; }/************* End Testing Declarations *************//************* HTML ELEMENTS *************/body {margin: 0px;padding: 0px;font-size: 62.5%;color: #000000;font-family: verdana, arial, helvetica, sans-serif; }table {font-size: 1em;}ul {position: relative;clear: both;margin: 0 5px 1em 5px;padding: 0;list-style: none; }li {margin: 0px 0px 0.4em 0px;padding: 2px 0px 2px 22px;background: url(../images/bullet.gif) 0px 1px no-repeat; }a {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:link {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:visited {font-size: 1em;font-weight: bold;color: #808080;text-decoration: none; }a:hover {font-size: 1em;font-weight: bold;color: #006699;text-decoration: underline; }/************* CLASSES *************/div.htmlPortlet {position: relative;width: 100%;font-size: 1.1em;margin: 5px 0px 5px 0px; }div.hiddenContent {display: none; }div.shownContent {display: block; }/************* TABBED PORTLET SPECIFIC STYLES *************/div.tabbedPortlet {margin: 0px 0px 0px 0px; }div.tabbedPortlet table.portletTabs {margin: 0px; }div.tabbedPortlet table.portletTabs td {background:#B8D1EB;border:1px solid #B8D1EB;font-weight: bold;text-align: center;padding: 5px 0px 5px 0px;margin: 20px; }div.tabbedPortlet table.portletTabs td.tabOn {background:#FFFFFF; }div.tabbedPortlet div.tabbedContentWrapper {overflow: auto;height: 240px;padding: 5px 0px 5px 0px; }</style><script language="javascript">function showTabbedContent(clicked){tab = clicked;tabToShow = tab.id;tabNav = tab.parentNode;for(i=0; i<tabNav.childNodes.length; i++){ navTab = tabNav.childNodes[i]; if(navTab.nodeName == "TD" && tabToShow == navTab.id){  navTab.className = "tabOn"; }else if(navTab.nodeName == "TD" || tabToShow != navTab.id){  navTab.className = "tabOff"; }}contentToShow = tab.id + "Content";tabNav = tab.parentNode;while(tabNav.className != "portletTabs"){ tabNav = tabNav.parentNode;}tabWrapper = tabNav.nextSibling;while(tabWrapper.nodeName != "DIV" || tabWrapper.className != "tabbedContentWrapper"){ tabWrapper = tabWrapper.nextSibling;}for(i=0; i<tabWrapper.childNodes.length; i++){ content = tabWrapper.childNodes[i]; if(content.nodeName == "DIV" && contentToShow == content.id){  content.className = "shownContent"; }else if(content.nodeName == "DIV" && contentToShow != content.id){  content.className = "hiddenContent"; }}return false;}</script></head><body><div class="testShellCenter"> <div class="tabbedPortlet">   <table class="portletTabs" width="100%" border="0" cellpadding="0" cellspacing="1">     <tr>       <td id="FirstTab" class="tabOn"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">First</a></td>       <td id="SecondTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Second</a></td>       <td id="ThirdTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Third</a></td>     </tr>   </table>   <div class="tabbedContentWrapper">     <div id="FirstTabContent" class="shownContent">       <ul>         <li><a href="http://www.google.com">test1</a></li>         <li><a href="http://www.google.com">test2</a></li>       </ul>     </div>     <div id="SecondTabContent" class="hiddenContent">       <ul>         <li><a href="http://www.google.com">test2</a><!--link not clickable in IE6--></li>         <li><a href="http://www.google.com">test3</a></li>       </ul>     </div>     <div id="ThirdTabContent" class="hiddenContent">       <ul>         <li><a href="http://www.google.com">test4</a><!--link not clickable in IE6--></li>       </ul>     </div>   </div> </div></div></body></html>

Link to comment
Share on other sites
snailface Newbie

snailface

Posted
  • Author
Posted

Little Goat -There is nothing in the external CSS, I just forgot to take it our when I created the stripped down set of code for this topic. Sorry.Tony -I took a look at everything in the Try It editor, and I still see the problem. The problematic links are the first ones that appear in the white portion of the module after clicking on the Tabs labled "Second" and "Third".Also, are you using IE6? That is the browser where I am finding the issue.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Maybe try removing the background property from the li tag. There are better ways to specify what the bullet looks like.But it looks like you are dealing with a bug in IE. This should work, the fact that you have 2 links, where one works and one doesn't, tells you that the software (IE) has a bug.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...