• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 341
  • Last Modified:

Getting margin-left to cooperate between IE 9 and Firefox

I cannot seem to get this simple css and layout to work on both firefox and IE9.  This is a very simplified version of my normal css but it demonstrates the issue.  In IE the textbox appears in the div (this is where I want it).  In Firefox the textbox appears offset right from the div.  I do not doubt that IE is the culprit here, but what can I do to get this to render the same in both browsers (without taking the textbox out of the div)?

Thanks for any suggestions!

<!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>
	<style>
		input[type=text]
		{
			margin-left: 118px;
			width: 380px;
			background-color: Red;
		}
		.userNameDiv
		{
			position: fixed;
			top: 50%;
			left: 50%;
			margin-left: -118px;
			width: 380px;
			background-color: Green;
		}
	</style>
</head>
<body>
	<div class="userNameDiv">
		<input type="text" />
	</div>
</body>
</html>

Open in new window

0
nicolees
Asked:
nicolees
  • 3
  • 3
1 Solution
 
SSupremeCommented:
It looks the same in FF6 and IE9. Could you please provide FF version you have used, and confirm that you used IE9.
0
 
nicoleesAuthor Commented:
Firefox 6, and you are right about IE9.  It looks like I had my browser compatibility mode set to IE7.  So Firefox 6 and IE 9 behave the same.  IE7 and IE8 are different.

Fundamentally I want the textbox to sit inside the div on all 4 browsers (IE7, IE8, IE9, Firefox 6).  
0
 
SSupremeCommented:
Try to remove margin-left: -118px; from .userNameDiv.
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!

 
nicoleesAuthor Commented:
Removing margin-left: -118px from .userNameDiv makes all browsers behave the same, but leave the div in the incorrect location.  I need it offset left 118 pixels from center

This gives me what I want in IE8, IE9, Firefox
		input[type=text]
		{
			margin-left: 0px;
			width: 380px;
			background-color: Red;
		}
		.userNameDiv
		{
			position: fixed;
			top: 50%;
			left: 50%;
			margin-left: -118px;
			width: 380px;
			background-color: Green;
		}

Open in new window


This gives me what I want on IE7
		input[type=text]
		{
			margin-left: 118px;
			width: 380px;
			background-color: Red;
		}
		.userNameDiv
		{
			position: fixed;
			top: 50%;
			left: 50%;
			margin-left: -118px;
			width: 380px;
			background-color: Green;
		}

Open in new window


I would rather not conditionally load stylesheets based on browser type.  This seems like a simple issue, I guess I was hoping that, with a single stylesheet, I could render a textbox aligned and inside of a div at 118px left of center.
0
 
SSupremeCommented:
I cannot get what you want as it isn't in the content. I mean is there any better possibilities to place div in center?
But you can do this: <div class="userNameDiv"><div><input type="text" /></div></div>
or add rule into CSS file specially for IE7, after original rule: *+html input[type=text] {margin-left: 118px;}
0
 
nicoleesAuthor Commented:
Thanks, that is what I needed.  This css/html resolves my issue

<head>
	<style>
		input[type=text]
		{
			margin-left: 0px;
			width: 380px;
			background-color: Red;
		}
		.userNameDiv
		{
			position: fixed;
			top: 50%;
			left: 50%;
			margin-left: -118px;
			width: 380px;
			background-color: Green;
		}
		*+html input[type=text]
		{
			margin-left: 118px;
		}
	</style>
</head>
<body>
	<div class="userNameDiv">
		<input type="text" />
	</div>

</body>
</html>

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now