Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    vertical-align:bottom; inside anchor link

    I ran across a small problem today and I need yall's help. I am trying to vertically align some text in an anchor to the bottom. I've read around but nothing seems to work. For instance:

    This does NOT work:
    Code:
    <html>
     <head>
      <style type="text/css">
       body {margin:0;}
       div {
        height:100px;
        width:100px;
        border: 5px solid red;
       }
       a {
        height:50px;
        background-color:pink;
        border: 5px solid blue;
        vertical-align:bottom;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
      <div>
       <a href="#">Link1</a>
      </div>
     </body>
    </html>
    First, IE6 does display the height, while Firefox does not (doesn't it have to do with the anchor being an inline element?). Second, the text does not vertically align because the vertical-align variable applies to how the <a></a> set aligns in a parent (right?). So I wanted to make sure that was true:

    This does NOT work:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        height:50px;
        background-color:pink;
        border: 5px solid blue;
        vertical-align:bottom;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
      <div style="height:100px;border: 5px solid red;">
       <a href="#">Link1</a>
      </div>
     </body>
    </html>
    The <a></a> set does NOT vertically align inside the div (why is this?). But I'm not worried so much about vertically aligning the anchor as much as the text inside the anchor. So I tried to vertically align a div inside the anchor:

    This does NOT work:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        height:50px;
        background-color:pink;
        border: 5px solid blue;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#"><div style="vertical-align:middle;">Link1</div></a>
     </body>
    </html>
    The text does not align in IE6 and goes balls crazy in Firefox. I guess I knew this wasn't going to work. Okay, next I tried to fix the issue with the height in Firefox:

    This DOES fix height issue in Firefox:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        float:left;
        height:50px;
        background-color:pink;
        border: 5px solid blue;
        vertical-align:bottom;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#">Link1</a>
     </body>
    </html>
    But it still doens't vertically align the anchor text at the bottom of the anchor. Next step: workaround. I read that line-height will work instead of vertical-align. This is half true (literally):

    This DOES work for vertically CENTERED text:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        float:left;
        height:50px;
        line-height:50px;
        background-color:pink;
        border: 5px solid blue;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#">Link1</a>
     </body>
    </html>
    This works for vertically centering text, but IE6's border weirdness nudges it a bit lower than center. Let's see if it will vertically align to the bottom:

    This does NOT work in IE6:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        float:left;
        height:50px;
        line-height:80px;
        background-color:pink;
        border: 5px solid blue;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#">Link1</a>
     </body>
    </html>
    This workaround appears to work fine in Firefox (if you get the line-height length correct), but line-height appears to override height in IE (making the anchor height 80px). So another workaround I read about was using display:table-cell

    This does NOT work in IE6:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        height:50px;
        background-color:pink;
        border: 5px solid blue;
        display:table-cell;
        vertical-align:bottom;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#">Link1</a>
     </body>
    </html>
    This works beautifully, perfectly, wonderfully in Mozilla Firefox. But IE6 doesn't recognize the table cell parameter (right?), so it fails. Next I tried to relatively position the text inside the anchor with a span tag.

    This sorta works:
    Code:
    <html>
     <head>
      <style type="text/css">
       a {
        float:left;
        height:3em;
        background-color:pink;
        border: 5px solid blue;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#"><span style="position:relative;top:1.7em;">Link1</span></a>
     </body>
    </html>
    Everyone knows that IE6 has a mental lapse anytime borders appear, so the presence of borders in this code prevents it from working in Internet Explorer 6. If you were to remove the borders, this solution would work.


    I've tried everything I can think of. Anyone else have any more bright ideas? I need the anchor:hover css, so I can't move the text outside of the anchor. I can't absolutely position the text since the will be dynamically placed. I got a solution that works without borders, so hopefully it helps someone out there. Please reply with code. Thanks!

  • #2
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code works just like vertical-align: bottom;

    <html>
    <head>
    <style type="text/css">
    body {margin:0;}
    div {
    height:100px;
    width:100px;
    border: 5px solid red;
    position: relative;
    }
    a {
    background-color: pink;
    border: 5px solid blue;
    position: absolute;
    bottom: 0;
    }
    a:hover {
    background-color:red;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="#">Link1</a>
    </div>
    </body>
    </html>
    Forum for webmasters and developers
    http://www.htmlfrenzy.com
    Are you an IT expert? Join our Reward system
    www.htmlfrenzy.com/reward-system.php

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    To clear some things up:
    • Example 1: The height property does not apply to elements with display: inline (e.g., the anchor element) unless that element is a replaced element with replaced content (e.g., an embedded object such as an image or form control).
    • Example 2: Ditto.
    • Example 3: Ditto. It is also invalid under the HTML 4.01 and XHTML DTDs to contain a div element inside of an anchor element. The vertical-align property does not apply to elements with display: block either; see the line labeled “Applies to:” from the specification document.
    • Example 4: The vertical-align property only works as you describe when applied to elements with display: table-cell.
    • Example 5: No comment.
    • Example 6: The Internet Explorer 6 issue is probably the “Expanding Box Problem” described in this article; Internet Explorer 6 will incorrectly expand an element to enclose its (overflowing) content even in the presence of an explicit width, height, maximum width (not supported), or maximum height (not supported).
    • Example 7: Internet Explorer, up to the current version (7), does not support the display: table-cell declaration; see this table for compatibility information.
    • Example 8: No comment.

    Additionally, every one of your examples is missing a (required) document type declaration; “Quirks Mode”, as described here, could be the source of rendering problems. If you choose an XHTML document type declaration (I would recommend against it), then you’re also missing a namespace declaration.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Arbitrator View Post
    Additionally, every one of your examples is missing a (required) document type declaration; “Quirks Mode”, as described here, could be the source of rendering problems.
    Yes, IE standards mode would result in a very different rendering.

    In IE quirks mode, besides exhibiting the well-known Internet Explorer Box Model Bug, width and height is not ignored for non-replaced inline elements such as the anchor element from the examples above. When one or both of these properties are given explicit values, the element behaves somewhat like display: inline-block

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks to everyone for the info about IE's quirks mode. I don't think there is a really good solution for this problem. Even though the position:relative solution works (my last example) when you put in a valid doctype or remove the borders, a vertical alignment issue remains. This is just a workaround. I guess I'm just surprised that tables work better than CSS in this case. I thought the whole purpose of CSS was to prevent formatting in the body. Also, Firefox decides the underline for the link needs to not move with the text its supposed to underline (huh?).

    This workaround works in IE6, not FF:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title>Vert_Align</title>
      <style type="text/css">
       a {
        float:left;
        height:3em;
        background-color:pink;
        border: 5px solid blue;
       }
       a:hover {
        background-color:red;
       }
      </style>
     </head>
     <body>
       <a href="#"><span style="position:relative;top:1.7em;">Link1</span></a>
     </body>
    </html>
    IE6's border problem is fixed by adding the doctype (thanks again), but Firefox starts having problems with the underline.

    Any ideas why firefox isn't moving the underline?

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by diafygi View Post
    Any ideas why firefox isn't moving the underline?
    The underline belongs to the anchor element. So I don't know why IE is moving the underline as if it belonged to the span element. Had you applied the underline to the span element instead, then you would get what you want.

    I believe that the example smalldog posted is the traditional method for bottom aligning. Where does smalldog's example deviate from what you want?

  • #7
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The hover aspect of the anchor is what I'm going for. I would use div:hover, but IE6 only listens to a:hover. So I need to expand the anchor to achieve the larger area color change and clickability (I don't think that's a word :P ). I'm sure there are messy ways of creating hovering and clickability aspects to a div in IE6, but I find it much easier to just resize the anchor (although I might change my mind).

    Thanks for noting that the anchor is the tag with the underlinel. I didn't realize that before. What's weird is Firefox moves the underline just like IE6 when I don't have a doctype declaration (try it yourself).

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by diafygi View Post
    The hover aspect of the anchor is what I'm going for.
    Well, here is what I can come up with at the moment. Not so elegant, but it is at least working in Firefox 2, IE6/7. Perhaps it can give you some ideas.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>CF 113926</title>
    <style type="text/css">
    div {
    	height: 100px;
    	width: 100px;
    	border: 5px solid blue;
    	position: relative;
    }
    a {
    	display: block;
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	z-index: 2;
    }
    a:hover {
    	background-position: 0; /* kick IE */
    }
    span {
    	display: none;
    	width: 100px;
    	height: 100px;
    	background: yellow;
    	left: 0;
    	bottom: 0px;
    }
    a:hover span#ie6 {
    	display: block;
    	position: absolute;
    	z-index: -1;
    }
    a:hover + span#standard {
    	display: block;
    	position: absolute;
    	z-index: 1;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="#">Link<!--[if IE]><span id="ie6"></span><![endif]--></a>
    <!--[if !IE]><!--><span id="standard"></span><!--<![endif]-->
    </div>
    </body>
    </html>
    Quote Originally Posted by diafygi View Post
    Thanks for noting that the anchor is the tag with the underlinel. I didn't realize that before. What's weird is Firefox moves the underline just like IE6 when I don't have a doctype declaration (try it yourself).
    yeah, that's how Firefox behaves in quirks mode. Quite similar to IE's behaviour.

    Here, when a parent inline element with text-decoration has nested inline elements, then, instead of rendering the text-decoration on the parent, the children (and the anonymous inline boxes) inherit the text-decoration.

    For the underline (contrary to overline and line-through) the color is also wrong. It is erroneously taken from the child element.

    You can always take a look at what it says in CSS 2.1 Working Draft for the text-decoration property .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •