Menu - unwanted space between elements 2

[ralphonzo]

Can anyone see why there's a space between the elements within the menu bar @

http://wfpark.co.uk/testing/?

The issue occurs between the Services and Testimonials tabs, the former being focus for a dropdown.

The original source code is from

http://www.lwis.net/

and is working really nicely, apart from this one issue that I can't get on top of!

<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li class="dir">Services
	<ul>
		<li class="first"><a href="#">Workshops</a>
		<li><a href="#">Industrial Units</a></li>
		<li><a href="#">Open Storage</a></li>
		<li class="last"><a href="#">Secure Parking</a></li>
	</ul>
	</li>
	<li><a href="#">Testimonials</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

default.css:

@charset "UTF-8";

/** 
 * Vimeo.com CSS Drop-Down Menu Theme
 *
 * @file		default.css
 * @name		Vimeo
 * @version		beta
 * @type		transitional
 * @browsers	Windows: IE5+, Opera9+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		[URL unfurl="true"]http://www.lwis.net/[/URL]
 * @copyright	2009 Live Web Institute. All Rights Reserved.
 *
 */


/*-------------------------------------------------/
 * @section		Base Drop-Down Styling
 */


ul.dropdown {
 background: transparent url(images/Wallingfen_Park_button_bg.jpg) 0 100% no-repeat;
 font: bold 14px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

	ul.dropdown li {
	 padding: 5px 10px;
	 background: transparent url(images/Wallingfen_Park_button_bg.jpg) 0 100% no-repeat;
	 width: 125px;
	 /*background-color: #abcdef;*/
	 color: #fff;
	 line-height: 22px;
	 white-space: nowrap;
	}

	ul.dropdown li.first {
	 padding-left: 5px;
	 background: transparent url(images/box1-bottom2.png) 0 100% no-repeat;
	}

	ul.dropdown li.last {
	 padding-right: 15px;
	 background: transparent url(images/box1-bottom2.png) 100% 100% no-repeat;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 color: #FFD900;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #fff; text-decoration: none; }	/* main button text */
	ul.dropdown a:hover		{ color: #FFD900; }
	ul.dropdown a:active	{ color: #FFD900; }


	/* -- level mark -- */

	ul.dropdown ul {
	 left: -21px;
	 width: 150px;
	 padding: 0 16px;
	 background: url(images/box1-top.png) 50% 0 no-repeat;
	}

	ul.dropdown li.last ul {
	 left: auto;
	 right: 16px;
	}

		ul.dropdown ul li {
		 height: 25px;
		 width: 150px;
		 background: transparent url(images/Wallingfen_Park_dropdown_bg.jpg) 0 100% no-repeat; 
		 padding: 5px 15px;
		 line-height: 1.3em;
		 white-space: nowrap;
		}

		ul.dropdown ul li.first {
		 padding-left: 0;
		 background: #172322;
		}

		ul.dropdown ul li.last {
		 padding-bottom: 10px;
		 background: transparent url(images/box1-bottom.png) 50% 100% no-repeat;
		}

		ul.dropdown ul li.first ul {
		 top: 0;
		 padding: 0 16px 0 0;
		 background-image: url(images/box1-outwards-top-right.png);
		}

		ul.dropdown ul li.first li.first {
		 background-image: none;
		}

		ul.dropdown ul li.last {
		 padding-right: 0;
		}

		ul.dropdown ul li.last ul {
		 left: 100%;
		 right: auto;
		 top: -16px;
		}

		/* -- level mark -- */

		ul.dropdown ul ul {
		 top: -12px;
		 left: 100%;
		 padding: 16px 0 0;
		 background: transparent url(images/box1-top-left.png) 0 0 no-repeat;
		}

			ul.dropdown ul ul li.first {
			 padding-top: 10px;
			 background: #172322 url(images/box1-top-right.png) 100% 0 no-repeat;
			}

/*-------------------------------------------------/
 * @section		Support Class `dir`
 */


ul.dropdown *.dir {
 /*padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;*/
 	 padding: 5px 10px;
	 background: transparent url(images/Wallingfen_Park_button_bg.jpg) 0 50% no-repeat;
	 width: 125px;
	 /*background-color: #abcdef;*/
	 color: #fff;
	 line-height: 22px;
	 white-space: nowrap;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 95% 50%;
 background-repeat: no-repeat;
}

default.advanced.css:

@import "default.css";

/*-------------------------------------------------/
 * @section		Base Style Extension
 */

ul.dropdown li a {
 display: block;
 padding: 5px 10px;
}

/*-------------------------------------------------/
 * @section		Base Style Override
 */

ul.dropdown li, ul.dropdown ul li {
 padding: 0;
}

/*-------------------------------------------------/
 * @section		Base Style Reinitiate: post-override activities
 */

ul.dropdown li.dir {
 padding: 5px 20px 5px 10px;
}

ul.dropdown ul li.dir {
 padding: 5px 15px;
}

/*-------------------------------------------------/
 * @section		Custom
 */

ul.dropdown ul a {
 padding-left: 15px;
}

ul.dropdown li.hover *.open {
 color: #FFD900;
}

/* CSS2 clone */

ul.dropdown li:hover > *.dir {
 color: #FFD900;
}

Any help would be greatly appreciated thanks,

Ralph

 

[Vragabond]

It's the extra padding you're applying to the left and right side on this specific element:

ul.dropdown li.dir {
 padding: 5px [!]20px[/!] 5px [!]10px[/!];
}

Width of your buttons is 125px, with 20px margin on the right and 10px on the left, your Services button is 155px wide. Your button image is 129px wide. Hence, there's white around the button. Of course, if padding is needed, just repeat the background over x (repeat-x) and your graphic will extend to fill the white space. Or make your graphics longer, if repeating it is out of the question.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ralphonzo]

It's the simple things that prove genius )

Thank you Vragabond

 

[Geates]

not nearly as helpful, but... make sure to terminate your <li> tags

<li class="first"><a href="#">Workshops</a>

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[ralphonzo]

Scrappy! I missed that one. Well spotted - I like the psycho line too )