2 replies [Last post]
fshagan
Offline
newbie
California
Last seen: 16 years 6 weeks ago
California
Timezone: GMT-8
Joined: 2003-10-28
Posts: 4
Points: 0

I have a tabbed interface using CSS at my site at http://www.messing-about.com/index.html and it works fine for IE and Netscape (version 6 and later), but users with Firefox tell me the top line is not visible except for the selected item. I have forgotten where I obtained the routine, but it was from one of the CSS sites out there as an example of how to make a tabbed navigation interface using CSS that would also appear as an unordered list of links if the CSS isn't supported.

Here's the CSS:

/*  BEGIN STYLE */
/* from tabs_2lines.css */
ul#topnav {
	margin:0 0 35px;
	padding: 0 0 0 12px;
	list-style: none;
	border: none;
} 


#topnav li {
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}

	
#topnav a {
	display:block;
	color:#444;
	text-decoration:none;
	background: URL(../images/lia_blue.gif) no-repeat;
	margin:0;
	padding: 0.2em 2.4em 0.2em 36px;
	border-right: 1px solid #aaa;
	position: relative;
	font: bold 11px helvetica, arial, geneva, lucida, sans-serif;
}
#topnav a#a0 { left: 0px;}
#topnav a#a1 { left: -30px;}
#topnav a#a2 { left: -60px;}
#topnav a#a3 { left: -90px;}
#topnav a#a4 { left: -120px;}
#topnav a#a5 { left: -150px;}
#topnav a#a6 { left: -180px;}
	
#topnav a:hover {
	background: URL(../images/liahover_blue.gif) no-repeat;
}

#topnav a.here {
	position:relative;
	z-index:102;
	background: URL(../images/liahover_blue.gif) no-repeat;
	border-right: 1px solid #777;
	padding: 0.2em 1em 0.2em 35px;
	margin: 0 4px 0 0;
}
	
ul#subnav {
	position:absolute;
	z-index:101;
	margin: -1px 0 0;
	left: 10px;
	padding: 1px 0px 3px 30px;
	background: #69c;
	border-top:1px solid #fff;
	border-bottom:1px solid #999;
	width: 720px;
}

	
#subnav li {
	position:relative;
	z-index:102;
	display: block;
	margin: 0;
	padding: 0;
	float:left;
}
	
#subnav a {
	color:#fff;
	display:block;
	text-decoration:none;
	margin:0;
	padding: 2px 12px 2px 10px;
	background: transparent;
	background-image: none;
	border: 0 none;
}
	
#subnav a:hover {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
}

#subnav a.here {
	color:#444;
	background: transparent;
	background-image: none;
	border: 0 none;
	margin:0;
	padding: 2px 12px 2px 10px;
}

/* END STYLE */
/* End tabs_2lines.css Style */

And here's the HTML that it formats:

<ul id="topnav">
   <li><a id="a0" href="./index.html" class="here">Home</a></li>
     <ul id="subnav">
       <li><a href="index.html" class="here">Intro</a></li>
       <li><a href="../weekender/">Weekender</a></li>
       <li><a href="../smallboats/">Small Boats</a></li>
     </ul>
   <li><a id="a1" href="../forum/">Forums</a></li>
   <li><a id="a2" href="../photopost/">Gallery</a></li>
   <li><a id="a3" href="../hosting/">Hosting</a></li>
   <li><a id="a4" href="../bookstore/">Store</a></li>
 </ul>
 <div style='clear:both;'></div>

Any ideas what is wrong?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 30 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Tabbed Navigation - OK in IE, not in Firefox

Hi fshagan,
Looks fine in Firefox.
Have you fixed it?

fshagan
Offline
newbie
California
Last seen: 16 years 6 weeks ago
California
Timezone: GMT-8
Joined: 2003-10-28
Posts: 4
Points: 0

Tabbed Navigation - OK in IE, not in Firefox

Hi Tony ...

I did find the problem. I ran the CSS through the validator at http://www.w3.org and it came out OK, and then ran the HTML through the validator for HTML 4.01 Transitional. I actually found quite a few things wrong, including using <span> where I should have used <div>, and having the wrong DOCTYPE.

But the problem with the unordered list was in this little section:

   <li><a id="a0" href="./index.html" class="here">Home</a></li> 
     <ul id="subnav"> 
       <li><a href="index.html" class="here">Intro</a></li> 
       <li><a href="../weekender/">Weekender</a></li> 
       <li><a href="../smallboats/">Small Boats</a></li> 
     </ul> 
   <li><a id="a1" href="../forum/">Forums</a></li> 

That closing </LI> tag at the end doesn't belong there. Since the unordered list "subnav" below it is really a part of that structure, it should read like this:

<ul id="topnav"> 
   <li><a id="a0" href="./index.html" class="here">Home</a> 
     <ul id="subnav"> 
       <li><a href="index.html" class="here">Intro</a></li> 
       <li><a href="../weekender/">Weekender</a></li> 
       <li><a href="../smallboats/">Small Boats</a></li> 
     </ul> 
  </li>
   <li><a id="a1" href="../forum/">Forums</a></li> 

Note the closing of that higher level <LI> after the "subnav" list. That solved it as far as Firefox's display of it.

In some ways IE is much more forgiving of some errors. I suppose that's good in some ways, as about 95% of the visitors to my site use IE. But now that I have Firefox on disk, and found the validators at www.w3.org, I think I'll be able to avoid some of these easy errors in the future.