Firefox styling of input fields changes size of field

I am using styling to highlight the contents of an input field depending upon which field is "in use". The text is put into bold and colored red.

In Internet Explorer and Safari, this effect is working as intended. However, in Firefox, the addition of the style caused the input field size to get larger. See the image for a clear example.

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

What styling would I use to compensate for this in Firefox?

Firefox showing larger input field size when styling is applied
jasimon9Asked:
Who is Participating?
 
blueghoztCommented:
did you see my example? it would seem that if the fields have CSS declarations for width and line-height then they will remain unchanged in Firefox when text is made bold by your routine - resizing only appears to occur when you are relying on the attribute size=30 to draw the width of the fields rather than a css style of width:200px; (for example)

anyway if your fix works for you well done!
0
 
Dave BaldwinFixer of ProblemsCommented:
The field is being adjusted to the size of the characters in the font.  Can you show us the code that is generating that?
0
 
scrathcyboyCommented:
When you change to BOLD in a mouse over or hover, this will always happen, as the BOLD font is higher and wider than the normal font.  I had to get rid of bolding on mouse over just because of this problem.  The color change doesn't affect it.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
scrathcyboyCommented:
The other way to do this is to pick a smaller font size -- like go down from 11pt to 10pt when you bold it.  There will still be some movement, but if you have to use bold, that is a better solution than seeing the menu pop in an out to a larger size.
0
 
scrathcyboyCommented:
And the input field is just mirroring the font width (so many characters allowed times char. width), so in this case you would be better not to use bold, or pick a smaller font size, as noted above
0
 
jasimon9Author Commented:
It seems to me that all four answers so far are missing the point. This problem only occurs in Firefox, on both Windows and the Mac. As I stated, the problem does not occur at all in Internet Explorer or Safari. I am expecting therefore that by omitting this part of the question, that any solution would deal with Firefox, but then cause a problem in these other two browsers.

I suppose I should have posted a screen shot of Internet Explorer in the original post, but I though my explanation would be sufficient. But I will added it now.

Please note: obviously I don't want to make it look proper in Firefox, only to have it not look proper in other browsers.
Internet-Explorer-showing-normal.png
0
 
jasimon9Author Commented:
You asked to see the code. The code is obscured in a way that would require irrelevant explanation. However its effect is to add the following styling:

   'color:red; font-weight:bold'
0
 
blueghoztCommented:
are you fixing the size of the inputs with css e.g. input[type="text"]{width:200px;} or just using HTML e.g. <input size="32" type="text" />

if you fix the size with CSS I don't think the emboldening would affect it.
0
 
jasimon9Author Commented:
I am using CSS. If you look at the two screen shots above, you see that there is a clear difference between the browsers. Firefox makes the field size larger. The code changes the CSS as described in my last comment.
0
 
blueghoztCommented:
you have shown us the snippet of CSS that gets added onto the active input but can you show us the CSS that applies to the inputs before these extra styles are applied? For example I have created a small page with 4 text inputs that are styled with CSS and I have then applied extra styles to the first one with red and bold and it still remains the same size in Firefox 3.6.12 - have a look here: http://sandbox.nubz.com/inputs.html - you will see I added line-height to the inputs to ensure bold text fits comfortably. Maybe this fix will do it for you?

This does lead me to believe either you are not using CSS to style the inputs originally or there is something within the CSS that is peculiar to Firefox, either way it would be good to see how the inputs are drawn on the page.
0
 
jasimon9Author Commented:
The difficulty in "showing the code" is that the contents of the field is loaded from serialized data that is loaded from a file. So the source code itself is not that useful to look at. There are two "code views" that might be helpful however.

The first "code view" is the php that changes the styling, which is shown in the first snippet, along with the related php that creates the html.

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

Open in new window


You can see under the comment where the styling is added. Then the php code is as follows:

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

Open in new window


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. In Firefox on Windows, the field size gets bigger, and that is where the screen shots come from. However, oddly, Firefox on the Mac makes the field size smaller. So I am attaching a screen shot of that too.

 Firefox on the Mac with a smaller field size after styling is applied
The second "code view" that could be helpful is a screen shot of what Firebug shows for the attributes of the field. I am expecting even before I prepare this, that some mozilla attributes may be seen. If we can figure out how to override these, then the problem will be solved. It is not that helpful to try to capture all the data from Firebug, but I do notice some differences in the "normal" fields and the ones with changed size. 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.

This is very much a kludge in my opinion. However, my next step is to put these overrides into the code. It might even be worth reporting this oddity to the Mozilla team because in my opinion this can't be compliant behavior.

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

Open in new window


After making this change, the field size no longer expands in Firefox, and all is well for the moment.

So I solved my problem myself, due to the "prodding" from the responders.
0
 
jasimon9Author Commented:
I see your point, I think. That is, use the CSS width rather than the HTML width, and no resizing will occur. Probably a better solution.
0
 
blueghoztCommented:
yes, as well as width I would also use line-height to ensure a comfortable growth space... good luck.
0
 
jasimon9Author Commented:
Since I solved my problem with a workaround, others have provided a better, more robust IMHO solution, I went ahead and backed my hack out and replaced it with the better solution, which is simply to use CSS width instead of the html size attribute. The better solution works for IE, Firefox on Win, Firefox on Mac, and Safari.

Pending some advice from the moderator, points to be awarded.
0
 
blueghoztCommented:
well I do hope you take into account the advice I gave in answer ID: 34197235 (and ID: 34187369) which was to use CSS and not HTML's size attribute for the inputs to avoid resizing. I had been hinting at the possiblity that I suspected you were not using CSS in the answers prior to your showing us your mark-up.
0
 
jasimon9Author Commented:
basically that is what I want to do - figure out how to split the points properly
0
 
jasimon9Author Commented:
Actually, I think I am going to just give the points to blueghozt for the correct solution implied in his post: do not use  HTML size then override it for Firefox; instead just forget about the HTML size and style with CSS width to begin with.

When that is done, you have a more robust solution, and the hack is not needed.
0
 
jasimon9Author Commented:
I changed my code to use CSS width to begin with, and eliminate the hack entirely.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.