Sent by Jamie Macdonald on 29 September 2002 20:08
Hello all - I'm having a slight problem with tabs in my design that I'm
hoping someone will see the obvious solution for (the one that has,
alas, so far eluded me).
The tabs on this page,
http://www.pipmg.com/test.html
http://www.pipmg.com/main.css
work exactly as I want them to in Moz; using an in-line list, when the
<li>'s class is set to "active", it's bottom border's colour should be
the same as the background colour (thus covering up some of the next
div's top-border, giving the effect of a real tab.
In IE5.2 (osx), however, the border remains black; or rather, the black
border from the div below remains visible. What are the two browsers
interpreting differently that would account for this difference?
Thanks for your help,
Jamie
-----------------------------------
Here's the pertinent code:
<ul id="tabs">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Links</a></li>
</ul>
<div id="main">
/* navigation tabs */
#tabs {
font-family: arial, sans-serif;
font-size: 12px;
color: black;
margin: 0px 0px 0px 20px;
padding: 0px;
text-align: left;
background-color: white
}
#tabs li {
display: inline;
list-style-type: none
}
#tabs a, a.active {
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 0px;
margin-bottom: 0px;
border: 1px solid black;
text-decoration: none;
color: black;
font-weight: normal;
background-color: #DDDDDD
}
#tabs a:hover {
background-color: white
}
#tabs a.active {
border-bottom: 1px solid #DDDDDD;
font-weight: bold
}
#tabs a.active:hover {
background-color: #DDDDDD
}
#main {
border: 1px solid black;
width: 98%;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #DDDDDD;
text-align: left;
}
