IE 7 Border Problem...

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

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

**rangana** · 10-15-2008, 02:12 AM

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.

Thread: IE 7 Border Problem...

Thread Tools

Search Thread

IE 7 Border Problem...

The Following User Says Thank You to rangana For This Useful Post:

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions