form element question 1

GiffordS · Sep 27, 2006

I have a form that is within a span. The span sets the font-size at 10px, which works wonderfully for the text that is inside the form. The problem is that the form elements; a text box and a submit button, are both rendered as if the font-size was 12px, which makes them look oversized in the context of the form. I'm wondering if there is any way to set the size of these elements either at the element level or the form level. All I can find online are referrences to the size of the input box, which is not what I'm looking for at all. It's not the width, it's the height. Of course, if the height were set to 10px it would effect the width as well, which is actually a good thing. Anyway, given a generic piece of code such as

Code:

<span id="tenpixtext"><form method="post" action="somescript.php">text  <input type="text" name="name" size="10" /><br>
<input type="submit" value="click here" /></form></span>

and assuming that the font size in the span is set to 10px, how can I keep my input box and submit button from towering over the text?

cLFlaVA · Sep 27, 2006

set the font-size attribute in your css. something like:

Code:

input {
    font-size: 10px;
}

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

GiffordS · Sep 27, 2006

Thanks. Curious though, this worked when I did it for the entire document

Code:

input{
font-size: 10px;
}

But when I tried to set it just for this particular division...

Code:

#log input{
font-size: 10px;
}

It had no effect at all. Is there a division-level way of setting this? I mean, I use this CSS on numerous pages and there may be an event where I would like to set the input sizes to say 11 or 12 or whatever. It would be nice to have that control at the division level.

kaht · Sep 27, 2006

Is there a division-level way of setting this?

Absolutely. The syntax you provided should work fine. What it's saying is that all <input> tags that are children of a tag with the id of "log" will get the applied style. Here's a small example of how you can target styles using ids and classes, it should give you a rough idea of how it works:

Code:

<style type="text/css">

p.p1 {
   font-size:8pt;
   color:#ff0000;
}

#div1 p {
   font-size:12pt;
   color:#0000ff;
}

#div2 p {
   font-size:16pt;
   color:#00ff00;
}

#div2 p.p1 {
   font-size:20pt;
   color:#ff00ff;
}

</style>

<body>
   <p class="p1">I have the class p1, but I'm not inside a div</p>
   <div id="div1">
      <p>I am a paragraph of div1</p>
   </div>
   <div id="div2">
      <p class="p1">I am paragraph 1 of div2, and I have the class p1</p>
      <p>I am paragraph 2 of div2</p>
   </div>
</body>

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

Vragabond · Sep 27, 2006

kaht said:
What it's saying is that all <input> tags that are children of a tag with the id of "log" will get the applied style.

Actually, it is descendants, not children. It applies to all the elements within the element, not just first level children. A great tool to translate complex css selectors into common English (and Spanish) is here:

http://gallery.theopalgroup.com/selectoracle/

ChrisHunt · Sep 28, 2006

I have a form that is within a span

That's why it's not working. <form> is a block level element, <span> is inline. So when you nest one inside the other, browsers may assume you meant to do this:

Code:

<span id="tenpixtext">[red]</span>[/red]
<form method="post" action="somescript.php">
text  <input type="text" name="name" size="10" /><br>
<input type="submit" value="click here" /></form>
[red]<span>[/red]</span>

It should work if you use a <div> instead of a span, but why bother with either - just give the form an id instead:

Code:

<form method="post" action="somescript.php" id="tenpixtext">
text  <input type="text" name="name" size="10" /><br>
<input type="submit" value="click here" /></form>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

form element question 1

GiffordS

Programmer

cLFlaVA

Programmer

GiffordS

Programmer

kaht

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor