How to set a:link height/width with css?

I just can't set the height and width of a elements of my navigation.

#header div#snav div a{
	width:150px;
	height:77px;
}

#header div#snav div a:link{
	width:150px;
	height:77px;
}


#header div#snav div a:hover{
	height:77px;
	background:#eff1de;
}

Any ideas what I am doing wrong?

add display: block;

a-tag is an inline element so your height and width are ignored.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

Anchors will need to be a different display type than their default to take a height. display:inline-block; or display:block;.

Also check on line-height which might be interesting with this.

Your problem is probably that a elements are display: inline by nature. You can't set the width and height of inline elements.

You would have to set display: block on the a, but that will bring other problems because the links start behaving like block elements. The most common cure to that is giving them float: left so they line up side by side anyway.

From the definition of height:

> Applies to: all elements but non-replaced inline elements, table columns, and column groups

An a element is, by default an inline element (and it is non-replaced).

You need to change the display (directly with the display property or indirectly, e.g. with float).

Thanks to RandomUs 1r for this observation:

> changing it to display:inline-block; solves that issue. – RandomUs1r May 14 '13 at 21:59

I tried it myself for a top navigation menu bar, as follows:

First style the "li" element as follows:
> display: inline-block;
> width: 7em;
> text-align: center;

Then style the "a"> element as follows:
> width: 100%;

Now the navigation links are all equal width with text centered in each link.