HTML+CSS: 'a' width doesn't work
I have the following code:
CSS part:
<style type="text/css">
.menu
{
width:200px;
}
.menu ul
{
list-style-image:none;
list-style-type:none;
}
.menu li
{
margin:2px;
}
.menu A
{
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
.menu A:link
{
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
</style>
HTML part:
Everything work fine, but when I add 'DOCTYPE' element in the beginning of the HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
the width of 'a' element is not taken into account.
Question 1: Why?
Question 2: How to fix that?
Thanks a lot!
Answer
Question 1: Why?
Because it's by default not a block element.
Question 2: How to fix that?
Make it a block element using display: block;, or an inline block by display: inline-block;.