vertical-align

Discussion in 'Web Design and Development' started by dpaanlka, Mar 4, 2008.

  1. dpaanlka macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
    #1
    I have two "help" images inside table cells along with text. I have style="vertical-align: text-bottom; float: right;" inside each of the <img> tags, but they aren't doing the text-bottom part, as you can see here (pink lines added for clarity):

    darnit.gif

    Any ideas? :confused:
     
  2. alfaphlex macrumors newbie

    Joined:
    Feb 18, 2008
    #2
    Your problem might be that the vertical-align attribute is meant to be used in table cells only. If applied to other elements, most browsers will display it the same as block:inline.

    Here is an explanation and some work arounds for you:
    http://www.ibloomstudios.com/articles/vertical-align_misuse/

    edit: oops, wrong link. fixed
     
  3. dpaanlka thread starter macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
    #3
    I've tried it every which way and it still doesn't work. I've moved the vertical-align style to the table cell, and text-bottom still doesn't work.
     
  4. alfaphlex macrumors newbie

    Joined:
    Feb 18, 2008
    #4
    Well, I couldn't find an answer to your problem using the vertical-align attribute, but I did come up with my own solution to your problem which should give you the same results:

    set the img's padding-top to size of text
    set the img's margin-top to the negative of its height

    so if the height of your image is 20px, and your font is 1em it'd be:

    <img style="margin-top:-20px; padding-top:1em; float:right" src="...">

    this is assuming that your text was floated left. hope this helps
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Make sure the table cell containing the img has the vertical-align set to bottom and have the img's display set to block (it's inline by default). I think that'll get it to work right.

    This problem has come up a couple times in this forum so may search for them too. They dealt with images and vertical alignment.
     
  6. dpaanlka thread starter macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
  7. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
  8. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #8
    why not put a margin top on selector img?

    Code:
    
    #whatever img {
    float: right;
    margin-top: 3px;
    }
    
     
  9. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #9
    dpaanlka,

    can you post a link to this online somewhere. Much easier to test/search/find a solution when the actually markup can be viewed in a page.

    M
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    One solution I tried out and seems to work is to place a span tag around the img and float the span instead then the image will be vertically aligned in the middle. Then you can place vertical-align:baseline on the img to put it at the text base.

    HTML:
    <tr>
      <td><span style="float:right;">
      <img src="image.jpg" height="10px" width="30px" style="vertical-align:baseline;" />
      </span>
      Some text</td>
    </tr>
     
  11. dpaanlka thread starter macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
    #11
    It's actually part of a site that only registered members can see.
     
  12. HaGG macrumors member

    Joined:
    Jun 2, 2007
    #12
    Can you post the code? Did you do a line-height? If it's a table can't you split it and do <td valign="baseline"> ?
     
  13. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #13
    then can you copy the part of the page thats working incorrectly and put that in a page all by itself and post that..

    troubleshooting code without actually seeing the code is a bit of a guessing game.
     
  14. dpaanlka thread starter macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
    #14
    Here is the code for the "Upload" row - the Poll row is pretty much the same.

    Code:
    <tr>
    	<td class="colheader2">
    		<a href="http://forums.info-mac.org/help_system/attachments.html" class="lbOn"><img style="float: right;" src="http://forums.info-mac.org/help_system/help_button.gif"></a><b>Upload  File:</b>
    	</td>
    </tr>
    And the associated CSS for "colheader2" is this:

    Code:
    td.colheader2{
    	font-weight: bold;
    	padding-top: 16px;
    	padding-bottom: 4px;
    }
    That is how it is currently without any reference to vertical-align, as none that I've tried so far seem to have worked.
     
  15. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #15

    It would appear that you are only including a portion of the CSS associated with this page.. as when i copy/paste your included code into a document i get this.. { see attached image } which doesnt quiet look like the problem you were showing.
     

    Attached Files:

  16. dpaanlka thread starter macrumors 601

    dpaanlka

    Joined:
    Nov 16, 2004
    Location:
    Illinois
    #16
    The CSS document is quite long. The only thing I included were what I thought were pertinent to this problem.

    The table is set to a width of 700 pixels, and some fonts and stuff are different.
     
  17. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #17
    Yea the thing with CSS and styles is that they inherit attributes and settings from their parent's.. so its quite possible that even if someone codes up a solutions for you.. without being abl to tsee the bigger pictures, its very possible that it wont work right.. so the more information you can provide the better..
     
  18. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #18
    Ok. I am providing a solution based off of what limited code i you shared. Hopefully this will work out for you.

    attached are a zip of the HTML and a jpg of what it looks like.

    for others interested code looks like this.

    Code:
    <style>
    table,
    tr{
    	border:1px dotted black;}
    td.colheader2{
    	font-weight: bold;
    	padding-top: 16px;
    	background-color:lightgreen;
    }
    
    div.column-ab-a{
    	background-color:red;
    	float:right;
    	padding-top:20px;/*adjust this number to match you baseline as needed*/
    	}
    div.column-ab-b{
    	background-color:lightyellow;
    	float:left;
    	padding-top:20px;/*adjust this number to match you baseline as needed*/
    	}
    
    </style>
    </head>
    
    <body><table width="700">
    <tr>
    	<td class="colheader2">
        	<div class="column-ab-a">
    			<a href="http://forums.info-mac.org/help_system/attachments.html" class="lbOn"><img  src="http://forums.info-mac.org/help_system/help_button.gif"></a>
            </div>
            <div class="column-ab-b"><b>Upload  File:</b></div>
    	</td>
    </tr>
    </table>
    </body>
    </html>
    
     

    Attached Files:

  19. EvilDog macrumors newbie

    Joined:
    Mar 11, 2008
    #19
    Try this instead -
    Code:
    <tr>
    	<td class="colheader2"><a ref="http://forums.info-mac.org/help_system/attachments.html" class="lbOn"><img style="float: right;" src="http://forums.info-mac.org/help_system/help_button.gif"></a><b>Upload  File:</b></td>
    </tr>
    The results may surprise you!
     

Share This Page