View Full Version : Please help with my in simple tabbing problems

12-26-2005, 01:56 AM
I am currently working on a new website and in my new website i was going to use nice tabbing.
So first i tryed doing a simple tabbing using colors before using images and i have hit a problem.

The problem is that i have it working ok in IE but it won't work in Firefox, when i added a &nbsp; into the <li> tags it makes it sort of work in firefox, but it doesn't work in IE

here a link to view it


(i am using my zenorange.com space it show you it)

here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
<title>Drummers Handbook.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

* {
margin: 0;
padding: 0;
border: 0;

/* Tab list class */
ul.tabList {
list-style-type: none;

ul.tabList li {
/* i mentioned the display property... This is where we use it.... */
display: inline;
/* When we use display: inline; it makes content appear next to eachother
(inline), display: block; makes stuff appear on a block level, and
display: none; show nothing at all... Ill show you an example... */

/* If you are making tabs with background images then you need to use a slightly
different approach. You need to mark the <a> tags as display: block; . Remember
to only set display: block within your ul.tabList class, like so: */

/* The last thing to do is a create a clear element... */
ul.tabList li.clear {
clear: left;
font-size: 1px !important;
font-size: 0;

ul.tabList li a {
display: block;
float: left;
/* As you saw in the example, its not ready yet. We need to give each
link a width and set it to float left. I find the best way is to use
an ID, eg: a#idName. Remember, each ID can only be used once...

Remember, you can always set backgroud images below for the normal and hover
state, but I have just used colours to represent it. You could also add
other attributes... */

margin-right: 2px;
padding: 5px;
padding-top: 0px;
padding-left: 12px;
padding-right: 0px;
margin-bottom: 0px;


ul.tabList li a#homeLink {
background: #FF0;
/* Here you would set a background image,
and an idividual width for the tab. If all the tabs are the same
width you can do it above in the ul.tabList li a {} part.*/
width: 55px;

ul.tabList li a#homeLink:hover {
background: #FF0;

ul.tabList li a#secondLink {
background: #F00;
width: 55px;

ul.tabList li a#secondLink:hover {
background: #FF0;

.tabed_area {
width: 720px;
background: #FF0;
margin: 0px;
padding: 0px;
margin-top: 0px;



<!-- Begin tabs...
It's best to use a list in most cases
as it makes sense to list links in a
bulleted list -->
<ul class="tabList">

<li><a href="page1.htm" id="homeLink">Tab 1</a></li>
<li><a href="page2.htm" id="secondLink">Tab 2</a></li>
<li class="clear"></li>


<!-- and thats how to make simple tabs... Remeber not to re-use id names... -->

<div class="tabed_area">
page one


the code is the same as page2

can anyone help me?

thanks Mattz

12-26-2005, 02:23 PM
can anyone help ?

if i can't get this simple tabbing then my new website won't have tabbing and i would love it to have tabbing.

12-26-2005, 02:28 PM
It's not really clear exactly what you want to achieve, I think you need to elaborate.

12-26-2005, 07:59 PM
ok, what i need help with is to make this work


in both explorer and firfox.