PDA

View Full Version : Help with CSS layout



Wintaru
Apr 19th, 2007, 04:36 PM
I have a web form that I'm trying to center, and then align the controls within into 2 columns. Please forgive any glaring mistakes, I'm new to CSS and I've been trying different things to make this work. It displays fine in Firefox and IE7, but in IE6 it fails and that's where I need it to work.

This is just a mockup for some on the job training I'm going through so I don't have it hosted anywhere. If that would make it easier to diagnose, I'll see about getting the page put somewhere.

The HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Check Quality Control</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<h1 id="mainheader">Quality Control</h1>
</div>
<div>
<form id="qc">
<fieldset>
<legend>File Information</legend>
<label id="lblcol1">Rep Name:</label>
<select id="control1">
<option value="Adams,Tim">Adams,Tim</option>
<option value="Johnson,Jill">Johnson,Jill</option>
<option value="Smith,John">Smith,John</option>
</select>
<label id="lblcol2">File Type:</label>
<select id="control2">
<option value=""></option>
<option value="Quality Control">Quality Control</option>
<option value="Training">Training</option>
</select><br />
<label id="lblcol1">Process:</label>
<select id="control1">
<option value=""></option>
<option value="New File">New File</option>
<option value="Transfer">Transfer</option>
<option value="Termination">Termination</option>
</select>
<label id="lblcol2">Date Processed:</label>
<input id="control2" name="txtDateProcessed" /><br />
<label id="lblcol1">Agent Number:</label>
<input id="control1" name="txtAgentNumber" /><br />
<br />
</fieldset>
<fieldset>
<legend>Categories and Criteria</legend>
<fieldset>
<legend>Address Tab</legend>
<label id="lblinner1">Agent Status:</label>
<input id="cntlinner1" type="checkbox" name="chkatas" />
<label id="lblinner3" name="lblptatas">-3 points</label>
<label id="lblinner2">Incomplete Name:</label>
<input id="cntlinner2" type="checkbox" />
</fieldset>
<fieldset>
<legend>Control Data Tab</legend>
</fieldset>
<fieldset>
<legend>License(s)</legend>
</fieldset>
</fieldset>
<fieldset>
<legend>Controls</legend>
<input id="subbutton" type="button" name="btnSubmit" value="Submit" />
</fieldset>
</form>
</div>
</body>
</html>


The CSS:

body
{
background-color: Gray;
margin: 0px 0px;
padding: 0px;
min-width: 300px;
text-align: center;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
h1#mainheader
{
color: White;
background-color: Navy;
font-size: xx-large;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: .5em;

padding: .4em 0;
border-top: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #000;
border-bottom: 3px solid #000;

margin-bottom: 5px;
margin-top: 0;
}
#qc
{
font-size: x-small;
background-color: #ccc;
width: 640px;
min-width: 40em;
max-width: 70em;
padding: .4em .4em;
margin: 0px auto;
text-align: left;
}
form br
{
clear: left;
}
#lblcol1
{
display: block;
float: left;
padding: 0;
width: 150px;
margin: 5px 0 0;
text-align: right;
}
#lblcol2
{
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
#control1
{
float: left;
width: 150px;
margin-left: 5px;
}
#control2
{
float: left;
width: 150px;
margin-left: 5px;
}
#lblinner1
{
display: block;
float: left;
padding: 0;
width: 150px;
margin: 5px 0 0;
text-align: right;
}
#lblinner2
{
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
#lblinner3
{
display: block;
float: left;
width: 100px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
#cntlinner1
{
float: left;
margin-left: 5px;
}
#cntlinner2
{
float: left;
margin-left: 5px;
}
form fieldset
{
clear: both;
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 0;
}
form fieldset legend
{
font-size: 1.1em;
}
form fieldset label:first-letter
{
/* text-decoration: underline; */
}

koyama
Apr 19th, 2007, 09:11 PM
Glancing at your code, I see a problem with your doctype. The one that you are using will trigger quirks mode in IE as well as Firefox. This is not good because, for example, in IE you won't be able to center block level elements using margin: 0 auto.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

The right one for you may instead be this one:


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

If you don't know the difference between quirks mode and standards mode, here is a place to start: Quirks mode and strict mode (http://www.quirksmode.org/css/quirksmode.html).

Then, to find out what document types trigger which layout modes use this as a reference: Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)

I am not saying that this will fix your issues, but this should be your starting point.

Wintaru
Apr 19th, 2007, 10:21 PM
Thank you for your reply!

I wasn't aware of the different doc types, I'll do some reading up on that. I tried the doctype you suggested with no luck.