Problems combining two examples from new Sitepoint CSS book

**lauriek** · Jun 24, 2003 03:34

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