Question

I’m trying to create css buttons by using the following html markup:

<a href="access.php" class="css_button_red">Forgot password</a>

But it ends up being not bigger than the text in the middle. Even though I’ve set the class’s height and width.

You can preview the problem here btw, http://www.matkalenderen.no
Notice the first button, that’s a form button and it’s using it’s own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn’t matter anyway.

What am I missing here?

Answer 1

As the others have said, by default <a> is an inline element, and inline elements can’t specify a width or height. You can change it to be a block element like this:

a {
    display: block;
}

Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.

See PPK’s writeup about it.

The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don’t allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.