wrote:
> Hi,
>
> I'm trying to create an anchor tag (link) with a height of 100px and a
> width of 100px.
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.
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>
--
ironcorona
Similar Threads
