Solved

IE6 and FF render the same CSS page differently

Posted on 2009-05-19
6
304 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now