centralising images in a table in a cell

[j111111]

I have a number of images that make rollover buttons for a menu page on my site.

The cell they go in is inside a table with border cells that can change size to fit whatever text/images goes in it.

The centre cell/table is an editable region while all the surrounding ones are not.

I've inserted s few of these rollover images straight into the centre cell but now I cannot centralise them.

I'm wanting two columns which I have got but they are aligned to the left of the box and all I can manage is to put one space between the 2 images per 'line'.

I want each column of rollovers to be equal distance from the left/right border of the cell (depending on if it is the left/right column).

Is there any way to do this?
(the cell has a fixed width as it is from a template and I have quite a few of these menu boxes on the site)

 

[Cheech]

Just select the relevant td and in properties align it centrally as if it was text

Cheech [Peace][Pipe]
The secret of life is honesty and fair dealing. If you can fake that, you've got it made.
Groucho Marx (1895-1977)

 

[j111111]

All of the rollovers are in one cell though & changing the alignment for each (on the property inspector which only gives left, right, top middle, bottom, or browser default - no centre) messes around with the two columns I have put them in

each image is the same size - 150 x 50 pixels. They all had the same space between them in the middle, but aligning them(left/right depending on which column they were in) has made some drop to a line on their own, some look smaller, some make a third column.

There's no specific td for each image that i could change the position of, and the actual editable part of the cell is from a template and is aligned to top so it won't/shouldn't change width (although changing the alignment of these images did change this - no idea why).

Have I done what you meant?

 

[Cheech]

Post the code for your table [Peace][Pipe]
The secret of life is honesty and fair dealing. If you can fake that, you've got it made.
Groucho Marx (1895-1977)

 

[j111111]

are you sure...?

here goes...

<td></td>
<td colspan=&quot;3&quot; valign=&quot;top&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot;
cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;20&quot; height=&quot;19&quot; background=&quot;images/v.gif&quot; ><img src=&quot;images/v.gif&quot; width=&quot;20&quot; height=&quot;19&quot;></td>
<td width=&quot;331&quot; background=&quot;images/x.gif&quot; ><img src=&quot;images/x.gif&quot; width=&quot;331&quot; height=&quot;21&quot;></td>
<td width=&quot;20&quot; background=&quot;images/t.gif&quot; ><img src=&quot;images/t.gif&quot; width=&quot;20&quot; height=&quot;19&quot;></td>
</tr>
<tr>
<td height=&quot;68&quot; background=&quot;images/w.gif&quot; ><!-- #BeginEditable &quot;txtbdr1&quot; --><!-- #EndEditable --></td>
<td valign=&quot;top&quot; bgcolor=&quot;#FFFFFF&quot; ><!-- #BeginEditable &quot;textbox&quot; --><font face=&quot;Verdana, Arial, Helvetica, sans-serif&quot; size=&quot;5&quot; color=&quot;#3399CC&quot;>Employee
Policies </font><br>
<br>
<a href=&quot;wknghrs.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('wkhr','','images/wrkhr1.gif',1)&quot;><img name=&quot;wkhr&quot; border=&quot;0&quot; src=&quot;images/wrkhr1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a>
<a href=&quot;music.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('music','','images/music1.gif',1)&quot;><img name=&quot;music&quot; border=&quot;0&quot; src=&quot;images/music1.gif&quot; class=&quot;shakeimage&quot; onMouseOver=&quot;init(this);rattleimage()&quot; onMouseOut=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a>
<a href=&quot;dresscode.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('drc','','images/drc1.gif',1)&quot;><img name=&quot;drc&quot; border=&quot;0&quot; src=&quot;images/drc1.gif&quot; class=&quot;shakeimage&quot; onMouseOver=&quot;init(this);rattleimage()&quot; onMouseOut=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;>
</a><a href=&quot;refresh.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('ref','','images/ref1.gif',1)&quot;><img name=&quot;ref&quot; border=&quot;0&quot; src=&quot;images/ref1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot;width=&quot;150&quot; height=&quot;50&quot;></a><br>
<a href=&quot;intemail.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('int','','images/int1.gif',1)&quot;><img name=&quot;int&quot; border=&quot;0&quot; src=&quot;images/int1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a>
<a href=&quot;carpark.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('cp','','images/carp1.gif',1)&quot;><img name=&quot;cp&quot; border=&quot;0&quot; src=&quot;images/carp1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a><a href=&quot;carpark.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('carp','','images/carp2.gif',1)&quot;><br>
</a><a href=&quot;perssoft.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('pers','','images/ps1.gif',1)&quot;><img name=&quot;pers&quot; border=&quot;0&quot; src=&quot;images/ps1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a>
<a href=&quot;money.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('paye','','images/paye1.gif',1)&quot;><img name=&quot;paye&quot; border=&quot;0&quot; src=&quot;images/paye1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a><br>
<a href=&quot;cleanoff.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('cln','','images/clnoff1.gif',1)&quot;><img name=&quot;cln&quot; border=&quot;0&quot; src=&quot;images/clnoff1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a>
<a href=&quot;hols.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('hols','','images/hols1.gif',1)&quot;><img name=&quot;hols&quot; border=&quot;0&quot; src=&quot;images/hols1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a><a href=&quot;hols.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('jollies','','images/hols2.gif',1)&quot;><br>
</a><a href=&quot;phonefax.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('ppp','','images/ppp1.gif',1)&quot;><img name=&quot;ppp&quot; border=&quot;0&quot; src=&quot;images/ppp1.gif&quot; class=&quot;shakeimage&quot; onMouseOver=&quot;init(this);rattleimage()&quot; onMouseOut=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a>
<a href=&quot;penins.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('penin','','images/penin1.gif',1)&quot;><img name=&quot;penin&quot; border=&quot;0&quot; src=&quot;images/penin1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a><br>
<!-- #EndEditable --></td>
<td background=&quot;images/y.gif&quot; ><!-- #BeginEditable &quot;txtbdr2&quot; --><!-- #EndEditable --> </td>
</tr>
<tr>
<td height=&quot;19&quot; valign=&quot;top&quot; background=&quot;images/s.gif&quot; > </td>
<td valign=&quot;top&quot; background=&quot;images/z.gif&quot; ><img src=&quot;images/z.gif&quot; width=&quot;331&quot; height=&quot;19&quot;></td>
<td valign=&quot;top&quot; background=&quot;images/u.gif&quot;> </td>
</tr>
</table>
<div style=&quot;background:#FFFFFF&quot;></div>
</td>



