How to set a:link height/width with css?
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).