Jump to content

Small difference between Win7 and WinXP


ShadowMage

Recommended Posts

I have a div with some inputs as follows:

<div id='custData' class='quoteInfo container' style='width: 36%;'>	<div class='header infoHeader'>Customer:</div>	<input name='CustName' value='' />	<div class='header infoHeader'>Address:</div>	<input class='quoteInput' name='Address1' value='' />	<div class='header infoHeader'> </div>	<input class='quoteInput' name='Address2' value='' />	<div class='header infoHeader'>City, State, Zip:</div>	<input class='quoteInput' name='CustCity' value='' style='width: 95px; margin: 2px 0px 0px 5px;' />	<input class='quoteInput' name='CustState' value='' style='width: 30px; margin: 2px 0px 0px 0px;' />	<input class='quoteInput' name='CustZip' value='' style='width: 51px; margin: 2px 0px 0px 0px;' /></div>

I'm running FireFox version 3.6.13 on both Win7 and WinXP, but for some reason the city/state/zip inputs are coming up a little bit short in Win7. In IE8 (for XP and 7), and FireFox on XP those three inputs add up to the same width as the other three inputs. I've really no idea how to fix it so that FF on 7 lines up with the rest. I noticed that there is some default space between each input, even though margins are set at 0. Perhaps this space is the culprit, and if it is how do I get rid of it?Here's the relevant CSS:

input, select {	font-family: "Times New Roman", serif;	font-size: 16px;	text-align: left;	margin-left: 5px;	padding: 1px;	position: relative;	z-index: 10;}input.quoteInput {	margin-top: 2px;}div.quoteInfo {	float: left;	border-style: solid;	border-width: 1px;	border-color: #000000;}#custData input {	width: 196px;}#quoteData input {	width: 252px;}div.infoHeader {	width: 115px;	margin-left: 0px;	margin-bottom: 2px;	margin-top: 3px;}div.header {	display: inline-block;}.header {	margin: 0px 5px 0px 0px;	font-weight: bold;	text-align: right;}

EDIT: Whoops, forgot a small portion of the CSS.

Link to comment
Share on other sites

The space between the inputs is the result of there being a line break in the code between the inputs. If you put the code for the inputs all on the same line then you shouldn't have that problem.About the sizes, it's difficult to style inputs because they vary depending on the operating system. You can try removing or specifying a border for all the inputs with CSS. Adding border: 0; might help, because a lot of operating systems give the inputs a border by default.

Link to comment
Share on other sites

About the sizes, it's difficult to style inputs because they vary depending on the operating system. You can try removing or specifying a border for all the inputs with CSS. Adding border: 0; might help, because a lot of operating systems give the inputs a border by default.
This I think was the issue. Because when I put explicit widths, margins, padding, and borders on the elements, then everything lined up. Previously, I had not defined the borders.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...