• 0

Help with 1px gap.


Question

I am working on the navigation menu with drop down lists for a website and have hit a snag with a 1px gap between the navigation and the drop down list. I can't figure out where it is coming from. If anyone can help me figure this out it would be much appreciated.

The website:

http://www.islandrobot.com/vanessa/

The relevant CSS: (keep in mind that the drop down is still under construction)

ul#nav {
	list-style-type: none;
	padding: 0;
	margin: 0;
	background-color: #49d4d9;
	height: 30px;
	text-align: center;
}

ul#nav li  {
	display: inline-block;
	line-height: 30px;
	height: 30px;
	padding: 0 24px;
	margin: 0;
	background: #49d4d9 url('images/nav_separator.gif') no-repeat center left;
}

ul#nav li#nhome {
	background: none;
}

ul#nav a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

ul#nav li a:hover {
	text-decoration: underline;
}

/* Second Level Lists */

ul#nav li ul {
	position: absolute;
	margin: 0;
	padding: 0;
}

ul#nav li ul li {
	margin: 0;
	padding: 0;
}

A screenshot of the gap:

post-71602-12717057249377.png

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

It's the line-height in that first list item that's causing that 1px gap.

Change the value from 30px to 29px and you'll see that it goes away.

ul#nav li  {
	display: inline-block;
	line-height: 29px;
	height: 30px;
	padding: 0 24px;
	margin: 0;
	background: #49d4d9 url('images/nav_separator.gif') no-repeat center left;
}

Link to comment
Share on other sites

  • 0

Thanks. But why is that? If the containing ul as well as the li both have 30px height, then shouldn't the line height be able to go up to 30px without causing a gap?

Something I also noticed was weird was that if I decreased the font size, the gap increased to 2px.

Link to comment
Share on other sites

This topic is now closed to further replies.