I tried stretching the images so they'd fill the box but then the text in them looks too stretched.

Hope this makes sense...

Josie

 

[Cheech]

hmm,

Without all of the images etc it is hard to see what the prob is. Do you have the page uploaded anywhere I can see it?

or try pasting this code in instaed of your table.

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot;
cellpadding=&quot;0&quot;>
  <tr> 
    <td width=&quot;20&quot; height=&quot;19&quot; background=&quot;images/v.gif&quot; ><img src=&quot;images/v.gif&quot; width=&quot;20&quot; height=&quot;19&quot;></td>
    <td width=&quot;331&quot; background=&quot;images/x.gif&quot; ><img src=&quot;images/x.gif&quot; width=&quot;331&quot; height=&quot;21&quot;></td>
    <td width=&quot;20&quot; background=&quot;images/t.gif&quot; ><img src=&quot;images/t.gif&quot; width=&quot;20&quot; height=&quot;19&quot;></td>
  </tr>
  <tr> 
    <td height=&quot;68&quot; background=&quot;images/w.gif&quot; ><!-- #BeginEditable &quot;txtbdr1&quot; --><!-- #EndEditable --></td>
    <td align=&quot;center&quot; valign=&quot;top&quot; bgcolor=&quot;#FFFFFF&quot; > <!-- #BeginEditable &quot;textbox&quot; --><font face=&quot;Verdana, Arial, Helvetica, sans-serif&quot; size=&quot;5&quot; color=&quot;#3399CC&quot;>Employee 
      Policies </font><br>
      <br>
      <a href=&quot;wknghrs.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('wkhr','','images/wrkhr1.gif',1)&quot;><img name=&quot;wkhr&quot; border=&quot;0&quot; src=&quot;images/wrkhr1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a> 
      <a href=&quot;music.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('music','','images/music1.gif',1)&quot;><img name=&quot;music&quot; border=&quot;0&quot; src=&quot;images/music1.gif&quot; class=&quot;shakeimage&quot; onMouseOver=&quot;init(this);rattleimage()&quot; onMouseOut=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a> 
      <a href=&quot;dresscode.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('drc','','images/drc1.gif',1)&quot;><img name=&quot;drc&quot; border=&quot;0&quot; src=&quot;images/drc1.gif&quot; class=&quot;shakeimage&quot; onMouseOver=&quot;init(this);rattleimage()&quot; onMouseOut=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;> 
      </a><a href=&quot;refresh.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('ref','','images/ref1.gif',1)&quot;><img name=&quot;ref&quot; border=&quot;0&quot; src=&quot;images/ref1.gif&quot;  class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot;width=&quot;150&quot; height=&quot;50&quot;></a><br>
      <a href=&quot;intemail.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('int','','images/int1.gif',1)&quot;><img name=&quot;int&quot; border=&quot;0&quot; src=&quot;images/int1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a> 
      <a href=&quot;carpark.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('cp','','images/carp1.gif',1)&quot;><img name=&quot;cp&quot; border=&quot;0&quot; src=&quot;images/carp1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot;  width=&quot;150&quot; height=&quot;50&quot;></a><a href=&quot;carpark.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('carp','','images/carp2.gif',1)&quot;><br>
      </a><a href=&quot;perssoft.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('pers','','images/ps1.gif',1)&quot;><img name=&quot;pers&quot; border=&quot;0&quot; src=&quot;images/ps1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot;  width=&quot;150&quot; height=&quot;50&quot;></a> 
      <a href=&quot;money.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('paye','','images/paye1.gif',1)&quot;><img name=&quot;paye&quot; border=&quot;0&quot; src=&quot;images/paye1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a><br>
      <a href=&quot;cleanoff.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('cln','','images/clnoff1.gif',1)&quot;><img name=&quot;cln&quot; border=&quot;0&quot; src=&quot;images/clnoff1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot;  width=&quot;150&quot; height=&quot;50&quot;></a> 
      <a href=&quot;hols.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('hols','','images/hols1.gif',1)&quot;><img name=&quot;hols&quot; border=&quot;0&quot; src=&quot;images/hols1.gif&quot;class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot;  width=&quot;150&quot; height=&quot;50&quot;></a><a href=&quot;hols.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('jollies','','images/hols2.gif',1)&quot;><br>
      </a><a href=&quot;phonefax.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('ppp','','images/ppp1.gif',1)&quot;><img name=&quot;ppp&quot; border=&quot;0&quot; src=&quot;images/ppp1.gif&quot; class=&quot;shakeimage&quot; onMouseOver=&quot;init(this);rattleimage()&quot; onMouseOut=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a> 
      <a href=&quot;penins.htm&quot; onMouseOut=&quot;MM_swapImgRestore()&quot; onMouseOver=&quot;MM_swapImage('penin','','images/penin1.gif',1)&quot;><img name=&quot;penin&quot; border=&quot;0&quot; src=&quot;images/penin1.gif&quot; class=&quot;shakeimage&quot; onMouseover=&quot;init(this);rattleimage()&quot; onMouseout=&quot;stoprattle(this);top.focus()&quot; onClick=&quot;top.focus()&quot; width=&quot;150&quot; height=&quot;50&quot;></a><br>
      <!-- #EndEditable --></td>
    <td background=&quot;images/y.gif&quot; ><!-- #BeginEditable &quot;txtbdr2&quot; --><!-- #EndEditable --> 
    </td>
  </tr>
  <tr> 
    <td height=&quot;19&quot; valign=&quot;top&quot; background=&quot;images/s.gif&quot; > </td>
    <td valign=&quot;top&quot; background=&quot;images/z.gif&quot;  ><img src=&quot;images/z.gif&quot; width=&quot;331&quot; height=&quot;19&quot;></td>
    <td valign=&quot;top&quot; background=&quot;images/u.gif&quot;> </td>
  </tr>
</table>

Cheech [Peace][Pipe]
The secret of life is honesty and fair dealing. If you can fake that, you've got it made.
Groucho Marx (1895-1977)

 

[j111111]

Thanks for the help, but they've not changed.

I've tried replacing the code with yours, moving them around, deleting them & trying again....

The only other thing I can think of is to re-make the images in fireworks documents the exact size of half this cell width.

Think I need to borrow that pipe off your smiley face guy...

 

[Cheech]

Is the page on the web where we can see it? [Peace][Pipe]
The secret of life is honesty and fair dealing. If you can fake that, you've got it made.
Groucho Marx (1895-1977)

 

[j111111]

no it's for a company intranet jobbie.

It's the first thing like this I've ever done - just me with a load of big books to guide me! so I don't know if I'm doing stuff in the right/logical order.

Maybe I should have thought about the size/centralising thing more before I just made the buttons....

 

[Cheech]

;-) [Peace][Pipe]
The secret of life is honesty and fair dealing. If you can fake that, you've got it made.
Groucho Marx (1895-1977)