If you look at this prototype: http://www.noteme.com/ in the top right corner where there is a search box, I am having some problems trying to do that in CSS. My CSS version can be found at http://www.noteme.com/css.

The problem is that there is many objects there. And they have to be placed right. No matter what I do, I can't get it right.

  • There is first one image on the top (says: ::search:
  • There is one image on the left side of the text box (the one that is 45deg right)
  • Then there is the textbox.
  • Then there is just some color there
  • Then there is an other image (the red one that says go)
  • Then some more color
  • Then a thin image to the right
  • Rounded off with a picture under it (that says Advanced Search)



The original code (if it helps is):
Code:
<td align="right" class="header"><table width="193" border="0" cellpadding="0" cellspacing="0">
              <tr> 
                <td colspan="3"><img src="pics/search_top.gif" alt="" width="193" height="13" /></td>
              </tr>
              <tr> 
                <td width="49"><img src="pics/search_left.gif" alt="" width="49" height="27" /></td>
                <td width="140" align="center" valign="middle" class="searchcell"><div> 
                    <form name="form1" id="form1" method="post" action="">
                      <input name="textfield" type="text" class="searchbox" size="10" />
                      <input name="imageField" type="image" src="pics/search_go.gif" />
                    </form>
                  </div></td>
                <td width="4"><img src="pics/search_right.gif" alt="" width="4" height="27" /></td>
              </tr>
              <tr> 
                <td colspan="3" align="right"><a href="#"><img src="pics/search_bottom.gif" alt="Advanced Search - Link me to an Advanced Search!" width="193" height="15" border="0" /></a></td>
              </tr>
            </table></td>

ØØ