-
IE 7 Border Problem...
I am having a problem with a menu i made from scratch. It has a 1 pixel border on both the top and bottom for each element. Then when hovered it changes to a 2 pixel border with a different color. Now in Google Chrome it works beautifully. But IE 7 refuses to show the borders. Here is my css code:
HTML Code:
.menu{
float: left;
border-top: 1px solid #888888;
border-bottom: 1px solid #888888;
width: 100%;
overflow: hidden;
margin: 0px 0px 0px 0px;
}
.menu ul{
display:inline-block !important;
list-style-type: none;
}
.menu ul li{
float: left;
}
.menu li a{
padding: 5px 5px 5px 5px;
border-bottom: 1px solid #CCCCCC !important;
border-top: 1px solid #CCCCCC !important;
color: #888888 !important;
text-decoration: none;
}
.menu li a:hover{
border-top: 2px solid #888888 !important;
border-bottom: 2px solid #888888 !important;
color: #444444 !important;
}
here is the html code for the menu:
HTML Code:
<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="team.php">Team Profiles</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="experience.php">Experience</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="login.php">Client Login</a></li>
</ul>
</div>
This seriously baffles me... Help is greatly appreciated... :p
-
First, ensure you have a DTD on your page (in case you don't have as the snippet you've shown only shows the markup).
Secondly, add highlighted:
Code:
.menu li a{
padding: 5px 5px 5px 5px;
border-bottom: 1px solid #CCCCCC !important;
border-top: 1px solid #CCCCCC !important;
color: #888888 !important;
display:block;
text-decoration: none;
}
IE has problems showing the top and bottom border, on a element which is displayed inline.
See example code for testing:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul{
list-style-type:none;
}
ul li{float:left;margin:10px;}
ul li a{border:5px solid #222;padding:10px;}
</style>
</head>
<body>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</body>
</html>
Don't ask me the reason why, I'm uncertain.
On CF, there's an exact the same problem as what you are experiencing, where other alternatives are given.
Hope that helps.
