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> Code (markup):
Here is the code, please try this: <!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: 20px; !important; height: 22px } 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>