• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 523
  • Last Modified:

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>
0
crimson117
Asked:
crimson117
  • 8
  • 6
1 Solution
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now