• Locked
No replies
Wed, 2011-05-11 20:32
henry hayes
henry hayes's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Timezone: GMT+2
Joined: 2011-01-16
Posts: 4
Points: 7

Works well in all other browsers, but in IE7 hover expands a few pixels vertically when hovering.
Only tested in IE7 so might be same for older versions?.
Probably some padding-issue; i did try applying display:inline and display:inline-block.

How to solve issue?

HTML

<body>
<div id="navwrap">
  <div class="navbar">
    <ul>
      	<li><a href="../navbar_vertical_dynamicdrice/index_test_forumtest.html" >index_test</a></li>
		<li><a href="../navbar_vertical_dynamicdrice/index_linked_forumtest.html" class="selected">index_linked</a></li>
	</ul>
  </div>
</div>
</body>

CSS

#navwrap {
	background-color: #FFC;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 100%;
	width: 200px;
	position: relative;
	visibility: visible;
}
 
.navbar{
	background-color: #FC6;
	width: 200px;
	border: 2px solid #000;
}
 
.navbar ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
 
.navbar a{
	font: bold 14px Verdana;
	display: block;
	width: 100%;
	color: #595959;
	text-decoration: none;
	border-bottom: 1px solid #C0C0C0;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
 
.navbar a:visited{
color: #595959;
}
 
.navbar a:hover{
	background-color: #C90;
	color: black;
	width: auto;
}
 
.navbar a.selected {
	color: #0F3;
	background: #5D0C0C;
	width: auto;
}

Top
Tags: