|
View Full Version : Font family in textfield
mystycs 04-17-2010, 02:40 AM For some reason the textfield font is different than what i specified in the body, if i specify font-family:Arial, Helvetica, sans-serif;
and font-size: 14px;
in the #ask .questionfield CSS part, it changes the size of my textfield and messes up with it on different browsers, how can i make it so i can specify the font family and font size for the textfield without any problem, because if i do it in .questionfield it doesnt work properly. Where do i put those css so i can have that.
Here is the code below.
<head>
</head>
<style type="text/css">
#body {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
#ask {
float:left;
width:360px;
margin-bottom: 15px;
}
#ask .questionfield {
border: 0;
outline:0;
background-color:#f1faff;
color:#74797d;
padding: 10px;
}
</style>
<body>
<div id="ask">
<form>
<textarea name="question" cols="100" rows="5" class="questionfield" onkeydown="textCounter(this.form.question,this.form.remLen,255);" onkeyup="textCounter(this.form.question,this.form.remLen,255);"></textarea>
</form>
</div>
</body>
</html>
Thanks
Palmetto Innovations 04-17-2010, 04:26 AM I'm not sure I fully understand what you're saying, but first, get rid of the # in front of body as it is not needed and may be giving you some issues. Do you want to only change the size of the font in that text field, or just for the page and not the text field? If you set something globally with the body selector, it will affect everything. If you want to overrule that you'll have to set something different in your other selector. Also, instead of #ask .questionfield, try using form.questionfield - that is the proper way of selecting that item.
mystycs 04-17-2010, 06:10 AM I want to change the font family in the text field, because if i specify Arial in body it ends up being different for some reason in the textfield, also making the font size would be good too. If i specify the the font family in the .questionfield it makes the width much larger than what i specified it.
mystycs 04-17-2010, 11:55 PM damnit still cant figure it out, anyone got an idea?
sgarbus 04-18-2010, 12:13 AM Try this, it should work:
#ask input {
border: 0;
outline:0;
background-color:#f1faff;
color:#74797d;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
And remove the class property from the textfield box.
You should also set a specific width if you're looking for it to be a certain size. Let me know if it works! :D
mystycs 04-18-2010, 12:20 AM I did did that and removed the class it doesnt format it at all. Maybe i missed something.
<head>
</head>
<style type="text/css">
#body {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
#ask {
float:left;
width:360px;
margin-bottom: 15px;
}
#ask input {
border: 0;
outline:0;
background-color:#f1faff;
color:#74797d;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
</style>
<body>
<div id="ask">
<form>
<textarea name="question" cols="100" rows="5" onkeydown="textCounter(this.form.question,this.form.remLen,255);" onkeyup="textCounter(this.form.question,this.form.remLen,255);"></textarea>
</form>
</div>
</body>
</html>
sgarbus 04-18-2010, 12:23 AM Try using input instead of #ask input... if it doesn't format then, there's something wrong and I can look a bit more.
mystycs 04-18-2010, 12:25 AM Still the same yea its really wierd.
<head>
</head>
<style type="text/css">
#body {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
#ask {
float:left;
width:360px;
margin-bottom: 15px;
}
#ask *input* {
border: 0;
outline:0;
background-color:#f1faff;
color:#74797d;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
</style>
<body>
<div id="ask">
<form>
<textarea name="question" cols="100" rows="5" onkeydown="textCounter(this.form.question,this.form.remLen,255);" onkeyup="textCounter(this.form.question,this.form.remLen,255);"></textarea>
</form>
</div>
</body>
</html>
sgarbus 04-18-2010, 01:38 AM It should be input { and nothing else.
webhoststudent 04-18-2010, 02:17 AM no, he is not using an input element, he is using a textarea element, so it should be
#ask textarea {
border: 0;
outline:0;
background-color:#f1faff;
color:#74797d;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
mystycs 04-18-2010, 05:26 AM no, he is not using an input element, he is using a textarea element, so it should be
#ask textarea {
border: 0;
outline:0;
background-color:#f1faff;
color:#74797d;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
Thats what i have been doing the whole time, but whats wierd about this is that if i have this, then my width of the textfield by the cols="100" i defined will be less, and if you look at safari it will be the actual cols="100", but if you look at it then on firefox or google chrome the width will be shorter and a bit different on each browser. I just want to make it so the textfield is arial, has the background color, is font size 14, and is 100 cols wide. But if is specify the CSS like that it is different on every browser. Its really strange.
WickedFactor 04-18-2010, 06:10 PM I would just use css to define the height and width of the textarea. In the <textarea> tag, state but don't specify the cols and rows. It should then pull the height and width specified in the css.
<textarea cols="" rows=""></textarea>
mystycs 04-18-2010, 07:43 PM I would just use css to define the height and width of the textarea. In the <textarea> tag, state but don't specify the cols and rows. It should then pull the height and width specified in the css.
<textarea cols="" rows=""></textarea>
works =) thank you so much haha such a small thing like that and i didn't realize.
|