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
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Tabs - a few issues

    I've almost got a tab setup how I want it (although i am sure there is probably an easier method than what I did) but I have a couple of problems.

    1, the subnav text is only right aligned in IE not Firefox.

    2, the subnav bar has been given a 1px white top border, but this should be behind the "on" tab and in front of the "off" tabs. It doesn't behave correctly in IE regardless of the z indexes and it doesn't show up at all in Firefox.

    Any help is greatly appreciated.

    Here are the necessary image files:

    http://yourthreshold.com/downloads/nav_background.gif
    http://yourthreshold.com/downloads/..._background.gif
    http://yourthreshold.com/downloads/..._background.gif

    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    #wrapper {
      width:750px;
      height:100%;
      margin:0 auto 0 auto;
      text-align: left;
      padding:10px 0 0 0;
    }
    	#nav{
    	width:750px;
    	height:auto;
    	margin:0;
    	z-index:201;
    	}
    		#tabONEoff, #tabTWOoff, #tabTHREEoff, #tabFOURoff {
    		background:url(images/nav_background.gif) no-repeat;
    		width:100px;
    		height:17px;
    		float:right;
    		margin-right:2px;
    		text-align:center;
    		font-weight: bold;
    		font-size: .8em;
    		color:#444444;
    		z-index:201;
    		}
    		
    		#tabONEon, #tabTWOon, #tabTHREEon, #tabFOURon {
    		background:url(images/navHERE_background.gif) no-repeat;
    		width:100px;
    		height:17px;
    		float:right;
    		margin-right:2px;
    		text-align:center;
    		font-weight: bold;
    		font-size: .8em;
    		color:#444444;
    		z-index:301;
    		}
    		
    		#subnav {
    		width:750px;
    		height:23px;
    		background:url(images/subnav_background.gif) repeat-x;
    		border-top:1px solid #ffffff;
    		margin:-1px;
    		text-align:right;
    		padding:0 2px 0 0;
    		clear:both;
    		font-weight: bold;
    		font-size: .8em;
    		color:#444444;
    		z-index:290;
    		}
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="nav">
    		<div id="tabONEoff">About</div>
    		<div id="tabTWOoff">Tools</div>
    		<div id="tabTHREEoff">Hosting</div>
    		<div id="tabONEon">Home</div>
    	</div>
    	<div id="subnav">Text</div>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Divs don't automatically change css hover states...

    onmouseover="this.className=blablabla"

    Why are you using different classes anyway when the items are looking all the same?

    I suggest using unordered lists to do this instead.
    CATdude about IE6: "All your box-model are belong to us"

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, you're right. This one works better. I still can't fix the z-index problem though.... the "on" tab I want to cover the 1px top border of the subnav.

    Code:
    <!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></title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    #wrapper {
      width:750px;
      height:100%;
      margin:0 auto 0 auto;
      text-align: left;
      padding:10px 0 0 0;
    }
    #nav,#nav li,#nav li ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #nav {
      position: relative;
      width:750px;
      height:auto;
      margin:0;
      z-index:201;
      font-size: .8em;
    }
    #nav li {
      margin: 0 0 0 2px;
      padding: 0;
      width:100px;
      height:17px;
      float:right;
      text-align:center;
      font-weight: bold;
      color:#444444;
    }
    
    .taboff {
      background:url(images/nav_background.gif) no-repeat;
      z-index:201;
    }
      
    .tabon {
      background:url(images/navHERE_background.gif) no-repeat;
      z-index:301;
    }
      
    ul#subnav {
      width:750px;
      height:23px;
      background:url(images/subnav_background.gif) repeat-x;
      border-top:1px solid #ffffff;
      margin: -1px 0 0;
      text-align:right;
      padding:0 2px 0 0;
      clear:both;
      font-weight: bold;
      font-size: .8em;
      color:#444444;
      z-index:290;
      position:absolute;
      margin: -1px 0 0;
      right: 0;
      top: 1.7em;
    }
    
    #subnav li {
      position:relative;
      z-index:102;
      display: block;
      margin: 0;
      padding: 3px 0 0 0;
      float:right;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <ul id="nav">
    	  <li class="taboff">About</li>
    	  <li class="taboff">Tools</li>
    	  <li class="taboff">Hosting</li>
    	  <li class="tabon">Home
    	  <ul id="subnav"><li>Text</li></ul>
    	  </li>
      </ul>
    </div>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I was able to get it right except now the flash banner that is supposed to start below the tabs and subnav does not, I can't figure out why. Also in IE (6) the tabs don't fill the width like they should and do in Firefox. Anyone?

    Code:
    <!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></title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      margin:0;
      padding:0;
      text-align: center; /* IE5/Win fix */  
    }
    
    #wrapper {
      width:750px;
      height:100%;
      margin:0 auto 0 auto;
      border:1px solid green;
      text-align: left;
    }
      #top {
       width:750px;
       height:60px;
       padding:5px 1px 0 3px;
      }
    
    		#logohead {
    		  width:370px;
    		  height:60px;
    		  float:left;
    		 }
    		
    		#toplinks {
    		  height:60px;
    		  width:365px;
    		  margin-left:380px;
    		  font-family:Verdana, Arial, Helvetica, sans-serif;
    		  font-size:10px;
    		}
    
      
    	  #midbanner {
    	   width:auto;
    	   height:170px;
    	   border:1px solid red;
    	   position:relative;
    	  }
    	  
    	  #bottomcontent {
    	   width:auto;
    	   height:auto;
    	   border:1px solid #990; /*yellow;*/
    	  }
      /* \*/
      * html #bottomcontent,* html #midbanner {
        width:750.5px;
        wid\th:760px;
      }
      
      /*NAVIGATION*/
      #nav,#nav li,#nav li ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    #nav {
      position: relative;
      width:100%;
      height:auto;
      margin:0;
      font-size: .8em;
    }
    #nav li {
      margin: 0 0 0 2px;
      padding: 0;
      width:100px;
      float:right;
      text-align:center;
      font-weight: bold;
      color:#444;
    }
    
    #nav a {
      display:block;
      color:#444;
      text-decoration:none;
      background: url(images/nav_background.gif) no-repeat;
      margin:0;
      position: relative;
      font-weight: bold;
      top: 0;
      line-height: 1.4em;
    }
    
    ul#nav li a.here {
      background: url(images/navHERE_background.gif) no-repeat;
      z-index: 310;
      position: relative;
      margin-bottom: -1px;
    }
      
    ul#subnav {
      width:750px;
      min-height: 23px;
      height: 1.7em;
      background:url(images/subnav_background.gif) repeat-x;
      border-top:1px solid #fff;
      text-align:right;
      padding:0 2px 0 0;
      clear:both;
      z-index:290;
      position:absolute;
      margin: 0;
      right: 0;
      top: 1.34em;
    }
    
    #subnav li {
      position:relative;
      z-index:102;
      display: block;
      margin: 0;
      padding: 0;
      float:right;
      line-height: 1.4em;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="top">
        <div id="logohead">LOGO Here</div>
        <div id="toplinks" align="right">:: Client Login</div>
      </div>
      <ul id="nav">
    	  <li><a class="a3" href="../fresh/about.htm">About</a></li>
    	  <li><a class="a2" href="#">Tools</a></li>
    	  <li><a class="a1" href="#">Hosting</a></li>
    	  <li><a class="a0 here" href="#">Home</a>
    	  <ul id="subnav"><li>Text</li></ul>
    	  </li>
      </ul>
      <div id="midbanner">Flash Banner Here</div>
      <div id="bottomcontent">Bottom Content Starts Here</div>
    </div>
    </body>
    </html>
    Last edited by niemie; 05-25-2005 at 06:00 PM.


  •  

    Posting Permissions

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