IE 7 Border Problem... [Archive] - Dynamic Drive Forums

Rockonmetal

10-14-2008, 11:43 PM

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:

.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:

<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

rangana

10-15-2008, 02:12 AM

First, ensure you have a DTD (http://alistapart.com/articles/doctype) on your page (in case you don't have as the snippet you've shown only shows the markup).

Secondly, add highlighted:

.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:

<!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 (http://codingforums.com/showthread.php?p=739296#post739296) as what you are experiencing, where other alternatives are given.

Hope that helps.