I took a few list navigation systems from Listamatic and merged them to
make a tebbed interface with tabs and secondary navigation. They look
great in Firefox, but in IE they get all jacked up. I found that the
reason to be setting the width to 750px. When I took out the width,
(see the commeted code), it works fine in both browsers, except for an
extra 10px in width. I have rattled my brain trying to figure out why
it is doing this, so I thought I would get some second opinions.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
CODE STARTS HERE
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<!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>css tabbed nav</title>
<style type="text/css" media="all">
/* -----------------------------------------------------------
TABBED NAVIGATION
-------------------------------------------------------------- */
#navlist {
border-bottom: 1px solid #7B9EBD;
border-top: 1px solid #7A9DBD;
border-left: 1px solid #7A9DBD;
border-right: 1px solid #7A9DBD;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
padding-top: 10px;
background-color: #9CB6CE;
/* width: 750px; */
}
#navlist ul, #navlist li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited {
background: #DFDDBE;
border: 1px solid #7B9EBD;
color: #000;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current {
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
/* -------------------------------------------------------------+
MAKE THE NICE TABS CHANGE COLOR ON MOUSEOVER
+--------------------------------------------------------------*/
#navlist a.red:hover {
background-color: #C22500;
color: #fff;
}
#navlist a.blue:hover {
background-color: #0076C2;
color: #fff;
}
#navlist a.green:hover {
background-color: #50AE26;
color: #fff;
}
#navlist a.orange:hover {
background-color: #F57300;
color: #fff;
}
#navlist a.purple:hover {
background-color: #9600C2;
color: #fff;
}
body.section-1 #navlist li#nav-1 a,
body.section-2 #navlist li#nav-2 a,
body.section-3 #navlist li#nav-3 a,
body.section-4 #navlist li#nav-4 a {
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist #subnav-1,
#navlist #subnav-2,
#navlist #subnav-3,
#navlist #subnav-4 {
display: none;
width: 90%;
}
body.section-1 #navlist ul#subnav-1,
body.section-2 #navlist ul#subnav-2,
body.section-3 #navlist ul#subnav-3,
body.section-4 #navlist ul#subnav-4 {
display: inline;
left: 10px;
position: absolute;
top: 95px;
}
body.section-1 #navlist ul#subnav-1 a,
body.section-2 #navlist ul#subnav-2 a,
body.section-3 #navlist ul#subnav-3 a,
body.section-4 #navlist ul#subnav-4 a {
background: #fff;
border: none;
border-left: 1px solid #7B9EBD;
color: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10;
font-weight: bold;
line-height: 10px;
margin-right: 4px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist ul a:hover {
color: #f00 !important;
}
#contents {
background: #fff;
border: 1px solid #7B9EBD;
border-top: none;
clear: both;
margin: 0px;
padding: 15px;
}
/* -----------------------------------------------------------
LOWER NAVIGATION
-------------------------------------------------------------- */
#navlistlower {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #7A9DBD;
border-left: 1px solid #7A9DBD;
border-right: 1px solid #7A9DBD;
background-color: #fff;
/* width: 750px; */
}
#navlistlower ul, #navlistlower li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlistlower a:link, #navlistlower a:visited {
float: left;
line-height: 14px;
margin: 2px 5px 4px 10px;
text-decoration: none;
color: #666;
font-size: 10px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navlistlower a.red:link#current,
#navlistlower a.red:visited#current,
#navlistlower a.red:hover {
border-bottom: 4px solid #C22500;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#navlistlower a.blue:link#current,
#navlistlower a.blue:visited#current,
#navlistlower a.blue:hover {
border-bottom: 4px solid #0076C2;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#navlistlower a.green:link#current,
#navlistlower a.green:visited#current,
#navlistlower a.green:hover {
border-bottom: 4px solid #50AE26;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#navlistlower a.orange:link#current,
#navlistlower a.orange:visited#current,
#navlistlower a.orange:hover {
border-bottom: 4px solid #F57300;
padding-bottom: 2px;
background: transparent;
color: #000;
}
#navlistlower a.purple:link#current,
#navlistlower a.purple:visited#current,
#navlistlower a.purple:hover {
border-bottom: 4px solid #9600C2;
padding-bottom: 2px;
background: transparent;
color: #000;
}
</style>
</head>
<body>
<!-- TABBED NAVIGATION -->
<div id="tabcontainer">
<ul id="navlist">
<li id=""><a href="myprofile.php" id="" class="red">Lorem</a></li>
<li id="active"><a href="lhr.php" id="current"
class="blue">Ipsum</a></li>
<li id=""><a href="community.php" id="" class="green">Dolor</a></li>
<li id=""><a href="housecall.php" id="" class="orange">Sit</a></li>
<li id=""><a href="selfhelp.php" id="" class="purple">Amet</a></li>
</ul>
</div>
<!-- TABBED NAVIGATION **END** -->
<!-- SECONDARY NAVIGATION -->
<div id="navcontainer">
<ul id="navlistlower">
<li id="active"><a href="#" id="current"
class="blue">Vestibulum</a></li>
<li id=""><a href="#" id="" class="blue">Blandit</a></li>
<li id=""><a href="#" id="" class="blue">Lacus</a></li>
<li id=""><a href="#" id="" class="blue">Nec</a></li>
<li id=""><a href="#" id="" class="blue">Neque</a></li>
<li id=""><a href="#" id="" class="blue">Aliquam</a></li>
<li id=""><a href="#" id="" class="blue">Aliquet</a></li>
<li id=""><a href="#" id="" class="blue">Felis</a></li>
<li id=""><a href="#" id="" class="blue">Pellentesque</a></li>
</ul>
</div>
<!-- SECONDARY NAVIGATION **END** -->
</body>
</html>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
thanks!
Grady Kelly
Senior Web Architect
intermixCreative
[EMAIL PROTECTED]
http://www.intermixCreative.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
