Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    layout breaks with 2 fieldsets

    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?

    Code:
    <!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>
    Last edited by finstah1; 11-11-2009 at 04:43 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate your markup and fix the errors first.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    fixed

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by finstah1 View Post
    fixed
    Fixed what -the issue / the markup errors? If you need further help, please post your current code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I fixed the validation errors. The code is not fixed.

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    here's a simpler approach. It works in FF and IE7,8 but it breaks past the footer in IE 6.

    Code:
    <!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
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    it works in IE6 but the entire page is no longer centered

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    however when I change the doctype to

    Code:
    <!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/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •