vertical-align

dpaanlka · Mar 4, 2008

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):

Any ideas?

alfaphlex · Mar 4, 2008

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

dpaanlka · Mar 5, 2008

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.

alfaphlex · Mar 5, 2008

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

angelwatt · Mar 5, 2008

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.

dpaanlka · Mar 5, 2008

Still didn't work.

ChicoWeb · Mar 5, 2008

code please.

ChicoWeb · Mar 5, 2008

why not put a margin top on selector img?

Code:

#whatever img {
float: right;
margin-top: 3px;
}

digitalField · Mar 5, 2008

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

angelwatt · Mar 5, 2008

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>

dpaanlka · Mar 5, 2008

digitalField said:
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

It's actually part of a site that only registered members can see.

HaGG · Mar 5, 2008

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"> ?

digitalField · Mar 6, 2008

dpaanlka said:
It's actually part of a site that only registered members can see.

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.

dpaanlka · Mar 6, 2008

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.

digitalField · Mar 6, 2008

dpaanlka said:
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.

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.

dpaanlka · Mar 6, 2008

digitalField said:
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.

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.

digitalField · Mar 6, 2008

dpaanlka said:
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.

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

digitalField · Mar 6, 2008

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>

EvilDog · Mar 14, 2008

dpaanlka said:
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>

That is how it is currently without any reference to vertical-align, as none that I've tried so far seem to have worked.

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!

vertical-align

macrumors 601

macrumors newbie

macrumors 601

macrumors newbie

Moderator emeritus

macrumors 601

macrumors 65816

macrumors 65816

macrumors regular

Moderator emeritus

macrumors 601

macrumors member

macrumors regular

macrumors 601

macrumors regular

Attachments

macrumors 601

macrumors regular

macrumors regular

Attachments

macrumors newbie

Our Staff