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

Input type="image" positioning not in horizontal alignment with drop down

Hi,

I am having problems with spacing on the table below.  Although valigned to the bottom of the table cell, in IE the addtobag image (89x76) has 2 or 3 pixels space below it compared to the "select a size" drop down to the left of it.  Firefox seems to display ok.  I have tried using border="0" on both the image and the drop down, it seems to make no different.  Ideas anyone??

<table width="200" border="0" cellspacing="0" cellpadding="0">
                           <tr>
                            <td><img src="images/spacer.gif" width="111" height="1"></td>
                            <td valign="bottom"><img src="images/spacer.gif" width="89" height="1"></td>
                          </tr>
                        <tr>
                            <td valign="bottom">


                                    
                                    <table width="111" border="0" cellspacing="0" cellpadding="0">
                                          <tr>
                                            <FORM  name="PageF" ACTION="index.asp" METHOD="post"><td>
                                                      
                                                      <select name="pid" onchange="renavigate(1);" style="background-color:#F2CF02;color:#000000;font-size:12px;font-family:Arial;width:100px;">
                                                      <option value="-1">Select a colour</option>
                                                      
                                                      <option value='597309'  Selected>Pink</option>
                                                      
                                                      <option value='597317' >Sky Blue</option>
                                                      
                                                      <option value="-1">----------------------</option>
                                                      </select>
                                                      <input name="level1" type="hidden" value="">
                                                      <input name="level2" type="hidden" value="">
                                                      <input name="level3" type="hidden" value="">
                                                      <input name="pg" type="hidden" value="3">
                                                </td></form>
                                          </tr>
                                  </table>
                                    

                                    
                                          <table width="111" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                      <form  name='prods' method="POST" action="basket.asp"><td>
                                                      <input name="pcolour" type="hidden" value="Pink">
                                                      <input name="level1" type="hidden" value="">
                                                      <input name="level2" type="hidden" value="">
                                                      <input name="level3" type="hidden" value="">
                                                      <input name="pg" type="hidden" value="3">
                                                      <input name="pid" type="hidden" value="597307">
                                                      <input name="pname" type="hidden" value="Dog Tee">
                                                      <input name="pimage" type="hidden" value="Dog Tee PINK 12M P6226.jpg">
                                                      <input name="pprice" type="hidden" value="24">
                                                      <input name="pcode" type="hidden" value="P6226">
                                                      <input name="pvat" type="hidden" value="0">


                                                      <select name="psize" style="background-color:#F2CF02;color:#000000;font-size:12px;font-family:Arial;width:100px;">
                                                      <option value="-1">Select a size</option>
      
                                                      <option value='6M'>6M</option>
            
                                                      <option value='12M'>12M</option>
            
                                                      <option value='18M'>18M</option>
            
                                                      <option value="-1">----------------------</option>
                                                      </select>
                                                      </td>
                                                </tr>
                                         </table>

                              </td>
                            <td width="95" valign="bottom">
                                    <input type="image" value="Add to basket" src="images/addtobag.gif" style="border=0" alt="Add to basket" width="89" height="76">

                              </td>                  </form>
                        </tr>
                  </table>
0
Treder
Asked:
Treder
  • 3
1 Solution
 
gamebitsCommented:
Remove the blank space before and after your image tag in the cell

before

<td width="95" valign="bottom">
                              <input type="image" value="Add to basket" src="images/addtobag.gif" style="border=0" alt="Add to basket" width="89" height="76">

                         </td>

after

<td width="95" valign="bottom"><input type="image" value="Add to basket" src="images/addtobag.gif" style="border=0" alt="Add to basket" width="89" height="76"></td>

Gamebits
0
 
TrederAuthor Commented:
Many thanks gamebits, why is this?
0
 
gamebitsCommented:
IE will "display" a blank space in a cell IF there is something else in the cell.

so <td><img tag> </td> will have that blank space displayed with the image

<td> </td> will not display at all, if you want to display a blank space in a table with IE you have to use the &nbsp;

FF has the opposite behavior.

I don't know why, it's just the way it is.

Gamebits
0
 
gamebitsCommented:
Thanks for the points and the grade.

Gamebits
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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