I have two problems I cannot work out in the following tab code with
Netscape 6. Problems are marked with all cap comments. One is that
the background image is not shown in NS 6 (two places in CSS). The
second problem is that the top right rounded corner is not showing up
in the Tier 2 tabs. Could you have a look and tell me if it is
possible to correct? This code seems to work fine in IE 5+ and
Firefox. Note that since I can't post an actual example on the web, I
found similar images to put in the place of so you could run the page.
Thanks for looking.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitl ed Document</title>
<style type="text/css">
body {
margin-top: 10px;
margin-left: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}
/*Tier 1 and 2 tabs*/
#tier1nav{ /*Ensures blue background is continued across*/
background-repeat:repeat;
background-image:url(http://www.townofbellefonte.com/navi.../bluebar.gif);
/*PROBLEM: NETSCAPE 6 DOES NOT SHOW THIS BACKGROUND*/
}
#tier1nav, #tier2nav{
margin: 0;
padding: 0;
width: 600px;
float:right;
}
#tier1nav li, #tier2nav li{
margin: 0;
list-style: none;
float: left;
font-size:11px;
border-right: 1px solid #fff;
line-height: 23px;
font-weight: bold;
white-space: nowrap;
}
#tier1nav a, #tier2nav a {
text-decoration: none;
display: block;
float: left;
padding: 0px 5px 0px 6px;
color: #fff;
}
#tier1nav li.selected { /*Used to show selected Tier 1 tab*/
padding: 0px 5px 0px 6px;
background-color: #a0c0df;
color: #003366;
}
/*Tier 2 specific styles*/
#tier2nav{
margin-left: 13px;
width: 585px;
padding-top:3px;
background:#a0c 0df
url(http://www.somersaultpress.com/images/bluebar.jpg)
repeat;/*PROBLEM: NETSCAPE 6 DOES NOT SHOW THIS BACKGROUND*/
}
#tier2nav li{
/*font-size:10px;*/
line-height: 20px;
border-right: none;
}
#tier2nav a {
text-decoration:unde rline;
background-color: #a0c0df;
color:#003366;
}
#tier2nav li.leftend{ /*applies rounded corner to tier2 left end*/
background:url( allwebimages/images/topnav/leftend_lightbl ue.gif) left
bottom no-repeat;
padding-left:13px;
}
#tier2nav li.selected { /*Used to show selected Tier 2 tab*/
padding: 0 0 0 6px;
background: #fff
url(http://www.adcdental.com/imgs/tab_topleft_purple.gif) left top
no-repeat;
color: #a0c0df;
}
#tier2nav li.selected div { /*Used to show selected Tier 2 tab*/
background: #fff
url(http://www.adcdental.com/imgs/tab_topright_purple.gif) 100% top
no-repeat;/*PROBLEM: NETSCAPE 6 DOES NOT SHOW THE TOP RIGHT ROUNDED TAB
CORNER*/
padding-right:5px;
}
/*hack for IE5-Mac\*/
#tier1nav a, #tier2nav a{
float:none;
}/*end hack*/
#tier1nav a:hover {
background-color: #a0c0df;
/*color: #003366;*/
}
#tier2nav a:hover {
color: #fff;
}
#tier1nav li.lefttab a:hover{
background: #a0c0df
url(allwebimage s/images/topnav/lefttab_lightbl ue.gif) left top
no-repeat;
color: #fff;
}
/*Layout positioning styles*/
..leftcolumn{
width: 150px;
vertical-align: top;
}
..aligntop {
vertical-align: top;
}
..alignbottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<!--TIER 1 TABS-->
<table width="750" cellspacing="0" cellpadding="0" summary="">
<tr>
<td class="leftcolu mn"></td>
<td class="alignbot tom">
<ul id="tier1nav">
<li class="lefttab" ><a href="test1.htm ">Home Page</a></li>
<li class="selected ">Tab 1</li>
<li><a href="#">Tab 2</a></li>
<li><a href="test5.htm ">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
</td>
</tr>
</table>
<!--TIER 2 TABS-->
<table width="750" cellspacing="0" cellpadding="0" summary="">
<tr>
<td class="leftcolu mn"></td>
<td class="aligntop ">
<ul id="tier2nav">
<li class="leftend" ><a href="#">One Link</a></li>
<li class="selected "><div>Two Link</div></li>
<li><a href="test4.htm ">Three Link</a></li>
<li><a href="#">Four Link</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
