Forum Moderators: not2easy
I've made a set of navigation links that have a small background image and a border on the bottom. The border colour and image are changed when the links are hovered over. This renders fine in IE5.5, IE6, Firefox and Safari, but in IE7 the links display only the background image, not the bottom border.
Any help would be greatly appreciated
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
/* navigation */
#container #navigation {
height:40px;
font-size:2em;
margin-bottom: 70px;
margin-top:1px;
}
#container #navigation ul#navlist, #container #navigation ul#navlist li {
list-style-type:none;
display:inline;
}
#container #navigation ul#navlist li a {
margin:10px 10px 0;
padding: 4px 0 0 40px;
text-decoration:none;
color:#333;
border-bottom-width:4px;
border-bottom-style: solid;
background-repeat: no-repeat;
background-position: left center;
background-image: url(images/orange_nav.gif);
border-bottom-color:#3399FF
}
#container #navigation ul#navlist li a:hover {
border-bottom-color:#FFF;
background-image: url(images/white_nav.gif);
}
-->
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<ul id="navlist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</body>
</html>
#container #navigation ul#navlist li a {
display: inline-block;
vertical-align: bottom;
}
