Vertical Align XHTML / CSS Problem

Discussion in 'HTML & Website Design' started by Quozt, Aug 26, 2006.

0
  1. #1
    hey guys having a little trouble getting vertical align on form elements on a template im working on

    www.youdeal.co.uk/temp

    those looking in IE will see that everythings hunky dory however with FF the submit image is about 5px lower than the other element and i carnt figure out why?

    any help guys would be fantastic :)

    Dom
     
    Quozt, Aug 26, 2006 IP
  2. noppid

    noppid gunnin' for the quota

    Messages:
    4,246
    Likes Received:
    232
    Best Answers:
    0
    Trophy Points:
    135
    #2
    I have had this same thing make me pull my hair out. I have had to compromise more then once. Try this. I think it may help, but I'm not certain. Basically you just put the two tags on the same line.

    
<input type='text'  style='margin-top:5px;background:url(search.gif);width:212px;height:19px;border:0px;' /><input align='middle'type='image' src='submit.gif' />
    HTML:
     
    noppid, Aug 26, 2006 IP
  3. Quozt

    Quozt Peon

    Messages:
    216
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    nah didnt work :( thanks anyway though
     
    Quozt, Aug 26, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Not fully tested, but it works for Firefox. Part of the problem lies with using a table as the conntainer. 
    
input {
    padding-top: 3px;
    vertical-align: top;
    }
    Code (markup):
    cheers,

    gary
     
    kk5st, Aug 26, 2006 IP
  5. Quozt

    Quozt Peon

    Messages:
    216
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    no sadly that works in neither firefox or IE
     
    Quozt, Aug 26, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Look again at your style rules, you've got invalid syntax.

    Here is a well structured, semantic and valid page. 
    
<!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">
<head>
  <meta name="generator"
        content="HTML Tidy for Windows (vers 1st July 2003), see www.w3.org" />
  <meta http-equiv="Content-Type"
        content="text/html; charset=UTF8" />

  <title>Form Test</title>
  <style type="text/css">
  /*<![CDATA[*/

  html {
    height: 100%;
    padding-bottom: 1px;
    }

  html, body {
    margin: 0;
    background: #e1e1e2 url('http://www.pesinsight.com/pics/bg.gif') repeat-y center; 
    }
    
  #wrapper {
    width: 781px;
    margin: 0 auto;
    }

  #leader {
    background: black url(http://www.youdeal.co.uk/temp/top_bar.gif) left top no-repeat;
    color: white;
    padding: 1px;
    }
    
  form {
    margin: 0;
    text-align: right;
    }

  fieldset {
    margin: 3px 0;
    padding: 0;
    border: 0 none;
    }
    
  input {
    vertical-align: top;
    }

  input.terms {
    background: url(http://www.youdeal.co.uk/temp/search.gif);
    width: 212px;
    height: 19px;
    border: 0px;
    }

  /*]]>*/
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="leader">
      <form action="#"
            method="get">
        <fieldset>
          <input type="text"
                    class="terms" /><input type="image"
                    src="http://www.youdeal.co.uk/temp/submit.gif" />
        </fieldset>
      </form>
    </div><!-- end leader -->
  </div><!-- end wrapper -->
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Aug 27, 2006 IP
  7. Quozt

    Quozt Peon

    Messages:
    216
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    thanks a lot, the site is almost html/cssifyed you can see it a www.free-stock-stuff.com (a few bugs with the css but ill wait till im a little better at it ;) )
     
    Quozt, Aug 28, 2006 IP