...

View Full Version : layout breaks with 2 fieldsets



finstah1
11-11-2009, 04:28 PM
I'm trying to separate my form into sections with fieldsets but once I add more than 1 on my page, it expands past the footer instead of staying inside the container. The page is on an internal site so all I can do is post the code here. External CSS files have been pasted into code.

Anyone have any ideas?



<!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">
<head>
<title>Online Store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {height: 100%; /*width: 100%;*/ padding: 0; margin: 0;}
body {margin: 0; padding: 0;font: 76%/1.5em Arial, Helvetica, sans-serif; background: #EEEEE7 url('../images/header1.gif') repeat-x left top; color: #333; text-align: left; }
* {margin: 0; padding: 0;}
a {color:#00529C; text-decoration: none;}
a:focus { outline:none;}
a:visited {color: #555;}
a:hover {color: #60A6E5; text-decoration: underline;}
h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: bold; padding: 0; margin: 0; color: #555;}
h2 {font: bold 1.35em Arial, Helvetica, sans-serif; color: #555; text-align: left; margin: 0; padding: 3px;}
h1 { font-size: 1.5em;}
h3 { font-size: 1.2em; text-transform: none;}
hr {color:#CCC;background-color:#CCC;height:1px;border:none; width: 96%; text-align: center; margin: 0.5em 0;}
p {margin-top: 0.3em;}
p + p {margin-top: 1.2em;}
h3+p {margin-top: 1.2em;}
iframe {float: left; margin: 0; padding: 0; width: 770px; height: 600px;}
dl, dt, dd {color: #333; margin: 0; padding: 0 0 0.5em 0; }
dl {display:block; padding:0.4em;}
fieldset, img {border: 0;}
.clear {clear: both;}

div#container {position:relative; /* needed for footer positioning*/ margin:0 auto; width:960px; background: url('../images/bgd_container.gif') repeat-y left top; height:auto !important; height:100%; /* IE6: treaded as min-height*/ min-height:100%; }
div#content {min-height: 640px;}

#topheader {float: left; width: 960px; height: 75px; background: url('../images/header1.gif') repeat-x left top; padding: 0; margin: 0; clear: both;}
h1#topImg {height: 1px; text-indent: -2000px;}
#logo { float:left; width:210px; height: 75px; padding: 1.7em 1em;}
#login { float:right; width:701px; height: 75px; padding-top: 1.7em; text-align: right; color: #FFF;}

#leftColumn { float:left; width:180px; padding: 2em 1em;}
#rightColumn #rightnav {padding-left: 1.5em;}
#rightColumn #rightnav li {margin-bottom: 1em; list-style-image: url('../images/icon_leftnavlist.gif');}
#rightColumn #rightnav li a {color: #00529C; font-size: 120%; font-weight: bold;}
#rightColumn #rightnav li a:hover {color:#60A6E5; text-decoration: none;}
#rightColumn #rightnav li a span {color: #555; display: block; padding: 0.1em 0.1em 0 0.2em; text-align: left; text-decoration: none; font: normal 60% Arial, Helvetica, sans-serif; line-height:1;}
#rightColumn { float:left; width:180px; padding: 1.4em 1em;}
#rightColumn h2 span,
#middleColumn h2 span {color: #6DBFF9;}
#middleColumn { float:left; width:731px; padding: 2em 1em;}
#rightDiv {font-size:1.1em; padding:0.3em 0; color: #555;}
#rightDiv span {font-size:0.8em; line-height: 1em;}
#rightDiv a {font-size:0.8em;}
#rightDiv span a {font-size:1em;}
#leftDiv {width: 180px;}

ul.allLists, ol.allLists {margin: 0 0 0 0.9em; padding: 8px 4px 0 0; list-style-type: none; /*url("../images/arrows.png");*/}
ol {margin: 0.3em 0 0 0.4em; font-size: 98%;}
ul.allLists li,
ol.allLists li ,
ul.subLists li {padding: 0 0 1em 0;}

ul.allLists li ul.submenu,
ol.allLists li ul.submenu {list-style-type: none;}

ul.allLists li ul.submenu li,
ol.allLists li ul.submenu li,
ul.subLists li ul.submenu {margin: 0 0 0 0.9em; padding: 0 4px 0 0;}

ul.allLists li strong,
ol.allLists li strong {color: #060C56;}

ul.subLists,
ol.subLists {margin: 0 0 0 1.3em; padding: 8px 4px 0 5px; list-style-type: square;}

ul.catalog,
ol.catalog {margin-left:2.1em; padding: 0 0.4em 1em; list-style-type: none;}

h3.copier ,
h3.janitorial,
h3.computers,
h3.laboratory,
h3.ud,
h3.safety,
h3.office,
h3.furniture,
h3.webforms{ width: 170px; height: 27px; white-space: nowrap; cursor: help;}

h3.copier {background: url('../images/icon_copier.gif') no-repeat left top; padding: 0.2em 2.3em;}
h3.janitorial {background: url('../images/icon_janitorial.gif') no-repeat left top; padding: 0.2em 2.3em;}
h3.computers {background: url('../images/icon_computer.gif') no-repeat left top; padding: 0.2em 2.1em;}
h3.laboratory {background: url('../images/icon_laboratory.gif') no-repeat left top; padding: 0.2em 1.7em;}
h3.ud {background: url('../images/icon_ud.gif') no-repeat left top; padding: 0.2em 1.7em;}
h3.safety {background: url('../images/icon_safety.gif') no-repeat left top; padding: 0.2em 2.3em;}
h3.office {background: url('../images/icon_office.gif') no-repeat left top;padding: 0.2em 1.4em;}
h3.furniture {background: url('../images/icon_furniture.gif') no-repeat left top; padding: 0.2em 1.9em;}
h3.webforms {background: url('../images/icon_webforms.gif') no-repeat left top;padding: 0.2em 2.3em;}

table.catgrid {}
table.catgrid tr {vertical-align: top;}
tablel.catgrid td {width: 33%;}
table.catgrid td span {color: #555; display: block; font: normal 70% Arial, Helvetica, sans-serif; line-height: 1em; white-space: nowrap;}


#globalnav li {list-style: none; display: inline; line-height: 2.25em; font-size: 0.9em;}
#globalnav li a {padding: 0.25em 0.5em 0.25em 0.75em; color: #FFF; text-decoration: none;}
#globalnav li a:link {color: #FFF;}
#globalnav li a:hover {text-decoration: underline;}
#globalnav strong {padding-right: 0.5em; color: #6DBFF9;}

#icons {width: 725px; padding: 2em 0;}
#icons ul li img {border: none; padding-top: 1em;}
#icons ul {float: left; margin: 0;}
#icons ul li {list-style: none;margin: 0;display: inline;padding: 0 1.7em 0;}
#icons ul li a {font-size: 95%; text-decoration: none; color: #00529C;}
#icons ul li a:hover {color: #60A6E5; text-decoration: underline;}

#nav {margin:0; padding:0; background:#000 url('../images/bgd_nav.gif') 0 0 repeat-x; width:100%; float:left;}
#nav li {display:inline; padding:0; margin:0;}
#nav li a:hover {background: transparent url('../images/bgd_nav1.gif') top left no-repeat;}
#nav li a {display: block; height: 35px; padding-left: 35px; float: left; font-family: Arial, Helvetica, sans-serif; color: #FFF; text-decoration: none;}
#nav li a span {display: block; float: left; height: 27px; padding-top: 8px; padding-right: 35px; cursor: pointer;}


span.small {color: #333; display: block; padding: 0.1em 0.1em 0 0.2em; text-align: left; text-decoration: none; font: italic 85% Arial, Helvetica, sans-serif; line-height:1;}
.smallOther {font-size: 85%; font-style: italic; color: #333;}
form.myaccount {
width: 550px;
font-size: 1.0em;
color: #555;
}

form.myaccount legend {
font-size: 1em;
color: #FFF;
padding: 0.3em;
font-weight: 900;
background: url('images/bgd_form.png') repeat-x left top;
}

form.myaccount label {
text-align: inherit;
width: auto;
}

form.myaccount label span {color: #333; text-align: right; font-weight: bold;}
table {width: 100%;}
table td{padding: 2px; margin: 3px;}
th {color: #333; text-align: right; font-weight: bold; width: 45%; vertical-align: top;}
td {width: 55%; vertical-align: top;}

form.myaccount fieldset {
padding : 15px;
border: 1px solid #7F9DB9;
}


form.myaccount input.submit {
margin-left: 103px;
}



input, textarea, select {
margin: 0;
padding: 1px;
font-size: 100%;
font-family: inherit;
border: 1px solid #7F9DB9;
}




/* BUTTONS */

/*button a, button{
display:block;
float:left;

font-family: Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px;
}*/
button{
width:auto;
overflow:visible;

padding:4px 10px 3px 7px; /* IE6 */
}
button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
button img, button a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
button, button a.positive{background-color: #EFEEEA; color:#060C56; border: 1px solid #7F9DB9;}
button a.positive:hover, button.positive:hover{background-color:#36F;border:1px solid #060C56;color:#FFF;}
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="topheader">
<h1 id="topImg">UDMart</h1>
<div id="logo"><img src="images/logo2.png" alt="UDMart" /></div>
<div id="login">
<!--<a href="cart.html"><img src="images/cart.png" alt="Shopping cart" /></a> Cart: 2 items -->

<div id="globalnav">
<strong>Welcome Susie Sample</strong>
<ul>
<li><a href="myaccount.html" title="My Account">My Account</a></li>
<li><a href="#" title="Help">Help</a></li>
<li style="border-right: none;"><a href="#" title="Log out">Log out</a></li>
</ul>
</div>

</div>
</div>
<div id="content">
<div id="middleColumn">
<h2>My <span>Account</span></h2>

<form class="myaccount " id="form2" method="post" action=''>
<fieldset>
<legend>Shipping Address</legend>

<table>
<tr>
<th><label>Name:</label> </th>
<td><input type="text" value="Susie Sample" name="name" id="name" /></td>
</tr>
<tr>
<th><label>Department:</label> </th>

<td><input type="text" value="IT-WD" name="dept" id="dept" /></td>
</tr>
<tr valign="top">
<th><label>Address:</label></th>
<td>
<table>
<tr valign="top">
<td style="padding: 0; margin: 0;" colspan="3"><input type="text" name="wcsave_c00_HomeStreet1" id="wcsave_c00_HomeStreet1" size="30" maxlength="50" value="192 blah" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Address 1</span></td>

</tr>
<tr valign="top">
<td colspan="3"><input type="text" name="wcsave_c01_HomeStreet2" id="wcsave_c01_HomeStreet2" size="30" maxlength="50" value="" onchange="strip_blanks(this);" /><span class="small">Address 2</span></td>
</tr>
<tr valign="top">
<td><input type="text" name="wcsave_c02_HomeCity" id="wcsave_c02_HomeCity" size="25" maxlength="25" value="blah" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">City</span></td>
<td><input name="wcsave_c03_HomeState" type="text" id="wcsave_c03_HomeState" onblur="CheckField(this.form,this,'');" value="blah" size="2" maxlength="2" /><span class="small">State</span></td>

<td><input type="text" name="wcsave_c04_HomeZip" id="wcsave_c04_HomeZip" size="15" maxlength="15" value="blah" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Zip/Postal Code</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<th><label>Phone:</label> </th>

<td><input value="302-555-5555" type="text" name="phone" id="phone" /> <span class="smallOther">(use format nnn-nnn-nnnn)</span></td>
</tr>
<tr>
<th><label>E-mail:</label> </th>
<td><input value="sample@udel.edu" type="text" name="email" id="email" /> <span class="smallOther">(use format xxx@xxx.xxx)</span></td>
</tr>

<tr>
<th>&nbsp;</th>
<td><!--<button type="submit" class="positive"><img src="images/tick.png" alt="Submit"/>Submit</button> --></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Default Account</legend>

<table>
<tr>
<th><label>Name:</label> </th>
<td><input value="Susie Sample" type="text" name="name2" id="name2" /></td>
</tr>
<tr>
<th><label>Department:</label> </th>

<td><input value="IT-WD" type="text" name="dept3" id="dept3" /></td>
</tr>
<tr valign="top">
<th><label>Address:</label></th>
<td>
<table>
<tr valign="top">
<td style="padding: 0; margin: 0;" colspan="3"><input type="text" name="asdf" id="asdf" size="30" maxlength="50" value="192 S. Chapel St." onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Address 1</span></td>

</tr>
<tr valign="top">
<td colspan="3"><input type="text" name="fgh" id="fgh" size="30" maxlength="50" value="" onchange="strip_blanks(this);" /><span class="small">Address 2</span></td>
</tr>
<tr valign="top">
<td><input type="text" name="ghjk" id="ghjk" size="25" maxlength="25" value="Newark" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">City</span></td>
<td><input name="kl" type="text" id="kl" onblur="CheckField(this.form,this,'');" value="DE" size="2" maxlength="2" /><span class="small">State</span></td>

<td><input type="text" name="rtu" id="rtu" size="15" maxlength="15" value="19716" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Zip/Postal Code</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<th><label>Phone:</label> </th>

<td><input value="302-555-5555" type="text" name="fh" id="fh" /> <span class="smallOther">(use format nnn-nnn-nnnn)</span></td>
</tr>
<tr>
<th><label>E-mail:</label> </th>
<td><input value="sample@udel.edu" type="text" name="gg" id="gg" /> <span class="smallOther">(use format xxx@xxx.xxx)</span></td>
</tr>

<tr>
<th>&nbsp;</th>
<td><button type="submit" class="positive"><img src="images/tick.png" alt="Submit"/>Submit</button></td>
</tr>
</table>
</fieldset>
</form>
<div class="clear"></div>
</div>
<div id="rightColumn">

<div id="rightDiv">
<ul id="rightnav">
<li><a href="catalog.html" title="Create an order">Create an order<span style="font-size:0.6em; ">Browse the Product Catalog</span></a></li>
<li><a href="javascript:;" title="Order history">Order history<span>View a listing of your past orders</span></a></li>
<li><a href="javascript:;" title="Problems?">Problems?<span>Find the answer</span></a></li>
</ul>

</div>
</div>
</div>
</div>
</body>
</html>

abduraooft
11-11-2009, 04:31 PM
Validate your markup (http://validator.w3.org/#validate_by_input) and fix the errors first.

finstah1
11-11-2009, 04:43 PM
fixed

abduraooft
11-12-2009, 07:01 AM
fixed
Fixed what -the issue / the markup errors? If you need further help, please post your current code.

finstah1
11-13-2009, 02:25 PM
I fixed the validation errors. The code is not fixed.

finstah1
11-13-2009, 03:57 PM
here's a simpler approach. It works in FF and IE7,8 but it breaks past the footer in IE 6.



<!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">
<head>
<title>Test </title>
<style>
html, body {height: 100%; /*width: 100%;*/ padding: 0; margin: 0;}
body {margin: 0; padding: 0;font: 76%/1.5em Arial, Helvetica, sans-serif; background: #EEEEE7 url('images/header1.gif') repeat-x left top; color: #333; text-align: left; }
* {margin: 0; padding: 0;}
a {color:#00529C; text-decoration: none;}
a:focus { outline:none;}
a:visited {color: #555;}
a:hover {color: #60A6E5; text-decoration: underline;}
h2, h3, h4, h5, h6, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: bold; padding: 0; margin: 0; color: #555;}
h2 {font: bold 1.35em Arial, Helvetica, sans-serif; color: #555; text-align: left; margin: 0; padding: 3px;}
h1 { font-size: 1.5em;}
h3 { font-size: 1.2em; text-transform: none;}
hr {color:#CCC;background-color:#CCC;height:1px;border:none; width: 96%; text-align: center; margin: 0.5em 0;}
p {margin-top: 0.3em;}
p + p {margin-top: 1.2em;}
h3+p {margin-top: 1.2em;}
iframe {float: left; margin: 0; padding: 0; width: 770px; height: 600px;}
dl, dt, dd {color: #333; margin: 0; padding: 0 0 0.5em 0; }
dl {display:block; padding:0.4em;}
fieldset, img {border: 0;}
.clear {clear: both;}

div#container {position:relative; /* needed for footer positioning*/ margin:0 auto; width:960px; background: url('images/bgd_container.gif') repeat-y left top; height:auto !important; height:100%; /* IE6: treaded as min-height*/ min-height:100%; }
/*div#content {min-height: 800px;}*/

#topheader {float: left; width: 960px; height: 75px; background: url('images/header1.gif') repeat-x left top; padding: 0; margin: 0; clear: both;}
h1#topImg {height: 1px; text-indent: -2000px;}
#logo { float:left; width:210px; height: 75px; padding: 1.7em 1em;}
#login { float:right; width:701px; height: 75px; padding-top: 1.7em; text-align: right; color: #FFF;}

#leftColumn { float:left; width:180px; padding: 2em 1em;}
#rightColumn #rightnav {padding-left: 1.5em;}
#rightColumn #rightnav li {margin-bottom: 1em; list-style-image: url('images/icon_leftnavlist.gif');}
#rightColumn #rightnav li a {color: #00529C; font-size: 120%; font-weight: bold;}
#rightColumn #rightnav li a:hover {color:#60A6E5; text-decoration: none;}
#rightColumn #rightnav li a span {color: #555; display: block; padding: 0.1em 0.1em 0 0.2em; text-align: left; text-decoration: none; font: normal 60% Arial, Helvetica, sans-serif; line-height:1;}
#rightColumn { float:left; width:180px; padding: 1.4em 1em;}
#rightColumn h2 span,
#middleColumn h2 span {color: #6DBFF9;}
#middleColumn { float:left; width:731px; padding: 2em 1em;}
#rightDiv {font-size:1.1em; padding:0.3em 0; color: #555;}
#rightDiv span {font-size:0.8em; line-height: 1em;}
#rightDiv a {font-size:0.8em;}
#rightDiv span a {font-size:1em;}
#leftDiv {width: 180px;}

ul.allLists, ol.allLists {margin: 0 0 0 0.9em; padding: 8px 4px 0 0; list-style-type: none; /*url("../images/arrows.png");*/}
ol {margin: 0.3em 0 0 0.4em; font-size: 98%;}
ul.allLists li,
ol.allLists li ,
ul.subLists li {padding: 0 0 1em 0;}

ul.allLists li ul.submenu,
ol.allLists li ul.submenu {list-style-type: none;}

ul.allLists li ul.submenu li,
ol.allLists li ul.submenu li,
ul.subLists li ul.submenu {margin: 0 0 0 0.9em; padding: 0 4px 0 0;}

ul.allLists li strong,
ol.allLists li strong {color: #060C56;}

ul.subLists,
ol.subLists {margin: 0 0 0 1.3em; padding: 8px 4px 0 5px; list-style-type: square;}

ul.catalog,
ol.catalog {margin-left:2.1em; padding: 0 0.4em 1em; list-style-type: none;}

h3.copier ,
h3.janitorial,
h3.computers,
h3.laboratory,
h3.ud,
h3.safety,
h3.office,
h3.furniture,
h3.webforms{ width: 170px; height: 27px; white-space: nowrap; cursor: help;}

h3.copier {background: url('images/icon_copier.gif') no-repeat left top; padding: 0.2em 2.3em;}
h3.janitorial {background: url('images/icon_janitorial.gif') no-repeat left top; padding: 0.2em 2.3em;}
h3.computers {background: url('images/icon_computer.gif') no-repeat left top; padding: 0.2em 2.1em;}
h3.laboratory {background: url('images/icon_laboratory.gif') no-repeat left top; padding: 0.2em 1.7em;}
h3.ud {background: url('images/icon_ud.gif') no-repeat left top; padding: 0.2em 1.7em;}
h3.safety {background: url('images/icon_safety.gif') no-repeat left top; padding: 0.2em 2.3em;}
h3.office {background: url('images/icon_office.gif') no-repeat left top;padding: 0.2em 1.4em;}
h3.furniture {background: url('images/icon_furniture.gif') no-repeat left top; padding: 0.2em 1.9em;}
h3.webforms {background: url('images/icon_webforms.gif') no-repeat left top;padding: 0.2em 2.3em;}

table.catgrid {}
table.catgrid tr {vertical-align: top;}
tablel.catgrid td {width: 33%;}
table.catgrid td span {color: #555; display: block; font: normal 70% Arial, Helvetica, sans-serif; line-height: 1em; white-space: nowrap;}


#globalnav li {list-style: none; display: inline; line-height: 2.25em; font-size: 0.9em;}
#globalnav li a {padding: 0.25em 0.5em 0.25em 0.75em; color: #FFF; text-decoration: none;}
#globalnav li a:link {color: #FFF;}
#globalnav li a:hover {text-decoration: underline;}
#globalnav strong {padding-right: 0.5em; color: #6DBFF9;}

#icons {width: 725px; padding: 2em 0;}
#icons ul li img {border: none; padding-top: 1em;}
#icons ul {float: left; margin: 0;}
#icons ul li {list-style: none;margin: 0;display: inline;padding: 0 1.7em 0;}
#icons ul li a {font-size: 95%; text-decoration: none; color: #00529C;}
#icons ul li a:hover {color: #60A6E5; text-decoration: underline;}

#nav {margin:0; padding:0; background:#000 url('images/bgd_nav.gif') 0 0 repeat-x; width:100%; float:left;}
#nav li {display:inline; padding:0; margin:0;}
#nav li a:hover {background: transparent url('images/bgd_nav1.gif') top left no-repeat;}
#nav li a {display: block; height: 35px; padding-left: 35px; float: left; font-family: Arial, Helvetica, sans-serif; color: #FFF; text-decoration: none;}
#nav li a span {display: block; float: left; height: 27px; padding-top: 8px; padding-right: 35px; cursor: pointer;}



span.small {color: #333; display: block; padding: 0.1em 0.1em 0 0.2em; text-align: left; text-decoration: none; font: italic 75% Arial, Helvetica, sans-serif; line-height:1;}
.smallOther {font-size: 75%; font-style: italic; color: #333;}
form.myaccount {
width: 550px;
font-size: 1.0em;
color: #333;
padding-bottom: 3em;
}

form.myaccount legend {
font-size: 1.1em;
color: #FFF;
padding: 0.3em;
font-weight: bold;
background: url('images/bgd_form.png') repeat-x left top;
}

table {width: 100%;}
table td{padding: 2px; margin: 3px;}
th {color: #333; text-align: right; font-weight: bold; font-size: 0.8em; width: 45%; vertical-align: top;}
td {width: 55%; vertical-align: top;}

form.myaccount label {text-align: inherit; width: auto;}
form.myaccount fieldset { padding : 15px; border: 1px solid #7F9DB9;}
form.myaccount input.submit {margin-left: 103px;}
input, textarea, select {margin: 0; padding: 1px; font-size: 0.8em; font-family: inherit; border: 1px solid #7F9DB9;}

#Address {font-size: 80%;}


/* BUTTONS */


button{
width:auto;
overflow:visible;

padding:4px 10px 3px 7px; /* IE6 */
}
button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
button img, button a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
button, button a.positive{background-color: #EFEEEA; color:#060C56; border: 1px solid #7F9DB9;}
button a.positive:hover, button.positive:hover{background-color:#36F;border:1px solid #060C56;color:#FFF;}


div#UDfoot {width: 100%;margin: 0;text-align: left;font-size: 12px;display: block;color: #060C56;}
div#UDfoot_con {width: 96%;margin: 0 auto;font-family: Arial, Helvetica, Verdana, sans-serif;padding:0 10px;}
div#UDfoot_con a {border: 0;}
div#UDfoot img#UDfoot_Logo {float: right;margin: 10px; border: 0;}
div#UDfoot ul#footAddy {width:550px;font-family: Arial, Helvetica, Verdana, sans-serif;list-style-type: none;float: left;margin: 16px 0 4px 0px;clear: left;padding: 0;line-height: 1.2em;}
div#UDfoot ul#footAddy li {float: left;padding: 0px 10px;margin: 0;list-style-type: none;list-style-image: none;color: #060C56;}
div#UDfoot ul#footAddy li a {font-weight: normal;text-decoration: underline;color: #060C56;}
div#UDfoot ul#footAddy li a:hover, div#UDfoot ul#footAddy li a.selected {color: #060C56;text-decoration: underline;border: 0;}
div#UDfoot ul#UDfoot_Links {width:550px;font-family: Arial, Helvetica, Verdana, sans-serif;list-style-type: none;float: left;margin: 0 0 4px 0;clear: left;padding: 0;line-height: 1.3em;}
div#UDfoot ul#UDfoot_Links li {float: left;font-family: Arial, Helvetica, Verdana, sans-serif;padding: 0 10px;margin: 0;list-style-type: none;list-style-image: none;}
div#UDfoot ul#UDfoot_Links li a {font-weight: bold;font-family: Arial, Helvetica, Verdana, sans-serif;text-decoration: none;color: #060C56;}
div#UDfoot ul#UDfoot_Links li a:hover, div#UDfoot ul#UDfoot_Links li a.selected {color: #BCBFB4;text-decoration: underline;border: 0;}
div#UDfoot ul#UDfoot_Links li.withsep {border-right: 1px solid #060C56;margin: 0;}
div#UDfoot ul#UDfoot_Links li.withsep a, div#UDfoot ul#UDfoot_Links li.last a{font-weight: bold; color: #060C56;}
.udclearfloat {clear:both;height:0;font-size: 1px;line-height: 0;}

div#footer-push {height: 0; clear: both;}

div#footer {clear: both; position:absolute; width:100%; bottom:0; background:#EFEEEA url('images/footer.jpg') no-repeat left top; padding-top: 1.2em;}
</style>
<script language="javascript">
function toggle1(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Manage shipping address (+)";
}
else {
ele.style.display = "block";
text.innerHTML = "Manage shipping address (-)";
}
}

function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Manage accounts (+)";
}
else {
ele.style.display = "block";
text.innerHTML = "Manage accounts (-)";
}
}

function toggle3(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Manage shipping address (+)";
}
else {
ele.style.display = "block";
text.innerHTML = "Manage shipping address (-)";
}
}
</script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->
</head>
<body bgcolor="#DEDCDC">

<div id="container">

<div id="topheader">
<h1 id="topImg">UDMart</h1>
<div id="logo"><img src="images/logo2.png" alt="UDMart" /></div>
<div id="login">
<!--<a href="cart.html"><img src="images/cart.png" alt="Shopping cart" /></a> Cart: 2 items -->
<!--#include virtual="includes/flanders.html" -->
</div>
</div>

<div id="content">
<div id="middleColumn">
<ul>
<li><a id="myHeader1" href="javascript:toggle1('myContent1','myHeader1');" >Manage shipping address (+)</a>
<div id="myContent1" style="display: none;">
<form class="myaccount " id="form2" method="post" action='https://mis183.mis.udel.edu/formsPro/collect.action'>
<fieldset>
<legend>Shipping Address</legend>
<table>
<tr>
<th><label>Name:</label> </th>
<td><input type="text" value="Susie Sample" name="name" id="name" /></td>
</tr>
<tr>
<th><label>Department:</label> </th>
<td><input type="text" value="IT-WD" name="dept" id="dept" /></td>
</tr>
<tr valign="top">
<th><label>Address:</label></th>
<td>
<table>
<tr valign="top">
<td style="padding: 0; margin: 0;" colspan="3"><input type="text" name="wcsave_c00_HomeStreet1" id="wcsave_c00_HomeStreet1" size="30" maxlength="50" value="" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Address 1</span></td>
</tr>
<tr valign="top">
<td colspan="3"><input type="text" name="wcsave_c01_HomeStreet2" id="wcsave_c01_HomeStreet2" size="30" maxlength="50" value="" onchange="strip_blanks(this);" /><span class="small">Address 2</span></td>
</tr>
<tr valign="top">
<td><input type="text" name="wcsave_c02_HomeCity" id="wcsave_c02_HomeCity" size="25" maxlength="25" value="" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">City</span></td>
<td><input name="wcsave_c03_HomeState" type="text" id="wcsave_c03_HomeState" onblur="CheckField(this.form,this,'');" value="" size="2" maxlength="2" /><span class="small">State</span></td>
<td><input type="text" name="wcsave_c04_HomeZip" id="wcsave_c04_HomeZip" size="15" maxlength="15" value="" onchange="strip_blanks(this);" onblur="CheckField(this.form,this,'');" /><span class="small">Zip/Postal Code</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<th><label>Phone:</label> </th>
<td><input value="302-555-5555" type="text" name="phone" id="phone" /> <font class="small">(use format nnn-nnn-nnnn)</font></td>
</tr>
<tr>
<th><label>E-mail:</label> </th>
<td><input value="sample@udel.edu" type="text" name="email" id="email" /> <font class="small">(use format xxx@xxx.xxx)</font></td>
</tr>
</table>
</fieldset>
</form>

</div></li>

<li><a id="myHeader2" href="javascript:toggle2('myContent2','myHeader2');" >Manage accounts (+)</a>
<div id="myContent2" style="display: none;">
<form class="myaccount ">
<fieldset>
<table>
<tr>
<td>
<strong>Nickname:</strong></td>
<td>

<input name="acct_nickname" type="text" id="acct_nickname" value="B&amp;G stdnt" size="10" maxlength="10"></td>
</tr>
<tr>
<td><strong>Type:</strong></td>
<td class="small">
<select name="acct_type" id="acct_type">
<option selected value="">Choose one</option>
<option>Revenue</option>
<option>Fees</option>
</select>
</td>
</tr>
<tr>
<td><strong>Distribution:</strong></td>

<td>
<a href="#">add more lines<br>
&nbsp;</a></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><a href="myaccts2.html"><IMG SRC="images/exitwosave2.gif" width="128" height="21" BORDER="0">&nbsp;&nbsp;&nbsp;<IMG SRC="images/nextstep2.gif" BORDER="0"></a></td>
</tr>
</table>
</fieldset>
</form>
</div></li>
<li><a id="myHeader3" href="javascript:toggle3('myContent3', 'myHeader3');" >collapse</a>
<div id="myContent3" style="display: none;">Div #3</div></li>
</ul>
</div>
<div id="rightColumn">
<!--#include virtual="includes/rightnav.html" -->
</div>
</div>
<div id="footer-push"></div>
<div id="footer">
<!--#include virtual="includes/footer.html"-->
</div>
</div>
</body>
</html>
</body>
</html>


however when I change the doctype to


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


it works in IE6 but the entire page is no longer centered

abduraooft
11-13-2009, 07:03 PM
however when I change the doctype to


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

it works in IE6 but the entire page is no longer centered No, you shoudn't add it anyway, since it's invalid. See www.alistapart.com/articles/doctype/

finstah1
11-13-2009, 09:06 PM
so it looks like it works in IE6 if you resize the browser. So how can you get the footer to update without a window resize?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum