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!

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;.

make block for anchor tag add display:block in style

.menu a
{
    display:block;
    height:25px;
    width:170px;
    background:url(./images/button-51.png);
    padding:2px 5px ;
}

NOTE: dont repet all elements in .menu a:link class.. just add changes or new styles. NOTE: always use lowercase in html and css code

add display block in a :

.menu A
    {
        display: block;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }

HTML+CSS: 'a' width doesn't work

Related

Recent Posts