Background Image Aligns Differently In Ff, Than Ie

[mboehler3]

I am trying to style the login to my website. There is a discrepancy between Firefox and IE. IE looks great:But in FF, the two background images I've created for the login and pass do not align properly:Here is my HTML:

	<div style="float:right; text-align:right; background-image: url('/images/960/accenter/ac-loginbckgd.gif'); background-repeat:repeat-x; background-position: 0 11px;">	<form class="Login" name="frmMain" method="post" action="/accountant_access.asp"><input name="action" value="Edit" type="hidden"><input name="partnerCode" value="" type="hidden">				<img src="/images/clear.gif" height="5px" width="0" />				  <img src="/images/960/ac-login.gif" height="34" type="image" width="178" style="margin-left:-5px;">				  <img src="/images/clear.gif" height="1px" width="0" />				  <input id="UserName" name="UserName" class="inputboxusr" size="24" value="" tabindex="1">				<img src="/images/clear.gif" height="20px" width="0" />			<input id="Password" name="Password" class="inputboxpwd" size="24" type="password" tabindex="2">				<span class="accountBTM">				<input src="/images/960/ac-loginbutton.gif" name="submit" value="Submit" height="53" type="image" width="93" tabindex="3" style="margin-bottom:-8px;"> </span>				</form></div>

And here's my CSS:

.accountBTM {text-align:right;}.inputboxusr {border:0;background: transparent url('/images/960/accountant-center/ac_surechoice-user.gif') no-repeat top left;height: 34px;width: 98px; padding-top:10px; padding-left:10px; margin-bottom:-7px;}.inputboxpwd {border:0;background: transparent url('/images/960/accountant-center/ac_surechoice-pass.gif') no-repeat top left;height: 34px;width: 98px; padding-top:10px; padding-left:10px; margin-bottom:-7px;}

The code is pretty straight-forward... any suggestions are welcome, thank you!

[Kingy]

margin-bottom: -7px?Try getting rid of those and make itmargin-bottom: 7px instead.

[mboehler3]

margin-bottom: -7px?Try getting rid of those and make itmargin-bottom: 7px instead.

Yeah that's what I did to get it to look right in IE. When I remove the negative, or change it to positive 7, everything becomes mis-aligned in IE.

[thescientist]

the only thing i was going to add was just trying to separate your styles from content and then validate your code to some sort of strict DTD. I'm guessing you're using XHTML?

[mboehler3]

the only thing i was going to add was just trying to separate your styles from content and then validate your code to some sort of strict DTD. I'm guessing you're using XHTML?

I'm not able to validate the code because I'm testing on my server-side. I did however, separate the style that was in the code, which now looks like this:

	<div class="sclogin">	<form class="surechoiceLogin" name="frmMain" method="post" action="/accountant_access.asp"><input name="action" value="Edit" type="hidden"><input name="partnerCode" value="" type="hidden">				<img src="/images/clear.gif" height="5px" width="0" />				  <img src="/images/ac-login.gif" height="34" type="image" width="178" style="margin-left:-5px;">				  <img src="/images/clear.gif" height="1px" width="0" />				  <input id="UserName" name="UserName" class="inputboxusr" size="24" maxlength="12" value="" tabindex="1">				<img src="/images/clear.gif" height="20px" width="0" />			<input id="Password" name="Password" class="inputboxpwd" size="24" maxlength="12" type="password" tabindex="2">				<span class="accountBTM">				<input src="/images/ac-loginbutton.gif" name="submit" value="Submit" height="53" type="image" width="93" tabindex="3" style="margin-bottom:-8px;"> </span>				</form></div>

And the updated CSS:

.sclogin {float:right; text-align:right; background-image: url('/images/960/accountant-center/ac-loginbckgd.gif'); background-repeat:repeat-x; background-position: 0 11px;}

[bigsilk]

What version of IE are you using to view?

[mboehler3]

What version of IE are you using to view?

Both 8 and 6

[thescientist]

the validator works locally, tooedit: sorry, thats because I'm using Developer toolbar in FF. but you can copy/paste your code into the validator. (direct input)

[bigsilk]

Odd (loosely used) that it would not work in 8. 6 I can dig. I use a separate CSS for 6. Are you using the developer tools (F12) in 8 and setting it to view in 7 plain and quirks mode?

[sempervirent]

Yeah that's what I did to get it to look right in IE. When I remove the negative, or change it to positive 7, everything becomes mis-aligned in IE.

Welcome to the wonderful world of website design.This issue is why most of the sites you've ever visited use CSS hacks such that specifically target Internet Explorer. It will save you some time to assume that Firefox/Chrome/Safari are rendering things correctly (if only because they render things in a very similar way, thus knocking out three birds with one stone). Internet Explorer rendering problems are almost always due to incorrect implementation of W3 standards by Microsoft. So leave your margin for Firefox et al, add a CSS hack for Explorer, and move on to the next problem. If you want to be really clean and organized, you can put your Explorer CSS hacks in a separate CSS file and load it with conditional comments, so that it is only fed to users of Internet Explorer.

[mboehler3]

Odd (loosely used) that it would not work in 8. 6 I can dig. I use a separate CSS for 6. Are you using the developer tools (F12) in 8 and setting it to view in 7 plain and quirks mode?

Well it looks the same in 8 and 6. My problems are with Firefox/Safari/Chrome browsers

[mboehler3]

Welcome to the wonderful world of website design.This issue is why most of the sites you've ever visited use CSS hacks such that specifically target Internet Explorer. It will save you some time to assume that Firefox/Chrome/Safari are rendering things correctly (if only because they render things in a very similar way, thus knocking out three birds with one stone). Internet Explorer rendering problems are almost always due to incorrect implementation of W3 standards by Microsoft. So leave your margin for Firefox et al, add a CSS hack for Explorer, and move on to the next problem. If you want to be really clean and organized, you can put your Explorer CSS hacks in a separate CSS file and load it with conditional comments, so that it is only fed to users of Internet Explorer.

A lot of this makes sense to me, so now I am coding this to look right in Firefox, Chrome, et al. Running into a problem getting my two text boxes to align within the background image. For some reason it cuts off in Firefox:And in Chrome the boxes are pushed up just a little:Here is my updated CSS:

.inputboxusr {border:0;background-image: url('/images/960/accountant-center/ac-user.gif');background-color:transparent; background-repeat: no-repeat; height: 34px; width: 98px; background-position: 0 -20px;}.inputboxpwd {border:0;background-image: url('/images/960/accountant-center/ac-pass.gif');background-color:transparent; background-repeat: no-repeat; height: 34px; width: 98px; background-position: 0 -20px;}.sclogin {float:right; text-align:right; background-image: url('/images/960/accountant-center/ac-loginbckgd.gif'); background-repeat:repeat-x;}

Why is the image cutting off at the top?

[dsonesuk]

I don't really know what was causing the 'top edge being cut-off' problem, but i started from scratch, and came up with this, tested in all browsers except IE8.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">form, input {padding:0; margin:0; border:none;}.inputboxusr, .inputboxpwd{width: 98px;height:34px; float:right; margin-right:20px;}.inputboxusr { background-image: url('ac-user.gif');background-repeat: no-repeat; }.inputboxpwd { background-image: url('ac-pass.gif'); background-repeat: no-repeat;}.inputboxusr input, .inputboxpwd input { margin: 9px 7px 0 7px; width:85px;}.ac-login { float:right; width:55px; margin-top: -12px; margin-right:20px;}.ac-login input{height:55px; width:55px; float:right; position:relative; z-index:99;/* position and z-index required for ie6*/ }.sclogin { text-align:right; background-image: url('ac-loginbckgd.gif'); background-repeat: no-repeat; border:0; width: 507px; height: 55px; border:1px solid #fff;}.sclogin_inner { height:36px; margin-top: 10px;}</style></head><body><form action="/accountant_access.asp" method="post" name="frmMain" class="surechoiceLogin" id="frmMain"><input name="action" value="Edit" type="hidden" /><input name="partnerCode" value="" type="hidden" /><div class="sclogin"><div class="sclogin_inner"><div class="ac-login" ><input src="ac-login.gif" name="submit" value="Submit" type="image" tabindex="3" style="" /></div><div class="inputboxpwd"><input id="Password" name="Password" size="24" maxlength="12" type="password" tabindex="2" /></div><div class="inputboxusr"><input id="UserName" name="UserName" size="24" maxlength="12" value="username" tabindex="1" /></div></div></div></form></body></html>