Anchor tag - vertical align text

B

bmistiaen

Hi,

I'm trying to create an anchor tag (link) with a height of 100px and a
width of 100px.
When the mouse is over it, i want the whole box (not just the link
text) to have a red background.

The problem is that i can't get the text in the anchor tag to vertical
align to the middle.
It is always on the top.

I know it could be done with the property line-height.
If you add "line-height: 100px;" to the a tag in the style
definitions, then the text is centered.
But what if you have 2 lines of text?
Then it doesn't work anymore.

Any ideas on how to do this?


Code:

<html>
<head>
<style>
a {
width: 100px;
height: 100px;
background-color: blue;
color: white;
border: 2px solid black;
text-align: center;
overflow: hidden;
}
a:link {
}
a:visited {
}
a:hover {
background-color: red;
}
a:active {
}
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" border="0" align="center"
height="95%">
<tr>
<td><a href="#">link01 this is a test link</a></td>
<td><a href="#">link02</a></td>
<td><a href="#">link03</a></td>
</tr>
</table>

</body>
</html>
 
J

Jonathan N. Little

Hi,

I'm trying to create an anchor tag (link) with a height of 100px and a
width of 100px.
When the mouse is over it, i want the whole box (not just the link
text) to have a red background.

The problem is that i can't get the text in the anchor tag to vertical
align to the middle.
It is always on the top.

I know it could be done with the property line-height.
If you add "line-height: 100px;" to the a tag in the style
definitions, then the text is centered.
But what if you have 2 lines of text?
Then it doesn't work anymore.

Any ideas on how to do this?
Click to expand...
<snip>

add 'display: block;'
 
I

ironcorona

Hi,

I'm trying to create an anchor tag (link) with a height of 100px and a
width of 100px.
Click to expand...

Height and width on an anchor tag only works in IE. You're not really
suppose to assign dimensions to the tag itself; it's not standards
compliant.
The problem is that i can't get the text in the anchor tag to vertical
align to the middle.
Click to expand...

What you CAN do is use the padding property to get around this. You'll
have to experiment because it changes depending on the height of your
font AND you WILL need to leave the height and width properties included
or else IE causes a fuss (this is ok because standards compliant
browsers will ignore the property). Note that the padding property
works differently with IE because of their sub-standard [and I might say
idiotic] version of the box model.

You also need to pad out the left and right parts of the links so that
FF doesn't scrunch it into a ball. Below I've included your code with
my modification. In IE because of the overflow property the bottom of
link 1 is cut off and in FF the blue link area is far too wide. I can't
help with that.

I would suggest using images for the links. Then you could be certain
of cross platform conformity; html wasn't designed to display links in
this way.

<html>
<head>
<style>
a {
width: 100px;
height: 100px;


padding: 30px 30px;


background-color: blue;
color: white;
border: 2px solid black;
text-align: center;
overflow: hidden;
}
a:link {
}
a:visited {
}
a:hover {
background-color: red;
}
a:active {
}
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" border="0" align="center"
height="95%">
<tr>
<td><a href="#">link01 this is a test link</a></td>
<td><a href="#">link02</a></td>
<td><a href="#">link03</a></td>
</tr>
</table>

</body>
</html>
 
J

Jonathan N. Little

ironcorona said:
Height and width on an anchor tag only works in IE. You're not really
suppose to assign dimensions to the tag itself; it's not standards
compliant.
Click to expand...

That is not true. No you cannot apply height, width, borders, etc to
inline element of which A element is, but nothing prevents your from
making an inline element display as block.

A { display: block; }

Now you may apply any block level property e.g., borders or margins, etc.
Now vertical alignment is tricky, playing with the padding top can work.
Note if you dimension everything in pixels your presentation is doomed
when the text is zoomed. If you use 'em' doe width, height and padding
your box will scale with the text and look better.

Of course
A {
display: table-cell;
width: 5em,
height: 5em,
vertical-align: middle;
border: 2px solid black;
}

would be easy but IE...
What you CAN do is use the padding property to get around this. You'll
have to experiment because it changes depending on the height of your
font AND you WILL need to leave the height and width properties included
or else IE causes a fuss (this is ok because standards compliant
browsers will ignore the property). Note that the padding property
works differently with IE because of their sub-standard [and I might say
idiotic] version of the box model.
Click to expand...

Also you can avoid a lot of IE silliness buy using a strict doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
....

<snip>
 
I

ironcorona

Jonathan said:
That is not true. No you cannot apply height, width, borders, etc to
inline element
Click to expand...

I didn't honestly know that it was because it was inline. I assumed it
was something to do with a quirk of the anchor tag. This is why I love
usenet. Living is learning.

So you're suggesting make it a block and then use padding, while
adjusting the height/width, to make it appear as necessary?

My idea did work. But yours works better.

I still say that images are the way forward.
 
I

ironcorona

Jonathan N. Little wrote:
And on that same point perhaps you can help me here. FF displays the
below code as two <p> next to each other horizontally and IE displays it
as if I hadn't used {display:table-cell;}.

Any idea why that is? I assumed that IE just didn't support
{display:table-cell;} but it seems from your example previous that, in
fact, it does.

<style type="text/css">
p {
width:100px;
height:100px;
border:1px solid black;
display:table-cell;
}
</style>

<p>
content
</p>
<p>
content
</p>
 
A

Alan J. Flavell

That is not true. No you cannot apply height, width, borders, etc to
inline element of which A element is, but nothing prevents your from
making an inline element display as block.

A { display: block; }

Now you may apply any block level property e.g., borders or margins,
etc.
Click to expand...

Indeed, and they're used that way in a menu not far from me.
However, that may well have other consequences which the questioner
had not intended. Certainly a possibility worth considering, case by
case.
Now vertical alignment is tricky, playing with the padding top can
work.
Click to expand...

Instead of specifying a box height and then trying to align text
within it, one might be advised to equip the text with equal top and
bottom padding, and allow the box to fit itself around that. Just a
different way of looking at the problem...
Also you can avoid a lot of IE silliness buy using a strict doctype.
Click to expand...

ITYM "by choosing a DOCTYPE which triggers standards-ish mode".

Not all variations of "strict" DOCTYPE will put IE into its
standards-ish mood; not all variations of "transitional" DOCTYPE will
put IE into quirks mode.

But yes, as a general principle I would also aim for strict HTML.
The time for the "transition" is past, IMNSHO.

According to http://hsivonen.iki.fi/doctype/ , it seems if you want
*Konqueror* to use standards-ish mode, you would need a strict
doctype. But not IE.

best
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
Show text on-click with transition 2
Help with Visual Lightbox: Scripts 2
How to have two html audio players on one page? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with code 0
How to wrap <td> content . 16

Members online

No members online now.
Total: 24 (members: 1, guests: 23)
Robots: 322

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,009
Latest member
GidgetGamb

Latest Threads

Top