CSS Tabs - a few issues

niemie

05-24-2005, 02:05 AM

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/subnav_background.gif)
http://yourthreshold.com/downloads/..._background.gif (http://yourthreshold.com/downloads/navHERE_background.gif)

<!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>

mrruben5

05-24-2005, 01:49 PM

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.

niemie

05-24-2005, 04:56 PM

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.

<!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>

niemie

05-25-2005, 04:56 PM

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?

<!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>