Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 2720 | Replies: 2
 |
•
•
Join Date: Oct 2006
Posts: 24
Reputation: 
Rep Power: 3
Solved Threads: 0
Newbie Poster
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?
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?
html Syntax (Toggle Plain Text)
•
•
Join Date: Mar 2005
Location: Nebraska, U.S.
Posts: 191
Reputation:
Rep Power: 4
Solved Threads: 4
Junior Poster
<!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.
•
•
Join Date: Oct 2006
Posts: 24
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
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.
In IE, the border is NOT collapsing. isntead the white LI border sits on top of the UL border.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
