SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calling Any and All CSS Experts!! Spacing Problem...

    I'm having a problem with more spacing between my <h1> tag and form section. I didn't even notice until I previewed in IE...it works fine in FF but IE is adding more space. At first I thought it was just a glitch but another form on another page is doing the same thing.

    Here is the HTML:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Company Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" media="screen" href="../styles.css"/>
    </head>
    <body>
    <div id="wrap">
    <div id="top"></div>
    <div id="header"><img src="../i/logo.gif" align="left"></div>
    <div id="nav-wrap">
    <ul id="nav">
    <li><a href="../index.htm">Home</a></li>
    <li><a href="../features/">Features</a></li>
    <li><a href="../pictures/">Pictures</a></li>
    <li><a href="../order/">Order Now</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="content-wrap">
    <div id="content">
    <h1>Contact Form</h1>
    <form action="" method="post" name="Contact Form">
    <p>Namebr />
    <input name="Name" />
    </p>
    <p>Addressbr />
    <input name="Address" />
    </p>
    <p>Citybr />
    <input name="City" />
    </p>
    <p>Provincebr />
    <input name="Province" />
    </p>
    <p>Postal Codebr />
    <input name="Postal Code" />
    </p>
    <p>Countrybr />
    <input name="Country" />
    </p>
    <p>Phonebr />
    <input name="Phone" />
    </p>
    <p>Emailbr />
    <input name="Email" />
    </p>
    <p>Commentsbr />
    <textarea name="Comments" rows="4" cols="30" /></textarea>
    <p>
    <input TYPE="hidden" NAME="recipient" VALUE="">
    <input TYPE="hidden" NAME="subject" VALUE="Request For Info">
    <input TYPE="hidden" NAME="required" VALUE="Name, Email">
    <input TYPE="hidden" NAME="redirect" VALUE="">
    <input type="submit" />
    </p>
    </form>
    </div>
    </div>
    <hr class="hide" />
    <div id="sidebar2">
    <div id="sidebar_space">
    <h1>Contact Us</h1>
    <p>Company.<br />
    C/O Owner<br />
    </p>
    <p>Phone<br />
    Fax</p>
    <p>Email: <font color="0A557B">email here</font></a></p>
    <p>Show Room: <br />
    Addressbr />
    Addressbr />
    Zip Code <br />
    Phone</p>
    </div>
    </div>
    <div id="footer">
    <p>Copyright &copy; 2005</p>
    </div>
    </div>

    </body>
    </html>

    -----------------------------------------------------------------------


    And here is the CSS:

    /* CSS Document */

    #wrap {
    position: relative;
    background: #fff repeat;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #000;
    border-top: none;
    border-bottom: none;
    width: 750px;
    }

    #top {
    background: #0C557B;
    padding-top: 21px;
    }

    #header {
    background: #000 url(i/header_bg.gif) repeat-x;
    height: 70px;
    padding-left: 26px;
    }

    body {
    margin: 0;
    padding: 0 0 0 0;
    text-align: center;
    font: normal 12px arial, helvetica, serif;
    color: #000;
    }

    h1 {
    font: bold 15px arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 39px 0 22px 0;
    text-transform: uppercase;
    }

    p {
    margin: 0;
    padding: 5px 0;
    }

    h2 {
    font: 7pt arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 12px 44px;
    }

    /* Nav Styles */
    #nav-wrap {
    background: #0C557B;
    padding: 0 0 0 41px;
    height: 21px;
    font: bold 12px arial, helvetica, serif;
    text-transform: none;
    }

    #nav {
    padding: 3px 0 2px 0;
    }

    ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav li { /* all list items */
    float: left;
    position: relative;
    /*width: 100px;*/
    line-height: 15px;
    }

    #nav a:link, #nav a:visited {
    color: #C0D3DD;
    padding: 0 22px 0 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    }
    #nav a:hover, #nav a:active {
    color: #FFF;
    }


    /* Content Styles */
    #content-wrap {
    float: left;
    width: 444px;
    text-align: left;
    background: #fff;
    }

    #form{
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    padding: 0 0 47px 41px;
    }

    #content {
    margin: 0 0 47px 41px;
    }

    #content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    #content li {
    margin: 0px;
    padding: 5px 0;
    list-style-type: none;
    font-weight: bold;
    }



    /* Sidebar Styles */

    #sidebar {
    float: right;
    margin: 0;
    width: 304px;
    border-top: 39px solid #fff;
    padding: 0 0 39px 0;
    }

    #sidebar2 {
    float: right;
    margin: 0;
    width: 304px;
    text-align: left;
    }
    #sidebar_space {
    margin: 0 0 0 34px;
    }
    #sidebar img {
    background: #FFF;
    border: 0;
    }



    /* Footer. Styles */

    #footer {
    clear: both;
    background: #0C557B;
    height: 20px;
    font: bold 7pt arial, helvetica, serif;
    color: #C0D3DD;
    text-align: left;
    padding-left: 41px;
    }



    /* Misc. Styles */

    .hide {
    display: none;
    }
    #lowfi-logo {
    display: none;
    }




    Any help is greatly appreciated!

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try a complete DTD and see if that helps. Maybe this one :

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it something to do with the fact that you've got a CSS declaration for #form, but no element with that ID?

    I guess you either mean to apply the CSS to all form elements, or give the form an id="form" (pretty pointless).


  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do agree with Bon about the doctype but for what you're doing this one may be better:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Anyways ....... I found this:

    h1 {
    font: bold 15px arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 39px 0 22px 0;
    text-transform: uppercase;
    }

    I did this:

    h1 {
    font: bold 15px arial, helvetica, serif;
    color: #0C557B;
    margin: 0;
    padding: 39px 0 0 0;
    text-transform: uppercase;
    }

    and then on your form you didnt declare a margin so I did this:

    #content form {
    margin: 0;
    padding: 0;
    }

    works like a charm .... no space at all

    BTW what is this style for??? (its not being used)

    #form{
    float: left;
    width: 748px;
    text-align: left;
    background: #fff;
    padding: 0 0 47px 41px;
    }

  5. #5
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I do want the space that is set on FF...not the space in IE. All I want to know is why there is MORE space between the H1 and the Form when viewed in IE...

    thks for the help so far!

  6. #6
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As for the #form, it is being used on another form page.


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
  •