best navigation tabs

[daJunkCollector]

Hey,

I am developing a website. A 2-tier tabbed navigation system is the desgin we are going with. Just for clarification purposes, I will developing the site in ASP.NET.

What do you think the best way to make the 2-tier tabbed navigation system will be? I currently have a prototype developed using CSS/HTML and a touch of javascript. The problem is that this presents horrible formatting issues when working across different web browsers. Disgusting really.

I am honestly considering taking a step back into history and using an image-map to artificially represent tab navigation.

I am very curious as to what the community feels about this. The image-map method will add to page loading times, but isn't this worth it to ensure all my users can view the page properly?

Or am I overlooking a modern method that allows me to accomplish this goal?

Thanks for any and all input/feedback/opinions/recommendations.

[drhowarddrfine]

There are many sites devoted to CSS navigation tabs that don't use javascript and work across all browsers. There is no such thing as cross browser compatibility issues. There are only IE issues. Well, sort of.

Any site that is developed using the W3C standard should have little problem with getting it to work with all browsers, IE always being the exception being old, buggy and non-standards compliant.

I have little time right now to look at others markup but a link would be helpful to give a glance at. Otherwise, you should Google for 'CSS navigation tabs' and CSSPlay and Listamatic (among many others) for some ideas.

[daJunkCollector]

Doc,

Thanks for your input. The two references you have provided are very nice. I will supply my code, but I believe that no matter what ccs code I provide I will run into the same problem.

The problem:

Once I create the tabs and add some content to the page, the page loads are ugly. CSS requires that the tabs be created from unordered lists (some people would consider this an advantage, because the list provides working links to a user even if they do not have css enabled). Unfortunately, my co-workers disagree here, primarily because in between page loads the unordered list briefly appears. The brief appearance gives the site a very amature feel to it. I have a very primative example of my early work on this site that demonstrates my point (http://www.dajunkyard.com/USGtestserver/humanResources/home.html). First off, these tabs only look good in IE7. But regardless how you view them, when you click a new tab you can see the list briefly appear.

Again, I can imagine the only way to avoid this would be to create non-css tabs. Do you agree?

Thanks again,
Pete

[drhowarddrfine]

Once I create the tabs and add some content to the page, the page loads are ugly.

I don't know what you mean by this except right now your link does not display correctly, if that's what you mean.

CSS requires that the tabs be created from unordered lists

CSS does not require that but I guess you mean the general method is done this way.

(some people would consider this an advantage, because the list provides working links to a user even if they do not have css enabled).

Count me in though who doesn't have CSS enabled except Lynx users? Count me as a Lynx user, too :)

...in between page loads the unordered list briefly appears.

I know some have had this problem but I don't recall the issue. Never had it myself but I think it was a js "onload" problem? Just don't remember.

First off, these tabs only look good in IE7.

Now, now. They look bad in Firefox.

...when you click a new tab you can see the list briefly appear.

I don't see that in Firefox. Validate your html and css for a few errors in both, including a missing end tag.

I can imagine the only way to avoid this would be to create non-css tabs. Do you agree?

No and, if you use js, then you run into the more likely problem someone has their js turned off. Not that I think there is anything wrong with using js.

Look into those other sites. Be a little wary of CSSPlay because Stu's markup sometimes gets rather convoluted. Listamatic is very good. I'll try to look up my markup, if it helps, but I'm ramping up for a huge project next week and feel bad I have had to ignore/drop the ball for a few other posters lately.

Keep posting your questions.

[daJunkCollector]

Hey Doc,

Well I took your advice, and it was very much appreciated. I put together a simple tabbed menu. It looks great in my IE7 and Firefox 2 browsers, but it looks and acts like crap in IE6 :(. My co-workers all have IE6 installed on their systems, of course we will update them one day -- but this is still a shame.

http://www.dajunkyard.com/USGtestserver/hr/template.html

The above link is what I have put together.

CSS tabs are the bane of my existence.

For quick reference the source code is as follows:

<!--
 
 
#globalnav {
    position:relative;
    float:left;
    width:100%;
    padding:0 0 1.75em 1em;
    margin:0;
    list-style:none;
    line-height:1em;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
 
#globalnav LI {
    float:left;
    margin:0;
    padding:0;
}
 
#globalnav A {
    display:block;
    color:#465D7E;
    text-decoration:none;
    text-align:center;
    font-weight:normal;
    background-image:url(tab_light.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:0;
    padding:2em 3em 1em 3em;
    width:100px;
    height:20px;
}
 
#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
    background-image:url(tab_dark.gif);
    font-weight:bold;
}
 
