Overflow hightlight button

[lemur]

Hi there,

I created highlitght button for current page to change color, but problem is cause it also seems to extend above top border of main navigation bar.
Any hint?

#mainnav {
	background-color: #404040;
	padding: 0.5em 1em 1.5em 0em;
	text-align:left;
	text-decoration:none;
	clear:both;
	margin-bottom:0.2em;
	height: 0.4em;
}


#mainnav ul li {
	display:inline;
	float: left;
	
}



#mainnav ul li a {
	text-decoration:none;
	color:#dddddd;
	padding-right: 1.5em;
	padding-bottom:0.63em;
	padding-top: 0.63em;
	padding-left: 1.5em;
	margin: 0;
	font-weight: lighter;
	border-right: 0.1em solid #c4c8c0;
}

<div id="mainnav">
   <ul>
    <li><a id="homebutton" href="index.html">Home</a></li>
    <li><a id="aboutmebutton"href="aboutme.html">About me</a></li>
   	  <li><a id="myjobbutton"href="myjob.html">CV</a></li>
      <li><a id="mediabutton"href="media.html">Media</a></li>
      <li><a id="contactbutton"href="contact.html">Contact</a></li>
	</ul>
</div><!--end mainnav -->

[ctaylo21]

Sorry but I don't understand what you're asking. Are you asking for help in creating a highlight effect on your nav menu? Because I don't see where you implemented the highlighting of a current page.

[lemur]

Sorry for the misunderstanding,

Hightlight button is working well, but effects is extend above top border.
Check teh web http://janwillemvandenbosch.co.uk/

[ctaylo21]

I see the problem. It is very strange, I'm not sure exactly why that is occurring. My temporary fix would be to change the CSS of your list items a bit:

#mainnav ul li a {
	text-decoration:none;
	color:#dddddd;
	padding-right: 1.5em;
	padding-bottom:0.5em;  //reduce padding here from .63 to .5
	padding-top: 0.5em;   //same here
	padding-left: 1.5em;
	margin: 0;
	font-weight: lighter;
	border-right: 0.1em solid #c4c8c0;
}

#mainnav {
	background-color: #404040;
	padding: 0.5em 1em 1.5em 0em;
	text-align:left;
	text-decoration:none;
	clear:both;
	margin-bottom:0.2em;
	height: 0.25em;   //Change height here from .4 to .25
}

I don't have the time to try and figure out exactly why it's happening but hopefully this fixes your problem for now.

[lemur]

Thanks, but still no good