SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bottom align a block link

    I have a link that I am adding a background image to (as a faux icon). The icon will be bigger than the text, so I would like to bottom align the text so that it is always sitting on the baseline.

    Here is my xHTML:
    Code:
    <div id="payment">
    	<a href="/payment.html">Pay Us!</a>
    </div>
    For Firefox, I did an ugly had that I'm not proud of:
    Code:
    div#payment a {
    	height: 26px;
    	background: transparent url("/images/payment-icon.gif") no-repeat left bottom;
    	color: #FFF;
    	display: table-cell;
    	vertical-align: bottom;
    	padding-left: 50px; //width of the icon
    }
    IE doesn't seems to ignore all of aligning that completely. Is there a good way to do this? I've tried the position: relative/absolute combo, but I couldn't get it to work.
    MySQL v5.1.58
    PHP v5.3.6

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If thats all the html code you have, you can set the position of the div as relative and a as absolute {bottom: 0; left: 50px;}. And give the desired background to the div.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE doesn't understand display:table cell and vertical-align only applies to table cells or inline elements within that single line.

    The method that semantic7 proposed above should work fine if you implement it correctly.

    Just for interest sake only there is a more complicated way of doing this as follows:

    http://www.pmob.co.uk/temp/vertical-align9.htm

    But I would stick with the other method of setting position:relative on #payment and then placing the anchor absolutely on the bottom as already stated by semantic7 above.

  4. #4
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had tried the position: relative > position: absolute method previously (it's something that has worked for me in the past), but in this case when I try it, the text aligns to the top.

    Here's the CSS for the parent div too:
    Code:
    	div#payment {
    		position: relative;
    		float: left;
    		width: 50&#37;;
    		text-align: left;
    	}
    		div#payment a {
    			height: 26px;
    			background: transparent url("/images/layout/payment-icon.gif") no-repeat left bottom;
    			color: #FFF;
    			text-decoration: none;
    			display: table-cell;
    			vertical-align: bottom;
    			padding-left: 50px; //width of payment-icon.gif
    		}
    (I combined the conditional rules that I had set up for IE so that it was less confusion on my part).

    If I add position: absolute to div#payment a {}, then the text becomes top aligned in FF (otherwise this works in FF as is).
    MySQL v5.1.58
    PHP v5.3.6

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How high is the payment div?

    If it has no height then absolutely positioning the anchor won't work because the height will be zero and therefore it will align with the top. You need to have a height (or content) so that there is somewhere to put the anchor.

    If the height is just 26px then you will just have to tweak it for ie with some padding and nudge it into position.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    div#payment {
            position: relative;
            width: 50&#37;;
            text-align: left;
            background:red;
         height: 26px;
            }
    div#payment a {
                height: 26px;
                background: transparent url("/images/layout/payment-icon.gif") no-repeat left bottom;
                color: #000;
                text-decoration: none;
                display: table-cell;
                vertical-align: bottom;
                padding-left: 50px; 
             background:blue
            }
    </style>
    <!--[if IE ]>
    <style type="text/css">
    div#payment a {padding-top:11px;position:relative;top:7px;line-height:26px;}
    </style>
    <![endif]-->
    
    </head>
    
    <body>
    <div id="payment"><a href="/payment.html">Pay Us!</a></div>
    </body>
    </html>

  6. #6
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, I forgot about that. div#payment actually only consists of 2 floats, so IE is of course not seeing any height. I'll add a clear hack in there and see if it turns around for me.
    MySQL v5.1.58
    PHP v5.3.6


Bookmarks

Posting Permissions

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