No replies
xxphunkadelikxx's picture
Last seen: 15 years 18 weeks ago
Joined: 2005-12-01
Posts: 29
Points: 0

Hi Guys,

I've come across this issue for vertical navigation in IE browsers. Please refer to the link below of an image of how my navigation looks in IE browsers:

As you can see, at the bottom of the navigation there is a 1pixel line which occurs, but I'm not sure why it does. In mozilla based browsers all is ok. Here is the html code I've used, and the corresponding css:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" href="master_layout.css" type="text/css" media="all" />
		<link rel="stylesheet" href="master_colour.css" type="text/css" media="all" />


<!-- drill down div assigned to encompass all relevant styling for drilldown section -->
<div id="left-column">

<div id="presentation">
<li><a href="#" title="View Video Presentation (opens in new window)">View Presentation</a></li>

<p><a href="#" target="_top">Visit our Books and Entertainment department</a></p>




	#presentation ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	#presentation li {
		margin: 0;
	#presentation li a {
		display: block; /* apply to group list item and link together */
		font-size: 70%;
		padding: 5px;
		width: 100%; /* set to 100% to allow IE to recognise entire width when hovering rather than just the text */
		text-decoration: none;

	html>body #presentation li a { /*  style only read by mozilla browsers as child selectors not recognised in IE */
		width: auto; /* set width to auto for mozilla browsers to recognise and override IE width 100% setting above */
	#presentation ul {
		background: #B93C3D;

	#presentation li a {
		border-bottom: 2px solid #ffffff;
		background-color: #B93C3D;

	#presentation a:link, #presentation a:visited {
		color: #FFFFFF;
		background-image: url(/image/dd_arrow_off.gif); /* adds arrow image in link */
		background-repeat: no-repeat;
		background-position: right;

	#presentation a:hover ,#presentation a:active {
		color: #B93C3D;
		background-image: url(/image/dd_arrow_on.gif); /* adds arrow image in link */
		background-repeat: no-repeat;
		background-position: right;
		background-color: #C7C6C3;

Any help would be greatly appreciated.