Solved

Firefox styling of input fields changes size of field

Posted on 2010-11-21
18
1,249 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:jasimon9
  • 9
  • 5
  • 3
  • +1
18 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 34183765
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184100
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184102
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184106
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
 

Author Comment

by:jasimon9
ID: 34184490
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
 

Author Comment

by:jasimon9
ID: 34184496
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
 
LVL 6

Expert Comment

by:blueghozt
ID: 34187369
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
 

Author Comment

by:jasimon9
ID: 34190729
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
 
LVL 6

Expert Comment

by:blueghozt
ID: 34195253
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:jasimon9
ID: 34197155
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
 
LVL 6

Accepted Solution

by:
blueghozt earned 250 total points
ID: 34197235
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
 

Author Comment

by:jasimon9
ID: 34197529
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
 
LVL 6

Expert Comment

by:blueghozt
ID: 34197550
yes, as well as width I would also use line-height to ensure a comfortable growth space... good luck.
0
 

Author Comment

by:jasimon9
ID: 34231800
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
 
LVL 6

Expert Comment

by:blueghozt
ID: 34231860
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
 

Author Comment

by:jasimon9
ID: 34234410
basically that is what I want to do - figure out how to split the points properly
0
 

Author Comment

by:jasimon9
ID: 34234526
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
 

Author Closing Comment

by:jasimon9
ID: 34234534
I changed my code to use CSS width to begin with, and eliminate the hack entirely.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now