?
Solved

IE6 and FF render the same CSS page differently

Posted on 2009-05-19
6
Medium Priority
?
318 Views
Last Modified: 2012-05-07
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
Comment
Question by:dzash2000
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 19

Expert Comment

by:Delphineous Silverwing
ID: 24426239
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
 

Author Comment

by:dzash2000
ID: 24426762
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
 
LVL 42

Accepted Solution

by:
David S. earned 2000 total points
ID: 24427267
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dzash2000
ID: 24428013
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
 

Author Closing Comment

by:dzash2000
ID: 31583191
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
 
LVL 42

Expert Comment

by:David S.
ID: 24439411
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

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question