browser?

Discussion in 'CSS' started by rojojat, Dec 5, 2008.

0
  1. #1
    Hi,
    here is a piece of a form I am doing.If you view it in the browser as is, it looks the way I want it to. However with the complete form elements the dash inbetween the input box's sits at the bottom. Hope I have given enough info. What would be causing that?





    <form><label for="phone"><font color="red">*</font> Phone Number:</label> <input type="text" id="area" class="input-box"maxLength=2 size=2
    />-<input type="text" id="prephone" class="input-box"maxLength=2 size=2/>-<input type="text" id="phone" class="input-box"maxLength=6 size=6/><br />
    </form>
     
    rojojat, Dec 5, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Well, the issue is with the complete version, right? Shall we guess at what you've done?

    Post the whole thing.

    cheers,

    gary
     
    kk5st, Dec 5, 2008 IP
  3. rojojat

    rojojat Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry about that gary,
    heres the complete code

    <html>
    <Head><title>Registration</title><STYLE type=text/css>

    #top{
    font-family:sans-serif;
    font-size:13px;
    color:red;
    position: absolute;
    top: 8px;
    left: 300px;}


    #Header{
    border-style:double;
    width:400px;
    height:500px;
    border-color:#97694F;
    background-color:#D8D8BF;
    position: absolute;
    top: 25px;
    left: 300px;
    font-family:sans-serif;
    font-size:13px;
    padding-top:13px;
    }
    label
    {
    width: 12em;
    float: left;
    text-align: right;
    margin: 0 1em 10px 0
    clear: both;
    color:black;
    }

    .input-box
    {
    margin-bottom: 10px }

    .submit-button
    {
    margin-left: 5em;
    clear: both
    }




    </style>
    <body bgcolor="#FAEBD7">
    <div id="top">* Required</div>
    <div id="Header"><form action="">
    <label for="firstname"><font color="red">*</font> First Name:</label> <input type="text" id="firstname" class="input-box" /><br />
    <label for="lastname"><font color="red">*</font> Last Name:</label> <input type="text" id="lastname" class="input-box" /><br />
    <label for="e-mail"><font color="red">*</font> E-mail:</label> <input type="text" id="e-mail" class="input-box" /><br />
    <label for="name"><font color="red">*</font> Password:</label> <input type="text" id="password" class="input-box" /><br />
    <label for="r-pass"><font color="red">*</font> Repeat Password:</label> <input type="text" id="re-password" class="input-box" /><br />
    <label for="user"><font color="red">*</font> Username:</label> <input type="text" id="user" class="input-box" /><br />
    <label for="address"><font color="red">*</font> Mailing Address:</label> <input type="text" id="address" class="input-box" /><br />
    <label for="firstname"><font color="red">*</font> City:</label> <input type="text" id="city" class="input-box" /><br />
    <label for="state"><font color="red">*</font> State:</label><select id="state"><br />
    <option value=""></option>
    <option value='AL'>Alabama</option>
    <option value='AK'>Alaska</option>
    <option value='AZ'>Arizona</option>
    <option value='AR'>Arkansas</option>
    <option value='CA'>California</option>
    <option value='CO'>Colorado</option>
    <option value='CT'>Connecticut</option>

    <option value='DE'>Delaware</option>
    <option value='DC'>District of Columbia</option>
    <option value='FL'>Florida</option>
    <option value='GA'>Georgia</option>
    <option value='HI'>Hawaii</option>
    <option value='ID'>Idaho</option>

    <option value='IL'>Illinois</option>
    <option value='IN'>Indiana</option>
    <option value='IA'>Iowa</option>
    <option value='KS'>Kansas</option>
    <option value='KY'>Kentucky</option>
    <option value='LA'>Louisiana</option>

    <option value='ME'>Maine</option>
    <option value='MD'>Maryland</option>
    <option value='MA'>Massachusetts</option>
    <option value='MI'>Michigan</option>
    <option value='MN'>Minnesota</option>
    <option value='MS'>Mississippi</option>

    <option value='MO'>Missouri</option>
    <option value='MT'>Montana</option>
    <option value='NE'>Nebraska</option>
    <option value='NV'>Nevada</option>
    <option value='NH'>New Hampshire</option>
    <option value='NJ'>New Jersey</option>

    <option value='NM'>New Mexico</option>
    <option value='NY'>New York</option>
    <option value='NC'>North Carolina</option>
    <option value='ND'>North Dakota</option>
    <option value='OH'>Ohio</option>
    <option value='OK'>Oklahoma</option>

    <option value='OR'>Oregon</option>
    <option value='PA'>Pennsylvania</option>
    <option value='RI'>Rhode Island</option>
    <option value='SC'>South Carolina</option>
    <option value='SD'>South Dakota</option>
    <option value='TN'>Tennessee</option>

    <option value='TX'>Texas</option>
    <option value='UT'>Utah</option>
    <option value='VT'>Vermont</option>
    <option value='VA'>Virginia</option>
    <option value='WA'>Washington</option>
    <option value='WV'>West Virginia</option>

    <option value='WI'>Wisconsin</option>
    <option value='WY'>Wyoming</option></select><br /><br />
    <label for="zipcode"><font color="red">*</font> Zip Code:</label> <input type="text" id="zipcode" class="input-box" /><br />
    <label for="phone"><font color="red">*</font> Phone Number:</label> <input type="text" id="area" class="input-box"maxLength=2 size=2
    />-<input type="text" id="prephone" class="input-box"maxLength=2 size=2/>-<input type="text" id="phone" class="input-box"maxLength=6 size=6/><br />



    </form></body></html>
     
    rojojat, Dec 5, 2008 IP
  4. Tejbusiness

    Tejbusiness Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi, rojojat

    your problem is slowed

    Right code is below check it & let me know if any thing wrong

    <html>
    <Head><title>Registration</title><STYLE type=text/css>

    #top{
    font-family:sans-serif;
    font-size:13px;
    color:red;
    position: absolute;
    top: 8px;
    left: 300px;}


    #Header{
    border-style:double;
    width:400px;
    height:500px;
    border-color:#97694F;
    background-color:#D8D8BF;
    position: absolute;
    top: 25px;
    left: 300px;
    font-family:sans-serif;
    font-size:13px;
    padding-top:13px;
    float: left;
    display: block;
    }
    #Header span{
    vertical-align: 15%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0px;
    }
    label
    {
    width: 12em;
    float: left;
    text-align: right;
    margin: 0 1em 10px 0
    clear: both;
    color:black;
    }

    .input-box
    {
    margin-bottom: 10px }

    .submit-button
    {
    margin-left: 5em;
    clear: both
    }




    </style>
    <body bgcolor="#FAEBD7">
    <div id="top">* Required</div>
    <div id="Header"><form action="">
    <label for="firstname"><font color="red">*</font> First Name:</label> <input type="text" id="firstname" class="input-box" /><br />
    <label for="lastname"><font color="red">*</font> Last Name:</label> <input type="text" id="lastname" class="input-box" /><br />
    <label for="e-mail"><font color="red">*</font> E-mail:</label> <input type="text" id="e-mail" class="input-box" /><br />
    <label for="name"><font color="red">*</font> Password:</label> <input type="text" id="password" class="input-box" /><br />
    <label for="r-pass"><font color="red">*</font> Repeat Password:</label> <input type="text" id="re-password" class="input-box" /><br />
    <label for="user"><font color="red">*</font> Username:</label> <input type="text" id="user" class="input-box" /><br />
    <label for="address"><font color="red">*</font> Mailing Address:</label> <input type="text" id="address" class="input-box" /><br />
    <label for="firstname"><font color="red">*</font> City:</label> <input type="text" id="city" class="input-box" /><br />
    <label for="state"><font color="red">*</font> State:</label><select id="state"><br />
    <option value=""></option>
    <option value='AL'>Alabama</option>
    <option value='AK'>Alaska</option>
    <option value='AZ'>Arizona</option>
    <option value='AR'>Arkansas</option>
    <option value='CA'>California</option>
    <option value='CO'>Colorado</option>
    <option value='CT'>Connecticut</option>

    <option value='DE'>Delaware</option>
    <option value='DC'>District of Columbia</option>
    <option value='FL'>Florida</option>
    <option value='GA'>Georgia</option>
    <option value='HI'>Hawaii</option>
    <option value='ID'>Idaho</option>

    <option value='IL'>Illinois</option>
    <option value='IN'>Indiana</option>
    <option value='IA'>Iowa</option>
    <option value='KS'>Kansas</option>
    <option value='KY'>Kentucky</option>
    <option value='LA'>Louisiana</option>

    <option value='ME'>Maine</option>
    <option value='MD'>Maryland</option>
    <option value='MA'>Massachusetts</option>
    <option value='MI'>Michigan</option>
    <option value='MN'>Minnesota</option>
    <option value='MS'>Mississippi</option>

    <option value='MO'>Missouri</option>
    <option value='MT'>Montana</option>
    <option value='NE'>Nebraska</option>
    <option value='NV'>Nevada</option>
    <option value='NH'>New Hampshire</option>
    <option value='NJ'>New Jersey</option>

    <option value='NM'>New Mexico</option>
    <option value='NY'>New York</option>
    <option value='NC'>North Carolina</option>
    <option value='ND'>North Dakota</option>
    <option value='OH'>Ohio</option>
    <option value='OK'>Oklahoma</option>

    <option value='OR'>Oregon</option>
    <option value='PA'>Pennsylvania</option>
    <option value='RI'>Rhode Island</option>
    <option value='SC'>South Carolina</option>
    <option value='SD'>South Dakota</option>
    <option value='TN'>Tennessee</option>

    <option value='TX'>Texas</option>
    <option value='UT'>Utah</option>
    <option value='VT'>Vermont</option>
    <option value='VA'>Virginia</option>
    <option value='WA'>Washington</option>
    <option value='WV'>West Virginia</option>

    <option value='WI'>Wisconsin</option>
    <option value='WY'>Wyoming</option></select><br /><br />
    <label for="zipcode"><font color="red">*</font> Zip Code:</label> <input type="text" id="zipcode" class="input-box" /><br />
    <label for="phone"><font color="red">*</font> Phone Number:</label> <input type="text" id="area" class="input-box"maxLength=2 size=2
    /><span>-</span><input type="text" id="prephone" class="input-box"maxLength=2 size=2/><span>-</span><input type="text" id="phone" class="input-box"maxLength=6 size=6/><br />



    </form></body></html>
     
    Tejbusiness, Dec 6, 2008 IP
  5. rojojat

    rojojat Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks TEJBUSINESS that works.
     
    rojojat, Dec 6, 2008 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    @ Tejbusiness: Nice hack. Have you run into that before? I haven't, and could see no reason for it even happening. Of course, it is IE, :shrug: No other browser has the problem.

    As slick as the hack is, it is not needed once the markup is corrected to be valid.

    @rojojat: None of label, input or select may be a child of form. If you're not going to use the fieldset as a wrapper, each label/form-control pair should live in a p. Once you do that, no hoo-hoo with the hyphens.

    Absolute positioning, as you used it, will only center the form at a single browser resolution. Set the width of the #top (should be a p, not a div) and the form, and set the lateral margins auto.

    You must use a complete DTD, or IE will go into stupid mode, acting as dumb as IE5.

    The font tag and the color attribute are deprecated and should not be used.

    It is poor practice to use an empty option tag. Put a &nbsp; in it if nothing else.

    You have for values without matching id values. See red code.

    Refactored version: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />

  <title>Test-Refactored Form</title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/

  #top{
    font-family:sans-serif;
    font-size:13px;
    margin: 8px auto 0;
    color:red;
    width: 400px;
    }


  form {
    border: double #97694F;
    width:400px;
    margin: 0 auto;
    background-color:#D8D8BF;
    font-family:sans-serif;
    font-size:13px;
    padding-bottom: .75em;
    }

  form p {
    margin: .75em 0 0;
    overflow: hidden;
    }

  /*Holly hack for IE6—may not be needed*/
  * html form p {
    height: 1px;
    }

  label {
    width: 12em;
    float: left;
    text-align: right;
    margin: 0 1em 10px 0
    color:black;
    }

  label span {
    color: red;
    }

  .submit-button
  {
  margin-left: 5em;
  clear: both
  }

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

