Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • Last Modified:

IE6 and FF render the same CSS page differently

Hi - I need to have a CSS expert look at this page to explain to me why it displays differently in IE6 and FF.

http://www.newpixelcity.com/F/indexWithoutTable.html

The page was "built" and styled for IE6 primarily (customer requirement). I'm using an IE conditional statement but don't know if I'm using it correctly.  I also don't know if the problem is related to the conditional sheet.

Here's a detailed list of the problems I see (if you use the link, you'll see them too):

In IE 6 the words "User ID" and "Password" line up perfectly with text-align:left. In FF they are slightly uneven.

In IE6 the two input fields line up perfectly, one above the other. Even though the space between the label and the input field is different, the input fields line up. In FF the two input fields are way out of line with each other. Why?

I've also used sprite-type CSS rollover image replacements for all of the buttons. I use one graphic that has the button's off state at the top and the over state on the bottom. Using CSS, the image shifts from the Off to the Over when the user hovers over the image. The problem is that sometimes (IE6) causes them to blink horribly before shifting to the over state - and sometimes they just disappear. In FF - they don't change at all! Why not?

I appreciate some expert eyes on this page.  How can I fix this page?

Thanks
0
dzash2000
Asked:
dzash2000
  • 3
  • 2
1 Solution
 
Delphineous SilverwingGood Ol' GeekCommented:
My machine is using IE6 - The User ID prompt is slightly forward of Password.  Mind you, we're only talking pixels forward not letters.
My Firefox has Password forward of User ID about half the width of the letter "U" and the Input Boxes are offset the same.
For the fun of it, I checked it in IE8 on my virtual machine.  It has identical results to FF.
Paste your CSS Code and HTML code to this conversation so that we can review it as written.  If you are calling any other scripts, it'd help to include those.
0
 
dzash2000Author Commented:
Delphineous - Thanks for the reply.
Yes - I realize that the differences are small but there cannot be ANY difference.  Thanks for checking with IE8.  Probably correcting for FF will correct for IE8 as well.
As I said - this was coded expressly for IE6 so the non-standards compliant issues have to be fixed for FF.

It's a mess and I appreciate your help.  I've attached 3 files.  The html, the main.css and the ie.css.  

Thanks again.
d2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FFFFFFFFF</title>
 
 
 
 
<link href="_css/main_050109.css" rel="stylesheet" type="text/css" media="screen" />
 
 
 
<!--[if LTE IE 6]>
 <link href="_css/ie.css" rel="stylesheet" type="text/css" media="screen" />
 
<![endif]-->
 
 
 
 
 
 
 
 
</head>
 
<body>
 
 
 
<form action="#" method="post"  id="loginForm1">
 
 
 
 
<div id="widthControl">
  <div id="header" style="left: 0px; top: 0px">
        <div id="pLogo"> <a href="#">
        <img src="_images-layout/logo.gif" alt="logo" class="noborder"/>
        </a>        
        </div> <!--close pLogo -->
        
        <div id="fLogo"><a href="#">
        <img src="_images-layout/fLogo.gif" alt="Flogo." width="185" height="71" class="noborder" />
        </a>        
        </div> <!--close fLogo div-->
        
        
        
  </div><!-- end #header -->
  <div class="clear"></div>
  
 
 
