No replies
xxphunkadelikxx
xxphunkadelikxx's picture
Offline
Regular
UK
Last seen: 15 years 18 weeks ago
UK
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:

http://www.phunkadelik.com/images/lists.gif

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:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
		<title></title>
		<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" />

</head>

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


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

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

</div>

</body>
</html>

CSS

	/*-- STYLES FOR DRILLDOWN --*/
	#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.

Thanks