<body>
  <p id="top">* Required</p>

  <form action="">
    <p><label for="firstname"><span>*</span> First
    Name:&nbsp;&nbsp;</label> <input type="text"
           id="firstname"
           class="input-box" /></p>

    <p><label for="lastname"><span>*</span> Last
    Name:&nbsp;&nbsp;</label> <input type="text"
           id="lastname"
           class="input-box" /></p>

    <p><label for="e-mail"><span>*</span> E-mail:&nbsp;&nbsp;</label>
    <input type="text"
           id="e-mail"
           class="input-box" /></p>

    [color=red]<p><label for="name"><span>*</span> Password:&nbsp;&nbsp;</label>
    <input type="text"
           id="password"
           class="input-box" /></p>[/color]

    [color=red]<p><label for="r-pass"><span>*</span> Repeat
    Password:&nbsp;&nbsp;</label> <input type="text"
           id="re-password"
           class="input-box" /></p>[/color]

    <p><label for="user"><span>*</span> Username:&nbsp;&nbsp;</label>
    <input type="text"
           id="user"
           class="input-box" /></p>

    <p><label for="address"><span>*</span> Mailing
    Address:&nbsp;&nbsp;</label> <input type="text"
           id="address"
           class="input-box" /></p>

    <p><label for="firstname"><span>*</span> City:&nbsp;&nbsp;</label>
    <input type="text"
           id="city"
           class="input-box" /></p>

    <p><label for="state"><span>*</span>
    State:&nbsp;&nbsp;</label><select id="state">
      <option value="">
        &nbsp;
      </option>

      <option value='AL'>
        Alabama
      </option>

      <option value='AK'>
        Alaska
      </option>

      <option value='AZ'>
        Arizona
      </option>

      <option value='AR'>
        Arkansas
      </option>

      <option value='CA'>
        California
      </option>

      <option value='CO'>
        Colorado
      </option>

      <option value='CT'>
        Connecticut
      </option>
    </select></p>

    <p><label for="zipcode"><span>*</span> Zip
    Code:&nbsp;&nbsp;</label> <input type="text"
           id="zipcode"
           class="input-box" /></p>

    <p><label for="phone"><span>*</span> Phone
    Number:&nbsp;&nbsp;</label> <input type="text"
           id="area"
           class="input-box"
           maxlength="2"
           size="2" />-<input type="text"
           id="prephone"
           class="input-box"
           maxlength="2"
           size="2" />-<input type="text"
           id="phone"
           class="input-box"
           maxlength="6"
           size="6" /></p>
  </form>
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Dec 6, 2008 IP
  7. rojojat

    rojojat Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks gary,
    This is very helpful. I was wondering about the absolute positioning only looking good on my browser.
    I will start playing with the auto style, and keep studying. I know there all over the net but can you reccomend any good css tutorials?
    Thanks
    Rob
     
    rojojat, Dec 7, 2008 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    You're welcome. Take a look at htmldog.com. Do the tutes in order.

    cheers,

    gary
     
    kk5st, Dec 12, 2008 IP