Fieldset issue in IE6/7

Hey guys,

I haven’t been on for quite some time. I haven’t been doing much design work, I’ve been stuck in organic SEO hell. :lol: Anyway, I had to code a login page for wholesalers. Before I even create some type of form validation, I need this to display in IE. It’s fine in Mozilla, Chrome and Opera, but in IE6, IE7, IE8, the div I have around the fieldsets isn’t centering. All the more reason to start brushing up on my lame CSS skills.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome to KMG Sales!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
	background-image:url('/assets/images/bg-gradient.jpg');
    background-repeat: repeat-x;
	background-color: #ffa243;
	text-align: center;
	font: 85%/1.5 "tahoma", verdana, arial, helvetica, sans-serif;

    
}

#container {
  
   width: 900px;
   text-align: left;
   margin: 0 auto;
   padding: 0 10px;
  

}



fieldset {
	border: 1px solid #000;
	padding: 10px;
    margin: 6px 0;
 
}

legend {
	letter-spacing: -1px;
	font-weight: bold;
	line-height: 1.1;
	color:#fff;
	background: #666;
	border: 1px solid #333;
	padding: 2px 6px;
}



label {
	width:142px;
	height:32px;
	margin-top:3px;
	margin-right:2px;
	padding-top:11px;
	padding-left:6px;
	text-transform: uppercase;
	float:left;
	display: block;
    letter-spacing: -1px;
	font-weight: bold;
	line-height: 1.1;
	color:#000;
}

.form {
	margin:0;
	padding:0;
}


#top {
	width: 900px;
	padding: 0;
	margin: 0;
	}
	
#top img {
	display: block;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

#content {
	width:530px;
	padding-top:30px;
    margin: 0 auto; 
}


	

.clear {
	clear:both;
	 height: 1%;
}

.holder {
	background-color:#fff;

}
.div_textbox {
	width:347px;
    float:left;
	height:35px;
	margin-top:3px;
	padding-top:5px;
	padding-bottom:3px;
	padding-left:5px;
}

.username {
    	
	    width:285px;
    	font: normal 18px;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}

.username:focus, .username:hover {
	background-color:#F7F7F7;
}

.password {

	width:285px;
	font: normal 18px;
	color: #999999;
	padding:3px 5px 3px 19px;
}


.password:focus, .password:hover {
	background-color: #F7F7F7;
}

   .button_div {
	width: 287px;
	float: left;
	text-align: left;
	height:35px;
	margin-top:3px;
	padding:5px 32px 3px;
}

.buttons {
	
	padding: 6px 14px;
	border-width: 2px;
	border-style: solid;
	border-color: #fff #d8d8d0 #d8d8d0 #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}



</style>

</head>

<body>

<div id="container">
  <div id="top"> 
  
    <img src="/assets/images/kmg-sales.jpg" alt="KMG Sales" title="KMG Sales">

  </div> 
  
  <div id="content">
  
  <fieldset>
  
  <legend>Login Details:</legend>
  

 <form action="login.asp?ordertracking=1" method="post" class="form">
 
 
  <label for="username">Email:</label>
  
    <div class="div_textbox">
    
    
    <input name="email" type="text" class="username" id="username">

  
    
	</div>
	 <label for="password">Password:</label>
	 
    <div class="div_textbox">
    
    <input name="password" type="password" class="password" id="password">
  
	</div>
    
<div class="button_div">

	<input type="submit" type="button" value="submit &raquo;" class="buttons">
	
	
	</div>

</form>
	</fieldset>
	
   <fieldset>
  <legend>Forgot Your Password?:</legend>
  
  <form action="login.asp?action=forgotpass&ordertracking=[otrack]" method="post" class="form" />
  
  <label for="username">Email:</label>
    <div class="div_textbox">
    
    <input name="email" type="text" class="username" id="username">

    
    </div>
    
	
<div class="button_div">

	<input type="submit"  value="resend password &raquo; " type="button" class="buttons">
    
	</div>

	</form>
	
	</fieldset>
	 
 
 <p>We will send you an email with a link to reset your password.</p>

    

	
</div>

<div class="clear"></div>

</div>

</body>
</html>



I changed a few of your CSS setting to centre the main container. I left aligned the fieldset.


body {
	background-image:url('/assets/images/bg-gradient.jpg');
              background-repeat: repeat-x;
	background-color: #ffa243;
	text-align: center;
	font: 85%/1.5 "tahoma", verdana, arial, helvetica, sans-serif;
	margin-top:5px;
	margin-left:0px;
}

#container {
  
   width: 900px;
   margin-left: auto;
   margin-right: auto;
   padding: 0 10px;
}



fieldset {
	border: 1px solid #000;
	padding: 10px;
              margin: 6px 0;
              text-align:left;
}

legend {
	font-weight: bold;
	line-height: 1.1;
	color:#fff;
	background-color: #666;
	border: 1px solid #333;
	padding: 2px 6px;
}

Thanks…

I was under the impression

margin: 0 auto;

was the same as

margin-left:auto
margin-right: auto

Was this IE specific?

No, you ae right. I just like to see what everything is doing in my code.

The markup is also pretty mangled up and you seem to have form controls outside of the FORM itself and duplicated ID Values, and conflicting type values on the INPUT, which won’t help your cause.

Yeah, I noticed that. It was a late night. :slight_smile: