Member Avatar for vexhawk

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
  • 100 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by vexhawk
Member Avatar for stupidenator 
<!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.

Member Avatar for vexhawk

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.