614256 - When input field is styled bold, it becomes larger on Windows than non-styled field, and smaller on Mac than non-styled fields

Status: UNCONFIRMED

(Firefox :: General, defect)

Description

[Jeff Simon]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 GTB7.1
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 GTB7.1

This issue is for rendering compliance. I have developed a hack that overcomes the issue, which is explained below.

I searched for this bug using "input field style styling size bold". I found a few possibly related bugs but they were both marked "RESOLVED INVALID." The closest was #595534.

I have given a complete explanation of the problem at http://www.experts-exchange.com/Software/Internet_Email/Web_Browsers/Q_26629860.html along with screen shots, code snippets, and the hack needed to work around the problem.

For brevity and succinctness, I will adapt the explanation from that page below, but without the screen shots.

EXPLANATION

I am using styling to highlight the contents of an input field depending upon which field is "in use". The contents of the field are loaded from serialized data, so you cannot directly see the contents in the code. The highlighting is triggered when the user selects a related "Use" radio button. The purpose of the highlighting is to show which input field is "in use." There are several such input fields vertically stacked on the page all of the same size. The text of the "in use" field is put into bold and colored red.

In Internet Explorer and Safari, this effect is working as intended. The styling does not change the size of the input field. However, in Firefox, the addition of the style caused the input field size to get larger on Windows or smaller on the Mac. (See the screen shots on the page referenced above at Experts-Exchange.)

Again, in both IE and Safari, the styling does not change the size of the input field.

Here is the php that changes the styling of the input field:

if ($_POST['submitUse'])
{
	// load saved search criteria
	$query = <<<SQL
	SELECT data
	FROM search_saved
	WHERE userid = {$_SESSION['userid']} AND search_id = {$_POST['submitUse']}
SQL;
	$_SESSION['POST'] = unserialize(SQLOne($query));

	// set highlight of used search
	$aSavedSearchColor = array();
	$aSavedSearchColor[$_POST['submitUse']] = 'color:red; font-weight:bold';
}

The contents of the $_POST variable are then displayed on the page.

You can see under the comment where the styling is added. The php code that creates the html is as follows:

<td><input type="text" name="name$i" id="name$i" value="{$aSavedSearchName[$i]}" size="30" maxlength="30" style="{$aSavedSearchColor[$i]}" /></td>


As I have stated, this works for IE and Safari, but Firefox in some cases makes the field size larger as shown in the screen shots. In other cases, it makes the field smaller. Without a lot of testing, it appears that in Firefox on Windows, the field size gets bigger. In Firefox on the Mac makes the field size smaller. Screen shots of both are included in the above-reference Experts-Exchange page.

I used Firebug to examine the computed values of the various attributes. In the "Computed" pane, in the "Box Model" section, on the Mac the normal fields have a width of 216.5px. However, the shrunken field has 210px. On Windows, the box model for the normal field is 202px whereas the expanded field has 233px.

So my next obvious step was to try in Firebug to override the field widths. Setting it to 202px in Windows and 216.5 on the Mac in Firebug sized the text fields to exactly the right size.

To create a hack to solve my immediate problem, my next step was to put these overrides into the code. So I went ahead and did that, changing the php from the first snippet to the following:

if ($_POST['submitUse'])
{
	// load saved search criteria
	$query = <<<SQL
	SELECT data
	FROM search_saved
	WHERE userid = {$_SESSION['userid']} AND search_id = {$_POST['submitUse']}
SQL;
	$_SESSION['POST'] = unserialize(SQLOne($query));

	// set highlight of used search
	if ($is_firefox)
	{
		$FF_width = ($is_mac)  ? 'width: 216.5px;' : 'width: 202px;';
	}
	$aSavedSearchColor = array();
	$aSavedSearchColor[$_POST['submitUse']] = 'color:red; font-weight:bold; ' . $FF_width;
}

After making this change, the field sizes of all the input fields are the same whether they are in bold or not.

So with this hack, all is well at the moment. However, I am reporting this as a possible bug, because I am concerned that in the future if the behavior of Firefox is changed, the present hack may break down and mess up my page.


Reproducible: Always

Steps to Reproduce:
1. Create several input fields.
2. Set the styling on one of them to be bold.
3.
Actual Results:  
The styled input field enlarges or shrinks

Expected Results:  
The styled input field does not enlarge or shrink

Neither Safari nor Internet Explorer changes the size of the input field when it is styled.