Why are two text boxes on same page using different fonts?

Question

0.00/5 (No votes)

See more:

Hi,

I have two asp:textbox controls in the same <div> on a webpage. The first, which is single-line, correctly uses the font that I set in a site-wide stylesheet. The second, which is set to multi-line, changes the font to what looks like Times Roman.

If I use the F12 developer inspection tools in IE, the font is displayed as I would expect as the system-wide Helvetica, but on the screen it is Times. If I tick and untick the box next to this style, all the text on the screen switches between Helvetica and Times and back again as expected, but the text in the multi-line box always stays the same (Times).

Can anyone explain why this single textbox might be ignoring the site-wide setting, and also apparently ignoring what the developer tools believe its font should be?

Any help would be very much appreciated.

Kind wishes ~ Patrick

Posted 10-Jan-14 7:40am

Patrick Skelton

Add a Solution

Comments

Paramaa 10-Jan-14 14:10pm

Could you able to put your global used styles here

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Paramaa · Answer 1 · 2014-01-10T08:09:00

Solution 1

Hotcode the style inside the textbox like this

<asp:TextBox ID="TextBox1" runat="server" Text="sometext" TextMode="MultiLine" Style="font-family: Arial" />

If it is not working put your styles with not important specification.

XML

<style type="text/css">
                .font
                {
                    font-family: Arial !important;
                }
            </style>
            <asp:TextBox ID="TextBox1" runat="server" Text="sometext" TextMode="MultiLine" CssClass="font" />

Posted 10-Jan-14 8:09am

Paramaa

Comments

Patrick Skelton 10-Jan-14 14:31pm

Thanks for that. I wanted to avoid that for obvious reasons, and mainly because I don't like not understanding what is going on. The style works if I apply it directly to the textbox, but if I move it up just one level, to the enclosing div, it is ignored.

I notice that when the textbox is made multi-line its HTML becomes a textarea instead of an input. Time for a dig around the internet to see if this is a known issue. Anyone come across this? Seems monumentally pants to me.

Patrick Skelton 10-Jan-14 14:42pm

Mmm... I have found a few references to this problem. It seems the only solution that will work for IE8 and earlier is to set a site-wide font that includes the textarea HTML element. That seems to work okay. You can also set it to inhetit, but apparently older IE versions don't recognize this.

Anyway, thanks for the help.

- Patrick

Why are two text boxes on same page using different fonts?

1 solution

Solution 1

Add your solution here

Preview 0

Why are two text boxes on same page using different fonts?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us