Sent by Michael Efford on 6 September 2002 18:06
Scratch that last email, I just changed it modified it again and now it
works perfectly woohoo!! (unless someone tells me it looks horrible in IE
5)
I followed Tuttle Grey's advice and changed to <div>'s for the menu...
<div class="selected"><a href="index.shtml">Home</a></div>
<div class="unselected"><a href="hidden.shtml">Hidden Cameras</a></div>
<div class="unselected"><a href="cctv.shtml">CCTV Cameras</a></div>
<div class="unselected"><a href="employee.shtml">Employee Theft</a></div>
<div class="unselected"><a href="helpful.shtml">Helpful Hints</a></div>
<div class="unselected"><a href="faq.shtml">F.A.Q</a></div>
<div class="unselected"><a href="about.shtml">About Us</a></div>
<div class="unselected"><a href="contact.shtml">Contact Us</a></div>
<div class="filler"></div>
and the css...
.filler { /*makes whole link clickable in ie*/
width:180px;
height:0px;
padding:0px;
margin:0px;
display: block;
}
.selected {
border-bottom: 1px solid #90bade;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
}
.unselected {
border-bottom: 1px solid #90bade;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
}
.unselected a {
display: block;
padding: 5px 5px 5px 15px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
}
.selected a {
display: block;
padding: 5px 5px 5px 15px;
border-left: 10px solid #0948a7;
border-right: 10px solid #407fb4;
background-color: #1958b7;
color: #fff;
text-decoration: none;
}
.selected a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
.unselected a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
