Jump to content

Background Image Aligns Differently In Ff, Than Ie


mboehler3
 Share

Recommended Posts

I am trying to style the login to my website. There is a discrepancy between Firefox and IE. IE looks great:sclogin-ie.gifBut in FF, the two background images I've created for the login and pass do not align properly:sclogin-ff.gifHere 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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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)

Edited by thescientist
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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:overlapped-login.gifAnd in Chrome the boxes are pushed up just a little:overlapped-loginchrome-1.gifHere 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?

Link to comment
Share on other sites

ac-login.gifac-user.gifac-pass.gifac-loginbckgd.gifI 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> Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...