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

html css doctype

53,413

Solution 1

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

Solution 2

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

Solution 3

add display block in a :

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

Solution 4

This worked for me, but since I wanted all of my links to be on the same line I used display: inline-block;

Solution 5

CSS is all about point. Attribute take their place depending on this. Have a look at Google University's take on the matter. This will help a lot in understanding the basics and a bit beyond.

View more solutions

53,413

Budda

I am a software developer, here is my hobby: Virtual Football Manager Elita

Updated on December 11, 2020

Comments

Budda over 3 years

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!

imjp over 12 years

wow man, you just saved me a ton of headache! I couldn't figure out WHY my anchor tags' width couldn't be adjusted!
achecopar almost 3 years

link no longer maintained