|
|
Posted by Jonathan N. Little on 04/23/06 19:59
ironcorona wrote:
> bmistiaen@yahoo.com 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.
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.
>> The problem is that i can't get the text in the anchor tag to vertical
>> align to the middle.
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.
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>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|