Trying like a lot of folks here to get my arms around CSS layout. The layout below displays correctly in Firefox and Safari but not in IE. Trying to have everything centered. In IE the div containing the float:left items will not center it stays all the way to the left.
I used a table as the parent to get the centering because IE doesn't support margin-left:auto; margin-right:auto;. Am I even close or is this totally wrong?
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center">
<div id="findCase" style="position:relative; border:1px solid #000000; display:table;">
<div>
<div class="content" style="position:relative; float:left;">search by:</div>
<div style="position:relative; float:left;"><input id="caseCitation" name="caseCitation" type="radio" value="" checked></div>
<div class="content" style="position:relative; float:left;">case citation</div>
<div style="position:relative; float:left;"><input id="partyName" name="partyName" type="radio" value=""></div>
<div class="content" style="position:relative; float:left;">party name</div><br style="clear:both">
</div>
<div style="position:relative;"><input name="findCaseStr" type="text" id="findCaseStr" style="width:250px"></div>
</div>
</td>
</tr>
</table>
Thanks,
-jscottActually, the code below is all you need to center a page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>I would simplify things thusly, and have everything nicely centered in FF and IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
#search fieldset {
width: 20em;
padding: 0.5em 1em;
margin: 0 auto;
}
#search fieldset p {
margin: 0.25em 0;
text-align: center;
}
-->
</style>
</head>
<body>
<form action="formhandler.php" method=post id=search>
<fieldset>
<p>search by:
<input id="caseCitation" name="caseCitation" type="radio" value="" checked>
<label for="caseCitation">case citation</label>
<input id="partyName" name="partyName" type="radio" value="">
<label for="partyName">party name</label>
</p>
<p>
<input name="findCaseStr" type="text" id="findCaseStr" style="width:250px">
</p>
</fieldset>
</form>
</body>
</html>Thanks guys. I'm studying your replies now. Much appreciated.
Part of the deal that I left off is that I am developing modules for a portal web app. The existing portal HTML structure is 99% tables. So my module will actually be deployed inside a table structure. In this case is it bad to localize a <div> layer layout or is it okay to start a div layout inside an existing table structure?
I would like to start using more CSS layouts so I'm experimenting with making the new content with CSS as opposed to lots of nested tables. Of course we use CSS for text styles, borders, some buttons, etc. Just not for layout...yet.
-jscottStandards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-MacCSS 2.1, allows for a value of transparent for border colorsYup. That is true, but when you do border: 1px solid transparent; the CSS validator throws out an error saying it's an invalid color. Or at least it used to. It's a bug with the validator, not the code or standards
And RE 99% tables: Stick with tables. You're opening Pandora's box by mixing legacy code (a mess of tables) with CSS design.
I used a table as the parent to get the centering because IE doesn't support margin-left:auto; margin-right:auto;. Am I even close or is this totally wrong?
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center">
<div id="findCase" style="position:relative; border:1px solid #000000; display:table;">
<div>
<div class="content" style="position:relative; float:left;">search by:</div>
<div style="position:relative; float:left;"><input id="caseCitation" name="caseCitation" type="radio" value="" checked></div>
<div class="content" style="position:relative; float:left;">case citation</div>
<div style="position:relative; float:left;"><input id="partyName" name="partyName" type="radio" value=""></div>
<div class="content" style="position:relative; float:left;">party name</div><br style="clear:both">
</div>
<div style="position:relative;"><input name="findCaseStr" type="text" id="findCaseStr" style="width:250px"></div>
</div>
</td>
</tr>
</table>
Thanks,
-jscottActually, the code below is all you need to center a page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>I would simplify things thusly, and have everything nicely centered in FF and IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
#search fieldset {
width: 20em;
padding: 0.5em 1em;
margin: 0 auto;
}
#search fieldset p {
margin: 0.25em 0;
text-align: center;
}
-->
</style>
</head>
<body>
<form action="formhandler.php" method=post id=search>
<fieldset>
<p>search by:
<input id="caseCitation" name="caseCitation" type="radio" value="" checked>
<label for="caseCitation">case citation</label>
<input id="partyName" name="partyName" type="radio" value="">
<label for="partyName">party name</label>
</p>
<p>
<input name="findCaseStr" type="text" id="findCaseStr" style="width:250px">
</p>
</fieldset>
</form>
</body>
</html>Thanks guys. I'm studying your replies now. Much appreciated.
Part of the deal that I left off is that I am developing modules for a portal web app. The existing portal HTML structure is 99% tables. So my module will actually be deployed inside a table structure. In this case is it bad to localize a <div> layer layout or is it okay to start a div layout inside an existing table structure?
I would like to start using more CSS layouts so I'm experimenting with making the new content with CSS as opposed to lots of nested tables. Of course we use CSS for text styles, borders, some buttons, etc. Just not for layout...yet.
-jscottStandards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-MacCSS 2.1, allows for a value of transparent for border colorsYup. That is true, but when you do border: 1px solid transparent; the CSS validator throws out an error saying it's an invalid color. Or at least it used to. It's a bug with the validator, not the code or standards
And RE 99% tables: Stick with tables. You're opening Pandora's box by mixing legacy code (a mess of tables) with CSS design.