<div id="mainContent" style="margin-bottom:100px;">
  
  
	<div id="leftCol">
		
		<h1 style="margin-left:6px;">Log In </h1>
						
		<div id="logIn_graphic_bg">
			
			
					
					
					<div class="labelAndFieldPlain" style="width:330px; 
						margin:16px 0 0 16px; padding:0;">		
					
							<label for="userID" class="cmxh" 
								style="vertical-align:top; width: 6em; 
									border:0; text-align:left; margin-right:6px;
									padding:0;" >
							    User ID
							</label>
						
							<input id="userID" name="userID" type="text" 
							style=" width:200px;  font-size:1em;"/>
								
					</div>	<!-- /labelAndField -->
					
					
					
					
					
					<div class="labelAndFieldPlain" style="width:330px; 
						margin:6px 0 0 12px; padding:0;">		
					
							<label for="password" class="cmxh" 
								style="vertical-align:top; width: 6em; 
									border:0; text-align:left; margin-right:8px;" >
							    Password
							</label>
						
							<input id="password" type="text" name="password"  
							style=" width:200px;  font-size:1em;"/>
								
					</div>	<!-- /labelAndField -->
					
	
	
	
					<div class="labelAndFieldPlain" style="width:300px; 
						margin:10px 0 0 50px; padding:0;">	
											
							<a href="#" 
							  title="LogIn" name="Login" 
							 			class="btnPair Login" 
							 			style="margin:0 12px 0 0; float:left;">
							 <span>Log In button.</span>
							</a>
							
		
									
							<a href="#" 
							 	title="ForgotPassword" name="Forgot_Password" 
							 			class="btnPair131 ForgotPassword" 
							 			style="margin:0 12px 0 0; float:left;">
							 <span>Forgot Password.</span>
							</a>
			
	
					</div>
					
	
					
	
					<div class="labelAndFieldPlain" style="width:300px; 
						margin:10px 0 0 50px; padding:0;">	
			
				
							<a href="#" 
							 	title="RegisterNewUser" name="RegisterNewUser" 
							 			class="btnPair131 RegisterNewUser" 
							 			style="margin:0 12px 0 0; float:left;">
							 <span>Register New User.</span>
							</a>
					
					
					
							<a href="#" 
							 	title="PublicUserLogin" name="PublicUserLogin" 
							 			class="btnPair131 PublicUserLogin" 
							 			style="margin-top:0; float:left;">
							 <span>Public User Login.</span>
							</a>
	
					</div>
		
			
				
		</div>  <!-- //logIn_graphic -->
 
 
 
 
    
</div><!-- end leftCol -->
 
 
<div id="rightCol">
<h3> About this mess</h3>
<p>On this page the elements within the LogIn graphic will display much different in IE6 than in FF.  The page was "built" and styled for IE6 primarily.  I'm using an IE conditional statement but don't know if I'm using it correctly.</p>
<br />
 
 
<p>In IE 6 the words "User ID" and "Password" line up perfectly with text-align:left.  In FF they are slightly uneven.</p>
 
<br />
 
<p>In IE6 the two input fields line up perfectly, one above the other.  Even though the space between the label and the input field is different, the input fields line up.  In FF the two input fields are way out of line with each other.</p>
 
<br />
 
<p>I've also used sprite-type CSS rollover image replacements for all of the buttons. I use one graphic that has the button's off state at the top and the over state on the bottom.  Using CSS, the image shifts from the Off to the Over when the user hovers over the image.  The problem is that sometimes (IE6) causes them to blink horribly before shifting to the over state - and sometimes they just disappear.  In FF - they don't change at all!  Why not?</p>
 
<p>I've struggled to layout this simple form using CSS rather than a table and to make rollovers without Javascript.  I figured if I could get this to work on one page I could re-use the same techniques throughout the project.  Yikes! Not worth the effort!?!</p>
 
 
</div> <!-- end rightCol -->
    
    
  </div><!-- end #mainContent -->
  
  <div class="clear"></div>
  
			<div id="footer">
				<p>
Footer
 
				</p>
	
			</div> <!-- end #footer -->
		
</div><!-- end #widthControl -->
</form>
</body>
</html>
 
 
//////////////////////////////////////////////////////////////////////////////////////
 
 
@charset "UTF-8";
 
 
body {	
	padding: 0;	
	margin: 0;
	font-size: 100%;
	font-family: Verdana, "Lucida Sans", Arial, sans-serif;
	background: #5e5e5e;
	text-align: center;	
	color: #0a0a0a;
	}
 
 
/* ------------- Primary containing block for all page areas. 
					general.css@faa.gov. AKA a "wrapper".----------------*/			
	
#widthControl {
	position:relative;
	background-color:#fff;  
	margin:0 auto; 
	text-align:left; 
	width:950px;
	}
 
 
 
/* ---------- header div ------------*/
#header { 
	position:relative;
	left: 0px; top: 0px;
	height:111px;
	background-image:url("../_images-layout/tile_header.jpg");
	background-repeat:repeat-x;
	padding: 0; 
	margin:0;
	} 
	
 
#pavairLogo {
	height:66px; 
	width:206px; 
	float:left;
	margin-top:15px;
	margin-left: 37px;
	}
	
	
#pavairLogo a:link {
	border:0px;
	text-decoration:none;
	}
	
	
#faaLogo {
	height:71px; 
	width:185px; 
	float:right;
	margin-top:15px;
	margin-right:25px;
	}
 
 
 
/* ---------- headings ------------*/
 
h1, h2, h3, h4 {
	color:#3e3e3e;
	margin:0;
}
 
 
 
h1 {
	color:#333;
	font-size: 1.1em;
	padding-bottom: 6px; 
	}
	
 
h2 {
	font-size:.9em;
}
 
 
h3 {
	font-size:.9em;
	font-weight:bold;
}
 
 
h4 {
	font-size:.85em;
	font-weight:bold;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*----||||||||||||| clear floats on previous content |||||||||||||||||----*/
 
 
.clear {  /*use this class within any div to create a new "ceiling" for whatever comes next.  
			Floated elements above this cannot intrude on a cleared element */
	clear: both;
	height: 0; 
	content: ".";
	}
 
	
 
 
 
 
 
 
 
 
	
/*----||||||||||||| main content |||||||||||||||||----*/
 
 
	
#mainContent {
	/*
	position: relative;
	margin: 0;
	
	*/
	padding: 0;	
	overflow: auto;	
	width: 100%; /* required to trigger hasLayout in IE */
}
 
 
#mainContent p, td p, ul{
	font-size: .85em;
	color: #5e5e5e;
	font-family: Verdana, "Lucida Sans", sans-serif;
	line-height: 150%;
}
 
 
#mainContent p a {
	padding:0;
	text-decoration: underline;
	color: #3366cc;
	}
 
 
#mainContent p a:hover {
	color: #fff;
	background-color:#3366cc;
	}
 
 
 
 
 
/* -----------for 2 column layout such as index.aspx----------*/
#mainContent #leftCol {
	float: left;
	width: 430px;
	margin-top:25px;
	margin-left:37px;
	}
 
 
#mainContent #rightCol {
	width: 400px;
	float: left;
	margin-left: 20px;
	margin-top: 25px;
	}
 
 
 
 
  
  
  
  
  
  
  
/*----------- field styles  -----------------*/
 
 
 
.labelAndFieldPlain {
	margin:0 8px 0 0;
	padding:3px 0 6px 6px;
	float:left;
	font-size:1em;
	}
 
 
.cmxh {  /* label style and elements in the fake header row on Work  */
	font-family:Verdana, "Lucida Sans", sans-serif;
	display:inline-block;
	font-size:.85em;
	font-weight:bold;
	margin: 0;
	color: #353535;
	text-align:left;
	border-left:1px solid #5e5e5e;
	padding:4px 0 4px 6px;
}
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
/*---- footer ----*/
 
#footer { 
	padding: 0 10px; 
	background:#DDDDDD;
	padding: 10px 0;
	} 
 
 
#footer p {
	font-family: Verdana, "Lucida Sans", sans-serif;
	text-align:center;
	font-size: .8em;
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	
	}
 
#footer a {
	padding: 20px 9px;
	text-decoration: none;
	color: #000;
	}
 
 
#footer a:hover {
	background: url("../_images-layout/topNav_26x150_over.jpg") no-repeat center center;
	color: #fff;
	}
	
	
	
 
 
 
	
/* -------||||||||||  index.aspx - log in page ||||||||||||--------- */	
 
 
#logIn_graphic_bg {
	background-image:url('../_images/login-panel_400x150.gif');
	background-repeat:no-repeat;
	height:150px;
	width:400px;
	}
	
	
	
/* --------------- btnPair ---------------*/
 
