Solved

IE6 and FF render the same CSS page differently

Posted on 2009-05-19
6
307 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
  • 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 500 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 39
Index on a Table 6 25
Flex container exceeding stated width in IE11 4 15
Word, Excel, Access icons 4 17
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 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