I’ve got a link list that is in <div>s and <ul>s for their layout. Every thing works great in Firefox but in IE the borders do not show up until you hover over the links. (I’m not talking about the link border, text-deco) Except for the first <li> which has it’s own class “first” ’cause I want border’s on top and bottom of it, those do not show up at all. I’m so sick of IE and these type of bugs. Anyway I appreciate the help, thanks in advance.
Link List:
[CODE]
<div id=”linkList”>
<!–extra div for flexibility –>
<div id=”linkList2″>
<!– If you’re wondering about the extra at the end of the link, it’s a hack to meet WCAG 1 Accessibility. –>
<div id=”subLink1″>
<h3 class=”subLink1Title”><span>Main</span></h3>
<!– list of links begins here. –>
<ul>
<li class=”first”><a href=”<% =vSiteLink %>default.asp”>Home</a> </li>
<li><a href=”<% =vSiteLink %>viewnews.asp”>News</a> </li>
<li><a href=”<% =vSiteLink %>viewdownloads.asp”>Downloads</a> </li>
<li><a href=”<% =vSiteLink %>viewpolls.asp”>Polls</a> </li>
<li><a href=”<% =vSiteLink %>contact.asp”>Contact Us</a> </li>
</ul>
</div>
<% If Session(“userGood”) = True then %>
<div id=”subLink2″>
<h3 class=”subLink2Title”><span>Members</span></h3>
<ul>
<li class=”first”><a href=”<% =vSiteLink %>members/”>My Homepage</a> </li>
<li><a href=”<% =vSiteLink %>members/projects.asp?mode=list”>My Projects</a> </li>
<li><a href=”<% =vSiteLink %>members/projects.asp?mode=search”>Search Projects</a> </li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=editprofile”>Edit Profile</a> </li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=changepassword”>Change Password</a> </li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=listusers”>Member List</a> </li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=search”>Search Members</a> </li>
</ul>
</div>
<% If Session(“userAdmin”) = 1 then %>
<div id=”subLink3″>
<h3 class=”subLink3Title”><span>Admin</span></h3>
<ul>
<li class=”first”><a href=”<% =vSiteLink %>members/admin/”>Admin Panel</a> </li>
</ul>
</div>
<% End If %>
<% End If %>
</div>
</div>
CSS:
[CODE]
/* Nav —————————————————– */
#linkList {
position: relative;
top: 5px;
left: 0;
width: 175px;
}
#subLink1 ul, #subLink2 ul, #subLink3 ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 40px;
}
#linkList #subLink1 ul li {
font-size: 13px;
border-top: none;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}
#linkList #subLink2 ul li {
font-size: 13px;
border-top: none;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}
#linkList #subLink3 ul li {
font-size: 13px;
border-top: none;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}
#linkList ul li.first {
font-size: 13px;
border-top: 1px dotted #CCCCCC;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}
#linkList ul li.newscat {
text-indent: 10px;
}
#linkList ul li a.newscat {
font-size: 12px;
color: #616161;
}
#subLink3 h3.subLink3Title {
font-weight:bold;
width: 125px;
height: 15px;
margin: 30px 0 5px 40px;
}
#subLink2 h3.subLink2Title {
font-weight:bold;
width: 125px;
height: 15px;
margin: 30px 0 5px 40px;
}
#subLink1 h3.subLink1Title {
font-weight:bold;
width: 125px;
height: 15px;
margin: 30px 0 5px 40px;
}