.btnPair
{
	display: inline-block;
	width: 54px;
	height: 20px;
	margin-top: -22px;
}
 
 
.btnPair131
{
	display: inline-block;
	width: 131px;
	height: 20px;
	margin-top: 6px;
}
 
 
.btnPair:hover, .btnPair131:hover  /* shifts the image up */
{ 
  background-position: 0 -20px;
}
 
.btnPair:focus, .btnPair131:focus  /* shifts the image up */
{ 
  background-position: 0 -20px;
}
 
.btnPair span, .btnPair131 span 
/* holds the text for SE/JAWS/readers but hides it behind btn */
{
  display: none;
}
 
 
.btnPair.Login{
	background: url("../_images/btnPair54x40_Login.gif") no-repeat 0 0;
	}
 
 
.btnPair131.ForgotPassword{
	background: url("../_images/btnPair131x40_ForgotPassword.gif") no-repeat 0 0;
	}
	
.btnPair131.RegisterNewUser{
	background: url("../_images/btnPair131x40_RegisterNewUser.gif") no-repeat 0 0;
	}
	
	
	
.btnPair131.PublicUserLogin{
	background: url("../_images/btnPair131x40_PublicUserLogin.gif") no-repeat 0 0;
	}
 
	
	
	
	
	
	
	
	
	
	
	
	
/* ---------- ||||||||  misc  ||||||| ------------ */	
	
.noborder { /* for images that are links */
	border: 0;
}
 
a, span {
	outline:none;
	}
 
 
 
 
 
 
	
	
/////////////////////////////////////////////////////////////////////
 
 
 
 
 
 
#mainContent #leftCol {
	margin-top:12px;
	margin-left:25px;
	}
 
 
#pavairLogo {
	margin-top:15px;
	margin-left:25px;
	}
 
 
 
 
 
#header {
  height: 111px;
  he\ight: 111px;
}
 
 
#topNav ul {
	margin:0;
	}
 
#topNav li {
	padding:3px 0 12px 0;
	}
 
input{
	border: 1;
	height: auto;
	margin-right: 16px;
	font-size: .7em;
}
 
fieldset fieldset input {
	border: none;
}

Open in new window

0
 
David S.Commented:
How strange! It's hard for me to believe that someone who writes valid XHTML 1.0 Strict and even uses label elements correctly would code his stylesheets for IE6 first.

Coding for IE6 or IE7 first is a lot more work than coding for a more standards compliant browser first.

The first thing to do is remove those inline styles. Right now they are at least contributing to the misalignment of those labels and text fields.

The rollovers aren't working in Firefox but are in IE6 because of an IE6 bug. IE6 sees ".btnPair.Login" as just ".Login", but Firefox sees it correctly and it overrides the :hover rules in the stylesheet. Move the :hover and :focus rules after the ones that set the background images.

There is one odd thing about your markup though. You used <a>s for those buttons where <input> or <button> elements would be more appropriate.  Use whatever:hover (http://www.xs4all.nl/~peterned/csshover.html) so that :hover will work on more elements than just <a>s in IE6.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
dzash2000Author Commented:
Kravimir - Thanks for the suggestions.

>>How strange! It's hard for me to believe that someone who writes valid XHTML 1.0 Strict and even uses label elements correctly would code his stylesheets for IE6 first.<<

Strange?!?  Its STUPID!  I was a total moron to take my customer serious when their first requirement was IE6 compatible. I wanna strangle the guy who said "the customer is always right".

Anyway - in between pounding my head against the wall I will work on all your excellent suggestions and get back to you.

Thanks again.
d2
0
 
dzash2000Author Commented:
Kravimir - thanks for the solutions... and the wake-up call.  Our exchange was useful for me on a number of levels.
Moving the :hover statements was exactly what I needed.  I also took some time to move around the styles in general so that FF worked FIRST and then IE got its exceptions (what I should have done in the first place!).  There is a lot of adjusting to do - so I will not be posting all the results for some time.
Thanks again.
0
 
David S.Commented:
You're welcome.

At least you'll know better next time.

And yeah, in retail the customer may always be right, but in this industry the client often doesn't know enough to make well-reasoned decisions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now