SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast lauriek's Avatar
    Join Date
    Dec 2002
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems combining two examples from new Sitepoint CSS book

    Hi,

    I have been trying to combine two examples from the new css book, a simple header/two-column/trailer layout together with the little registration form on page 129. I have the following html and css:-

    html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xht...ansitional.dtd">
    <html xmlns="http://wwww3c.org/1999/xhtml">
    <head>
    <title>test</title>
    <link rel="stylesheet" href="q.css" type="text/css" />
    <script language="javascript" src="common.js"></script>
    </head>
    <body>
    <!-- Header -->
    <div id="aqheader">
    <span id="logoleft">&nbsp;</span>
    <span id="logoright">&nbsp;</span>
    </div>
    <!-- Main Content -->
    <div id="aqcontent">
    <form action="reg.php" method="post">
    <p>Enter your details below to Register Free for the all new site!</p>
    <p><label for="name">Name:</label>
    <input type="text" id="name" name="name" size="30"></input></p>
    <p><label for="address">Address:</label>
    <textarea id="address" name="address" wrap="soft" cols="30" rows="5"></textarea></p>
    <p><label for="country">Country:</label>
    <select id="country" name="country">
    <option>United Kingdom</option>
    <option>United States</option>
    <option>Canada</option>
    <option>Australia</option>
    </select></p>
    <p><input type="submit"></input></p>
    </form>
    </div>
    <!-- Menu -->
    <div id="aqmenu">
    Here<br>
    Be<br>
    Menu<br>
    Here<br>
    Be<br>
    Menu<br>
    Here<br>
    Be<br>
    Menu<br>
    </div>
    <!-- Trailer -->
    <div id="aqtrailer">
    copyright &copy; 2000-2003.
    </div>
    </body>
    </html>
    css:

    Code:
    body {
    font-family: rotis, verdana, arial, geneva, sans-serif;
    margin: 0px;
    padding: 0px;
    background-color: #ddd;
    }
    #aqheader {
    margin: 0px;
    padding: 0px;
    background: #ccc;
    height: 54px;
    background: url(images/aqlogomiddle.gif);
    }
    #logoleft {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 490px;
    height: 54px;
    background: url(images/aqlogoleft.gif);
    }
    #logoright {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 174px;
    height: 54px;
    background: url(images/aqlogoright.gif);
    }
    #aqcontent {
    border: 1px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #eee;
    margin-top: 0px
    margin-left: 0px;
    margin-right: 120px;
    }
    #aqmenu {
    padding-right: 10px;
    padding-top: 10px;
    background: #ddd;
    position: absolute;
    right: 0px;
    top: 54px;
    width: 105px;
    text-align: right;
    }
    #aqtrailer {
    padding: 5px;
    clear: right;
    width: 99%;
    background: #ccc;
    }
    form {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0px;
    }
    form p {
    width: 600px;
    clear: both;
    padding-bottom: 10px;
    }
    form p label {
    float: left;
    padding-left: 100px;
    }
    form p input, form p textarea {
    float: right;
    }
    form p select {
    float: right;
    /* Following seems to fix IE glitch but breaks NS/Moz/Opera proper layout! */
    /* margin-right: 120px; */
    }
    This is pretty much the same as a code example in the book which uses the "form p label" etc fields to layout the form in a tablesque way. (But in a css page layout)

    This almost works but the select box is positioned 120px too far to the right and I have to put in a botch - margin-right: 120px to position it correctly in IE. This in turn forces it to be positioned incorrectly in NS7.

    Incidentally the layout problem occurs in IE6SP1 on Win2K and IE6SP2 on winXP...

    Can anyone give me a pointer as to any way round this layout problem? (I realise I could put in a browser detect or something to serve a different stylesheet to each browser but I really don't want to go down this path if I can avoid it...)

    As another user recently said, more css frustration than html utopia at the moment!

    If anyone could give me some pointers it would be so much appreciated as otherwise I think its back to tables!
    Cheers!
    Laurie

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lauriek
    otherwise I think its back to tables
    Is it just me, or does it seem like people have been using this as a threat lately?

    Anyway, for some good tips on layout for forms check out http://realworldstyle.com/forms.html.


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
  •