Anchor tag - vertical align text

Discussion in 'HTML' started by bmistiaen@yahoo.com, Apr 23, 2006.

  1. Guest

    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>
     
    , Apr 23, 2006
    #1
    1. Advertising

  2. wrote:
    > 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?

    <snip>

    add 'display: block;'


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 23, 2006
    #2
    1. Advertising

  3. ironcorona Guest

    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
     
    ironcorona, Apr 23, 2006
    #3
  4. ironcorona wrote:
    > 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
     
    Jonathan N. Little, Apr 23, 2006
    #4
  5. ironcorona Guest

    Jonathan N. Little wrote:

    > That is not true. No you cannot apply height, width, borders, etc to
    > inline element


    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.

    --
    ironcorona
     
    ironcorona, Apr 23, 2006
    #5
  6. ironcorona Guest

    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>

    --
    ironcorona
     
    ironcorona, Apr 23, 2006
    #6
  7. On Sun, 23 Apr 2006, Jonathan N. Little wrote:

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


    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.


    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.


    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
     
    Alan J. Flavell, Apr 23, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,190
  2. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,278
    David Dorward
    Jun 23, 2005
  3. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    [CSS] Div-Tag and Vertical Align

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 19, 2006, in forum: HTML
    Replies:
    6
    Views:
    22,557
    dorayme
    Aug 22, 2006
  4. Yohan N. Leder
    Replies:
    1
    Views:
    2,202
    Jukka K. Korpela
    Jun 11, 2007
  5. Replies:
    7
    Views:
    1,373
    dorayme
    Nov 14, 2007
Loading...

Share This Page