Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help with my in simple tabbing problems

    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

    http://www.zenorange.com/page1.htm

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

    here is the code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
    <html>
    <head>
    <title>Drummers Handbook.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <style>
    <!--
    
    * {
    	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;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    <!-- 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>
    
    </ul>
    
    <!-- and thats how to make simple tabs... Remeber not to re-use id names... -->
    
    
    <div class="tabed_area">
    page one 
    <br/>
    <br/>
    <br/>
    <br/>
    </div>
    
    </body>
    </html>
    the code is the same as page2

    can anyone help me?

    thanks Mattz

  • #2
    New Coder
    Join Date
    Apr 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    It's not really clear exactly what you want to achieve, I think you need to elaborate.

  • #4
    New Coder
    Join Date
    Apr 2004
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, what i need help with is to make this work



    in both explorer and firfox.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •