Slight menu misalignment

Hi, I am having a problem with a horizontal menu. It seems to work fine in all browsers but Firefox, and when I tweak the CSS to make it look good in Firefoxthe other browser look dodgy.

Please see www.wordspeare.co.uk

On the main horizontal menu along the top, the images used for the hover effect and the ‘current’ page marker are slightly misaligned in Firefox - about one pixel lower than they should be

Here’s the css that relates to the menu:

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


#menu {
	background-image:url(../images/menu-bar-full.png);
	background-repeat:no-repeat;
	height:42px;
	font-weight:normal;
	padding-right:70px;
	text-align:right;
}


#menu ul {
	padding:10px 0px 11px 0px;
	margin:auto;
	list-style:none;
	
	}

#menu li {
	display:inline;
}

#menu #current a {
	background-image:url(../images/menu-bar-light-blue.png);
	background-repeat:repeat-x;
}

#menu #current a:hover {
	background-image:url(../images/menu-bar-grey.png);
	background-repeat:repeat-x;
}


#menu a {
	/*border:solid 1px #000000;*/
	text-decoration:none;
	color:#FFFFFF;
	font-size:18px;
	padding:10px 16px 11px 16px;
}

#menu a:hover {
	background-image:url(../images/menu-bar-grey.png);
	background-repeat:repeat-x;
	
}

Any ideas?

I get a login page upon going there? :slight_smile:

Sorry, my colleague took it offline. Should be good now.

I’d be tempted to go along a slightly different route, such as this :slight_smile:

#menu a
{
	display:-moz-inline-box;/*FF2*/
	display:inline-block;/*Allow vertical padding*/
}
#menu ul
{
	width:600px;/*Allow for auto margins*/
	padding:0;/*No need*/
}

Thanks. Does this replace the other code for a and ul? or add to it?

The anchor code you will add (it doesn’t have it to begin with)

The width on teh <ul> you will add in, the padding rule you will just remove from the CSS file (I have padding:0 set there because I had to override the one set in your stylesheet)

So everything there you are adding, but the padding on the <ul> rule you are actually just going to remove that from your CSS file :slight_smile:

As usual - worked a treat. Thank you.

Can I ask, what’s the display:-moz-inline-box;/FF2/ all about?

FF2 doesn’t support display:inline-block (though it has a vendor extension version of it) and as a result, if you want FF2 support (if not then remove that line, though it will cater for all your FF2 users) then that line is needed :).