Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal.
Now, I have an example illustrating the issue at hand. It took some time to clean up all the ASP.NET clutter in order to make the example readable, so any assistance would be greatly appreciated.
The code snippet for the site is as follows:
<!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=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<style type="text/css">
body {
font-family:arial, tahoma, sans-serif;
font-size:12px;
}
.riTextBox {
border:1px solid #aeaeae;
padding:2px 0 2px 1px;
font:11px arial,sans-serif;
width: 70px;
}
.something {
border: 0pt none;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<div class="WizardInput" style="width: 300px;">
<div>
<span style="display:inline-block;width:60px;">USD $</span>
<span style="white-space:nowrap;"><input class="riTextBox" type="text"><input class="something" type="text"><input class="something" type="text"><input type="hidden"></span>
<span style="white-space:nowrap;"><input class="riTextBox" type="text"><input class="something" type="text"><input class="something" type="text"><input type="hidden"></span>
<span style="white-space:nowrap;"><input class="riTextBox" type="text"><input class="something" type="text"><input class="something" type="text"><input type="hidden"></span>
</div>
</div>
</body>
</html>
This is how it appears on my computer:
And this is how it looks on other computers (like my girlfriend's):
The discrepancy is only about 1 pixel - changing 300px to 299px causes it to crash everywhere.
Does anyone have a solution? This is particularly troublesome for me since I need to test sites on Firefox for work.