Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
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[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></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> -
Ok, so I've played around with the CSS and the HTML, still no real solution. I did find that there seemes to be a small (maybe 1px wide) location at the begining of the problematic link that registers as a clickable link.
Also, I've found that if I put anything above the link, even a div with no height, such as:
<div style="padding-bottom: 1px; margin-bottom: -1px;"></div>
The link works fine. Kind of a crummy way to fix the problem though. -
Can someone out ther PLEASE help me with this.
-
aconnor, it might help to provide a link to a working page. it would make debugging a lot easier.
as a general fixing strategy, though, i've sometimes fixed weird clickability problems on links by setting their position to relative -
I don't know why, but removing "position: relative;" from the UL's style seems to fix the problem.
-
JohnRiv - I tried removing that property, but still got the same issue.
This one took me forever to figure out. But then I remembered that IE sometimes chokes if there is any whitespace between elements, so I moved all the LI elements to the same line and viola! problem solved. -
- CommentAuthorCharlieFreak
- CommentTimeJun 24th 2006
I just ran into this exact same problem. I tried stripping whitespace, but that didn't work. I then tried setting position: relative on all the hrefs and that solved the problem. -
-
CommentAuthorkari.patila
- CommentTimeJun 25th 2006
I noticed that in some cases IE seems to expect static positioning. It looks like that's the case with this example, too, when you set the uls to be static rather than relative. -
1 to 8 of 8