Highlight button

[lemur]

Hi there,

I created highlight button, but color does not fill all button space. There is some gap on the left side button.
thanks for any hint.

html code:

<div id="primarynavigationbar">
 <ul>
 <li><a id="homebutton" href="index.html" accesskey="1">Home</a></li>
 <li><a id="bootsbutton" href="boots.html" accesskey="2">Boots</a> </li>
 <li><a id="clothingbutton" href="#">Clothing</a></li>
 <li><a id="accessoriesbutton" href="#">Accessories</a></li>
 <li><aid="aboutusbutton"accesskey="3"href="aboutus.html">
   AboutUs</a> </li>
</ul>
          </div><!--primarynavigationbar end -->

and css

#primarynavigationbar {
	background-color: #171717;
	border-top: 0.04em solid #dddddd;
	font-size: small;
	padding:0.8em;
	

}


#primarynavigationbar  ul li a {
	border-right: 0.04em solid #dddddd;
}

#primarynavigationbar li a {
	text-decoration:none;
	color:#dddddd;
	padding-left: 1.5em;
	padding-right: 1.5em;
	padding-top: 0.8em;
	padding-bottom:0.8em;
	
}

[Arkinder]

The browser adds its own margin and padding by default. To remove this use a universal rule to reset the margin and padding for every element.

* {
    margin: 0;
    padding: 0;
}

Your problem was a little vague, so if this didn't answer it then please be a little more specific.

Regards
Arkinder

[lemur]

thanks , but i always reset browser defaults.
just put highlight button so current page button will be in specific color. but color doesnt appear in whole button space. it s seems like there is a padding on left side. i try everything, really strange

[Arkinder]

There is not anything in the CSS that you have provided that 'highlights' anything. Please post a link to a test page or the complete markup and CSS.

Regards
Arkinder

[Arkinder]

The gap is from the padding left here:

#primarynavigationbar {
    background-color: #171717;
    border-top: 0.04em solid #DDDDDD;
    font-size: small;
    padding: 0.8em;
}

Try using padding: 0.8em 0; instead.

Regards
Arkinder

[lemur]

well, it s seems like its ok just only on home page. index.html

[Arkinder]

Sorry, I'm doing about 8 billion things and I wasn't actually thinking. The width of each list element is creating the gap. Setting a width would usually fix this problem except you are using display: inline; Create a new rule just for the list elements in the navigation bar, and float them left.

#primarynavigationbar ul li { float:left;}

Now this will remove the list elements from the normal flow of the page, which is going to create a slight height issue. To fix this simply give the navigation bar a set height.

#primarynavigationbar {
    background-color: #171717;
    border-top: 0.04em solid #DDDDDD;
    font-size: small;
    height: 1.4em;
    padding: 0.8em 0;
}

This, along with the padding: 0.8em 0; should fix the problem. Once again, sorry.

Regards
Arkinder

[lemur]

Thats great! Working ! Thanks.