Menu jump problem

[klaasp]

When i press a menu item, the active text link is jumping to the right. I can't find the problem. Do somebody know how i can fix this?

http://cmsmadesimple1.vigourmedia.nl/

[Dr.CSS]

Some how your menu template is making the current page just plain text instead of a link or anything else...

And your CSS has padding/margin set for menu ul li a and menu a but nothing for ul li, change your menu template or change the CSS...

from source...



Over Engelen

[klaasp]

When i try this, it don't work:

ul li {padding-right: 5px;

margin: 0;}

This is my complete css. Can comeone help me with this problem?

Code: Select all

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
	    margin:0; 
	    padding:0; 
} 

	table { 
	    border-collapse:collapse; 
	    border-spacing:0; 
	} 
	fieldset,img {  
	    border:0; 
	} 
	address,caption,cite,code,dfn,em,strong,th,var { 
	    font-style:normal; 
	    font-weight:normal; 
	} 
	ol,ul { 
	    list-style:none; 
	} 
	caption,th { 
	    text-align:left; 
	} 
	h1,h2,h3,h4,h5,h6 { 
	    font-size:100%; 
	    font-weight:normal; 
} 
q:before,q:after { 
    content:''; 
} 
abbr,acronym { border:0; 
} 

body 
{
	padding: 0;
	margin: 0;
	height:100%; 
	font-family: Verdana;
	font-size: 12px;
	
}

p { font-family: Verdana;
	font-size: 10px;}

a {color: #FFFFFF;}

h4 {

font-family: Verdana;
font-size: 14px;
}

div#pagewrapper { 
background: #3266cc; 
margin: 0px auto; 
width: 800px; 
text-align: left;
height:100%;  }

#headerleft
{
	
	float: left;
	width: 200px;
	text-align: center;
	height: 150px; 
	background: #3266cc url(images/engelen/logo.gif) no-repeat center center;
	text-indent: -32697px; /* waarom 32697? omdat dit de max value voor opera is. */

}



#headercenter
{
	
	float: left;
	width: 400px;
	text-align: center;
	height: 150px; 	
	background-image: url(images/engelen/top.jpg) ;
}

#headerright
{
	
	float: left;
	width: 200px;
	text-align: center;
	height: 150px; 
	background: #3266cc url(images/engelen/logo2.gif) no-repeat center center;
	text-indent: -32697px; /* waarom 32697? omdat dit de max value voor opera is. */
}

#left 
{
	float: left;
	width: 200px;	
	background: #669acc;
	height:415px;
	padding-top: 15px;
	
}

#right 
{
	float: right;
	width: 190px;
	background: #ccccff;
	height:420px;
	padding-top: 10px;
	padding-left: 10px;
		

}



#content
{
	float: left;
	width: 370px;
	margin: 0 0 0 0px;
	height: 400px; 
	background-color: #FFFFFF;	
	padding: 15px;
}		

img {

border: 0;}


a:link { 
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 12px;
	
	}


#menu ul li a

	{padding: 5px;

	margin: 0;}
#menu ul, 

#menu ul li
	{list-style-type: none;
	display: inline;
	padding:  0;
	margin: 5px 0;}

#menu {float: right; display: block; 
	padding-right: 0px; 
	margin: 0;
	text-align:right;}
	
	#menu a {display: block; 
	padding: 5px;
	margin: 1px;
	line-height: 1em;
	text-decoration: none;
	}

#menu a:hover{
	padding: 5px;
	color: black;}
	
#menu a:active{
	padding: 5px;
	color: black;}



table { 
	    border-collapse:collapse; 
	    border-spacing:0; 
}

<style type="text/css">
<!--
div#contactform {
	font-family: Verdana;
	font-size: 12px;
}
div#contactform legend {
	display: none;
}
div#contactform label {
	margin-bottom: 10px;
}
div#contactform fieldset{
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
-->
</style>

[Nullig]

Try changing these:

Code: Select all

#menu ul li a {
        padding: 5px 0;
	margin: 0;
}


#menu {
        float: right; display: block; 
	padding-right: 5px; 
	margin: 0;
	text-align:right;
}
	
#menu a {
        display: block; 
	line-height: 1em;
	text-decoration: none;
}

#menu a:hover {
	color: black;
}

Nullig