SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy problem with text field and image on a same line

    Hi!

    I have a problem with puting input textbox and image on a same line. I have tryed several ways but haven't got any results.
    The idea is that there is an input text field and after that an image.
    they are in the table cell. Actually they should stay all the time in same line even if there is no space on screen and browser would like to put image under the text field.
    I tried to use floats then the text field and image is on the same line but normally the image is more up than text field.

    code sample is here:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head></head>
      <style type="text/css">
        .textbox, .image {
          height: 18px;
        }
        .textbox {
          padding: 0;
        }
    
      </style>
    <body>
    
      <table>
        <tr>
          <td>
    	<input type="text" name="nupp" value="123" class="textbox" />
    
    	<img src="btn.jpg" alt="" class="image" />
          </td>
        </tr>
      </table>
    
    </body>
    </html>

    I added the picture also for a case

    All help appreciated.
    Attached Images Attached Images

  2. #2
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't been able to see your image yet as it's pending approval, but will check again later. However, one thing I notice straight away is, you are using tables for the wrong purpose- you can achieve what you are aiming for without the use of tables, but with pure CSS.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for replay.
    I have table. Similar as seen on attachment.
    There is a text field in a column. After that text field should be the image. Also it is necessary that the cell borders are visible. My problem comes up here: the image and the text field who are in same cell they are vertically on different height, but they should be on same. Also they should stay same position after situation when table is bigger than resolution and the table is pushed more together. (something like no break in cell) Table doesn't have any width.

    I hope its better description now..
    Attached Images Attached Images

  4. #4
    SitePoint Enthusiast Bullfrog245's Avatar
    Join Date
    May 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding the "float" attribute to your image class.

    float: right or float: left depending on the side you want the image.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bullfrog245 View Post
    Try adding the "float" attribute to your image class.
    Thats helping only in case where the table is smaller than browser view.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your stylesheet is also between the HEAD and BODY sections. Put it back in the HEAD after the TITLE.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •