0

I was just wondering if anyone knew how to fix the UL and LI hierarchy problem in css with tabmenus.

I wanted the border under my featured tab to disappear but it doesnt work well in IE.

Please have a look; if you look at this code in Firefox it should show the first tab as being white without the black border on the bottom of it. In IE the black border is there because the UL border overwrote the LI border.

Does anyone know a work around?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<style type="text/css">
/* START TAB MENU */
ul
{
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 14px;
 border-bottom: 1px solid #808080;
 height: 21px !important;
 height: 20px;
}
li
{
 float: left;
 margin-right: 10px;
 border: 1px solid #808080;
 border-bottom: none;
}
li a
{
 background-color: #f2f3f5;
 color: #808080;
 padding: 2px 10px 3px 10px;
 display: block;
 text-decoration: underline;
 font: 12px arial;
}
body .featured
{
 background-color: #ffffff;
 color: #000000;
 border-bottom: 1px solid #ffffff;
 text-decoration: none;
 font-weight: bold;
}
/*  END TAB MENU */
</style>
</head>
<body>
 
<ul>
      <li>
       <a href="#" class="featured">Create User</a></li>
      <li>
       <a href="#">Edit User</a></li>
      <li>
       <a href="#">View All Users</a></li>
      <li>
       <a href="#">Reports</a></li>
      <li>
       <a href="#">Log Out</a>
      </li>
</ul>
</body>
</html>
2
Contributors
2
Replies
3
Views
10 Years
Discussion Span
Last Post by vexhawk
0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<style type="text/css">
/* START TAB MENU */
ul
{
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 14px;
 border-bottom: 1px solid #808080;
 height: 21px !important;
 height: 20px;
}
li
{
 float: left;
 margin-right: 10px;
 border: 1px solid #808080;
 border-bottom: none;
}
li a
{
 background-color: #f2f3f5;
 color: #808080;
 padding: 2px 10px 3px 10px;
 display: block;
 text-decoration: underline;
 font: 12px arial;
}
.featured
{
 background-color: #ffffff;
 color: #000000;
 border-bottom: 1px solid #ff0000;
 text-decoration: none;
 font-weight: bold;
}
/*  END TAB MENU */
</style>
</head>
<body>
 
<ul>
      <li>
       <a href="#" class="featured">Create User</a></li>
      <li>
       <a href="#">Edit User</a></li>
      <li>
       <a href="#">View All Users</a></li>
      <li>
       <a href="#">Reports</a></li>
      <li>
       <a href="#">Log Out</a>
      </li>
</ul>
</body>
</html>

It looks like in Firefox, the bottom border for the ul is aligned with the bottom border for the anchor, but in IE, the border for the anchor is just slightly above the border for the ul.

0

I think what is happening in firefox is that the borders are collapsing and the LI is overlapping the UL border. (i already tried the border-collapse property for IE)

In IE, the border is NOT collapsing. isntead the white LI border sits on top of the UL border.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.