Alex October 4th, 2006
Spent a little while this morning trying to fix a little inconsistency between IE (v6) and Firefox in how the border settings for ul and li elements worked. Here are a couple of screenshots to demonstrate the problem:
IE:

Firefox:

And here’s a snippet of the CSS I was using:
ul.menu {
margin: 0;
padding: 0;
left: 20px;
width: 90%;
border-bottom: solid 1px #d09800;
}
ul.menu li {
display: inline;
margin: 0;
}
ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}
ul.menu li a {
font-size: 1em;
color: #d09800;
margin: 0;
border: solid 1px ;
}
ul.menu li a:hover {
background: #fdfaf3;
color: black !important;
text-decoration: none;
border: solid 1px #d09800;
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #333 !important;
background: white;
text-decoration: none;
broder: 1px;
border-top: solid 1px #d09800;
border-left: solid 1px #d09800;
border-right: solid 1px #d09800;
border-bottom: solid 1px white;
}
When I changed this snippet to be:
ul.menu {
margin: 9px;
padding-left: 10px;
border-bottom: 1px solid #d09800;
padding-bottom: 6px;
padding-top: 5px;
}
ul.menu li {
display: inline;
margin: 0px;
}
ul.menu li a {
padding: 5px 15px 6px;
border: 1px solid #d09800;
text-decoration: none;
font-size: 1em;
color: #d09800;
margin: 0;
}
ul.menu li a:hover {
background: #fdfaf3;
color: black;
text-decoration: none;
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
border-top: 1px solid #d09800;
border-bottom: 1px solid #fff;
list-style: none;
display: inline;
color: #333;
background: white;
text-decoration: none;
}
Everything worked as I wanted it to! For info the original CSS was taken from the K2 Wordpress template which I adapted for the tabbed menu that we wanted for the MSG site.