2 replies [Last post]
djwhisky
djwhisky's picture
Offline
newbie
Tonbridge, Kent, UK
Last seen: 16 years 10 weeks ago
Tonbridge, Kent, UK
Joined: 2004-07-09
Posts: 6
Points: 0

Hi there,

I'm adding a horizontal menu to a site i'm designing, but having a nightmare finishing the last item off - there always seems to be a 5-6 pixel gap at the end of the menu in IE... it works fine in Firefox...

here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML lang="en">
	<HEAD>
		<title></title>
		<link rel="stylesheet" href="manback.css" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
	</HEAD>
	<body>
		<div id="outerpagelayout">
			<div id="innerpagelayout">
				<div id="pageheader">
					<div id="companylogo"></div>
					<div id="mainnavigation">
						<ul>
							<li><a href="">About Us</a></li><li><a href="">Services</a></li><li><a href="">Products</a></li><li><a href="">Case Studies</a></li><li><a href="">Support</a></li><li id="endnav"><a href="">Contact Us</a></li>
						</ul>
					</div>
				</div>
				<div id="pagebody">
				
				</div>
		
			</div>
		</div>
	</body>
</HTML>

and here's the stylesheet:

body
{
	margin:0px;
	padding:0px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
}

#outerpagelayout
{
	width:750px;
	margin:5px;
	padding: 0px;
	border: solid 1px #E4E4E4;
}

#innerpagelayout
{
	border: solid 1px #DADADA;
	padding: 1px;
	margin: 0px;
}

#pageheader
{
	margin: 0px;
	padding: 0px;
	border: solid 1px #2154B3;
}

#companylogo
{
	margin: 0px;
	padding: 0px;
	border-top: solid 1px #B5D0E1;
	border-left: solid 1px #B5D0E1;
	border-bottom: solid 1px #054B77;
	border-right: solid 1px #054B77;
	height:64px;
	background-image: url(images/toppic.jpg);
	background-repeat: no-repeat;
}

#mainnavigation
{
	font-size: 0.7em;
	border-right: solid 1px #054B77;
	border-top: solid 1px #B5D0E1; 
	border-bottom: solid 1px #054B77;

}

#mainnavigation ul
{
	margin:0px;
	padding-top:3px;
	padding-bottom: 3px;
	padding-left:0px;
	padding-right:0px;
	white-space: nowrap;
	background-color: #2154B3;

}

#mainnavigation ul li
{

	display:inline;
	padding-top:3px;
	padding-bottom:3px;

}


#mainnavigation ul li a
{
	display:inline;
	background-color: #2154B3;
	color: #ffffff;
	text-decoration:none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:3px;
	padding-bottom:3px;
	border-right: solid 1px #054B77;
	border-left: solid 1px #B5D0E1;
	margin:0px;

}

#mainnavigation ul li a:hover
{
	
	background-color: #5F79A5;
	
}

#mainnavigation ul li#endnav
{
	padding-right:0px;
	margin-right:0px;
	border-right: solid 1px #B5D0E1;
}

and an example of what i want the last item to look like (in Firefox):

and how it looks (in IE)

The only way i've managed to get it to work is to add an extra dummy <li> element at the end of the list - but obviously this isn't ideal in terms of separating my content from presentation and seems like a bit of a fudge to me!!!

any help most appreciated!!

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 7 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

Horizontal menu problems in IE

I highlighted some changes in red.
**tested in N7, O7, FF, IE6

Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML lang="en">
<HEAD>
<title></title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}

#outerpagelayout
{
width:750px;
margin:5px;
padding: 0px;
border: solid 1px #E4E4E4;
}

#innerpagelayout
{
border: solid 1px #DADADA;
padding: 1px;
margin: 0px;
}

#pageheader
{
margin: 0px;
padding: 0px;
border: solid 1px #2154B3;
}

#companylogo
{
margin: 0px;
padding: 0px;
border-top: solid 1px #B5D0E1;
border-left: solid 1px #B5D0E1;
border-bottom: solid 1px #054B77;
border-right: solid 1px #054B77;
height:64px;
background-image: url(images/toppic.jpg);
background-repeat: no-repeat;
}

#mainnavigation
{
font-size: 0.7em;
border-right: solid 1px #054B77;
border-top: solid 1px #B5D0E1;
border-bottom: solid 1px #054B77;

background-color: #2154B3;
display:block; /*gives appearance of blue bar*/

}
.clear {
clear:left; /*clearing div to extend mainnavigation to end of ul*/
content:"";

}
#mainnavigation ul
{
margin:0px;
padding-top:3px;
padding-bottom: 3px;
padding-left:0px;
padding-right:0px;
white-space: nowrap;
background-color: #2154B3;

border-right: solid 1px #B5D0E1; /*right border of list, no need to insert endnav*/
float:left; /*keeps menu left, and forces right border not to align all the way to the right*/

}

#mainnavigation ul li
{

display:inline;
padding-top:3px;
padding-bottom:3px;

}

#mainnavigation ul li a
{
/*display:inline; NOT NECCESSARY */
background-color: #2154B3;
color: #ffffff;
text-decoration:none;
padding: 3px 10px;
border-right: solid 1px #054B77;
border-left: solid 1px #B5D0E1;
margin:0px;
}

#mainnavigation ul li a:hover {
background-color: #5F79A5;
}

/* #mainnavigation ul li#endnav
{
padding-right:0px;
margin-right:0px;
border-right: solid 1px #B5D0E1;
} */
</style>
<meta name="keywords" content="" />
<meta name="description" content="" />
</HEAD>
<body>
<div id="outerpagelayout">
<div id="innerpagelayout">
<div id="pageheader">
<div id="companylogo"></div>
<div id="mainnavigation">
<ul>
<li><a href="">About Us</a></li><li><a

href="">Services</a></li><li><a href="">Products</a></li><li><a

href="">Case Studies</a></li><li><a href="">Support</a></li><li

id="endnav"><a href="">Contact Us</a></li>
</ul>

<div class="clear"></div>

</div>
</div>
<div id="pagebody">

</div>

</div>
</div>
</body>
</HTML>

djwhisky
djwhisky's picture
Offline
newbie
Tonbridge, Kent, UK
Last seen: 16 years 10 weeks ago
Tonbridge, Kent, UK
Joined: 2004-07-09
Posts: 6
Points: 0

Horizontal menu problems in IE

Woohooo!! That's great thank you very much!!! Laughing out loud