Float image alignment within a TD

I want to have text aligned in the left of a table cell, with a small hyperlinked image aligned at the right of the same cell.

The text is always aligned correctly, but the image is not:
 - IE6: Image is horizontally aligned correctly, but I want it to be vertically middle aligned.
 - Firefox: Image is not horizontally aligned properly, nor is it vertically middle aligned.
 - Firefox: The image has a border, though I've specified "Border: None;" in the aimg class.

(rest of stylesheet at: http://swg.dailybuzz.net/css/swgmeds.css )

.aimg {
      float: right;
      border: none;
}
<table id="ASDS">
      <tr>
            <th width=100>Planet Name</th>
            <th width=275>Resource Type</th>            
            <th width=175>Name</th>
            <th><abbr title="Overall Quality">OQ</abbr>&nbsp;</th>
            <th><abbr title="Potential Energy">PE</abbr>&nbsp;</th>
            <th><abbr title="Unit Toughness">UT</abbr>&nbsp;</th>
            <th><abbr title="Decay Resistance">DR</abbr>&nbsp;</th>
            <th>Rating</th>
            <th nowrap>Days Old</th>
      </tr>
      <tr>
            <td>Lok</td>
            <td>Dolovite Iron</td>
            <td><a href='./alerts.php?res=Omnigoipeladism'><img src='./images/pa.gif' title='Add Alert' class='aimg'></a>Omnigoipeladism</td>
            <td>719</td>
            <td class="hide" align="right">0</td>
            <td class="hide" align="right">774</td>
            <td class="hide" align="right">752</td>
            <td title="1*OQ" class="red">719</td>
            <td >6</td>
      </tr>
</table>
LVL 5
crimson117Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
Try to assign the class to the <a> instead of to the <img>: eg:

<a class="aimg"><img /></a> instead of <a><img class="aimg" /></a>.

Regards

-r-
0
VirusMinusCommented:
you could use <img src=".." border="0" /> to get rid of the border

alternately you could try it without CSS like this <img src=".." border="0" align="right" /> you might have to put it after a few links so it lands vertically centered. But if your content in the cell is going to change its not a good idea.
0
crimson117Author Commented:
This seems to work properly now in Firefox and IE:

.aimg
{
  float: right;
  border: none;
}

<td><a href='./alerts.php?res=Blah'><img src='./images/pa.gif' title='Add Alert' class='aimg'></a>Blah</td>

Except it still isn't vertically middle aligned.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

VirusMinusCommented:
You could put some padding-top and bring it down;

.aimg
{
  float: right;
  border: none;
  padding-top: 20px;
}
0
VirusMinusCommented:
Is there a page we can see? You've only given the link to the CSS
0
crimson117Author Commented:
0
VirusMinusCommented:
which image is it?
0
crimson117Author Commented:
The little [+] images in the middle of the Name column of some rows.
0
VirusMinusCommented:
I can see only two plus images -> one is pa.gif, the other is plus.gif.

The plus.gif image is vertically aligned in the long blue cell (with section name) in IE.
In Firefox the plus.gif image is not vertically aligned. Its closer to the top edge. Is this the one you want to fix?

If not can you give us a link which has the exact problem and tell us where to look?
0
VirusMinusCommented:
I noticed it says ' + symbol for logged in users only ' will the problem appear only if you log in?
0
crimson117Author Commented:
Yes VirusMinus, sorry my bad...

Use login/pass: ee_test@swg.dailybuzz.net / ee_test  

And you'll see pa.gif on several of the rows.  For example, search for "Itav" and there will be a pa.gif in its cell.
0
VirusMinusCommented:
ok try this ->


.aimg {
      float: right;
      border: none;
        padding-top: 3px;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
crimson117Author Commented:
That would make it appear vertically centered, but it'd be off if the row height changed.  Any way to actually center it?
0
VirusMinusCommented:
Ok, if you're row is going to be changing in height, or u expect users to inmcrease font sizes etc. you may have to do it with a bit of javascript.

<div id="row"><span id="inside">text and plus image <img src="plus.gif" /></span></div>  

Then in the head you use this to script it:

<script type="text/javascript">
function setValign()
{
   obj1=document.getElementById('row');
   obj1=docuemnt.getElementById('inside');
   divH=obj1.offsetHeight;
   spanH=obj2.offsetHeight;
   pad=parseInt((divH-spanH)/2);
   obj1.style.paddingTop=pad+'px';
}
onload=setValign;
onresize=setValign;
</script>

--- courtesy Cd& ---
0
crimson117Author Commented:
I think I'll just keep it how it is for now.  If I do change it, it'll probably be with the padding-top technique.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.