#globalnav A.here:link,
#globalnav A.here:visited {
    position:relative;
}
 
/*subnav*/
 
#globalnav A.subhere:link,
#globalnav A.subhere:visited {
    background:#F9EE40;
    font-weight:bold;
    text-decoration:underline;
}
 
#globalnav A.subhere:link,
#globalnav A.subhere:visited {
    position:relative;
    z-index:102;
}
 
#globalnav UL {
    position:absolute;
    left:0;
    top:3.5em;
    float:left;
    background:#F9EE40;
    width:100%;
    margin:0;
    padding:0.25em 0.25em 0.25em 1em;
    list-style:none;
    border-top:10px solid #F9EE40;
    border-bottom:10px solid #F9EE40;
 
}
 
#globalnav UL LI {
    float:left;
    display:block;
    margin-top:1px;
}
 
#globalnav UL A {
    background:#F9EE40;
    color:#465D7E;
    font-weight:normal;
    display:inline;
    margin:0;
    padding:0 1em;
    border:0;
}
 
#globalnav UL A:hover {
    background:#F9EE40;
    text-decoration:underline;
    font-weight:normal;
}
#globalnav UL A:active {
    background:#F9EE40;
    font-weight:normal;
}
#globalnav UL A.here:link {
    background:#F9EE40;
    font-weight:normal;
}
#globalnav UL A.here:visited {
}
 
-->
</style>
 
</head>
 
<body>
<ul id="globalnav">
  <li><a href="#">EMPLOYEE</a></li>
  <li><a href="#">ABOUT USG</a></li>
  <li><a href="#" class="here">DEPARTMENTS</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">IT</a></li>
      <li><a href="#" class="subhere">Marketing</a></li>
      <li><a href="#">Accounting</a></li>
      <li><a href="#">HR</a></li>
    </ul>
  </li>
  <li><a href="#">LOCATIONS</a></li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#">CAREERS</a></li>
</ul>
</body>
</html>

[drhowarddrfine]

I'm wondering if IE is inheriting higher level styles to that one. Haven't looked yet.

You should put everything in lower case. html doesn't care but xhtml and css does. I'm not saying it will fix anything but you need to get used to it.

[daJunkCollector]

I am not rushing you at all, I just thought I'd post some more input based on your feedback:

1. the CAPS are just the text displayed on the tabs. This is due to a request from my graphics desginer (the age old designer vs developer conflict :D). You really think I should stress changing the html text to lowercase? Or are you referencing some code that I overlooked?

2. If you were to view my above code (quickly accessed by the link I provided above) in IE6 you would experience the following problems:

A. When the top tabs are rolled over they "blink" or disappear before displaying their rollover state.

B. The background of the secondary navigation fails to stretch across the screen. In fact, it stops short and is not even as wide as the primary navigation tabs.

These are the only two problems. I am hoping that there is an alternative to solving problem A--as opposed to updating IE :P. Problem B I am sure I can resolve on my own.

Thanks again Doc.

[drhowarddrfine]

I'm the one that's stressing. Prepping for a huge project next week. Thought I wouldn't have to do anything till next week but...here I am stressing.

I saw B but didn't look for A.

The 'blinking' is caused by changing the font to bold while the previous state is not bold. I don't recall IEs bug on this.

I wouldn't stress changing the current stuff to lower case (attributes and elements and properties) but you should make it the norm in your shop.

[daJunkCollector]

All sounds great Doc. Thanks again for all your help on this. Good luck on your project.