Overly tall <input type=text> despite setting height.

[test9991014]

Hi all,

I have an <input type=text> tag that is taking up too much space
vertically. It's in a <td> that has a fixed height, and I've set the
height value in the <input>'s style to be 10px, less than the <td>'s
height which is set to 14 using a normal "height=14" parameter.
For some reason the <input> is taking up the entire vertical space
of the <td>, which I know because I set <td bgcolor=red>.
I can see the input area which is about 10 pixels high and then
4 rows of gray pixels.

To summarize:
<td valign="center" bgcolor="red" height="14">
<input type="text" style="height: 10px; font-size: 7pt;">
</td>

So the puzzle is:
I should see at least 4 rows of red pixels total, but I do not.
Why is this not working as one might, on the face of it, expect?

Thanks.

 

[test9991014]

<td valign="center" bgcolor="red" height="14">
<input type="text" style="height: 10px; font-size: 7pt;">
</td>

I've discovered that changing bgcolor="red"
to style="background:red" fixes the problem.

 

[Bergamot]

<input type="text" style="height: 10px; font-size: 7pt;">

I take it you don't care if the visitor can actually read what they're
typing.

Your specified height is exactly half my default font size. When my
enforced minimum font size overrides that puny 7pt, I'll only see a few
pixels of the tops of letters. This is very poor design.

If you're going to set a height, use em units so it will adjust with the
visitor's text size. And never use pt units for screen display. pt is a
print measurement and has no meaning on screen. Use % or em for font
sizes. This subject has been done to death so check the newsgroup
archives for more of that discussion.

 

[Jonathan N. Little]

I've discovered that changing bgcolor="red"
to style="background:red" fixes the problem.

Your multiple posts reveal that you are floundering about here. Instead
of being a code monkey and throwing odd bits of code at your browser
like pasta and seeing what sticks, why not learn the basics first.

Go to http://www.htmldog.com (not affiliated, just that they have good
tutorials) and work your way through the basic HTML and CSS tutorials.
In the end it will save you *a lot* of time and frustration.

 

[test9991014]

Go tohttp://www.htmldog.com(not affiliated

The problem is that HTML & CSS are badly designed
and official documentation is poor. And the half-hearted
attempts at explaining them that you see at various
small websites usually don't provide anything except overly
general or easy examples, perhaps because those websites
are themselves merely intended to get hits and ad-clicks
rather than to educate. The only chance of finding an answer
to an esoteric question in a timely way is to ask fellow
"code monkeys."

 

[Toby A Inkster]

The problem is that HTML & CSS are badly designed and official
documentation is poor.

I guess they'll never catch on then.

And the half-hearted attempts at explaining them
that you see at various small websites usually don't provide anything
except overly general or easy examples, perhaps because those websites
are themselves merely intended to get hits and ad-clicks rather than to
educate

HTMLDog.com is certainly not that. It's a great tutorial.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 2 days, 16:58.]

The Semantic Web
http://tobyinkster.co.uk/blog/2008/03/09/sw/

 

[Bergamot]

The problem is that HTML & CSS are badly designed
and official documentation is poor. And the half-hearted
attempts at explaining them that you see at various
small websites

I guess that means you have not bothered going to the suggested web site.

The only chance of finding an answer
to an esoteric question in a timely way is to ask fellow
"code monkeys."

Maybe you don't mean it this way, but it sounds more like you don't want
to take the time to actually learn that which you are attempting to use.
You'd save yourself a lot of time in the future if you took a little
time now to educate yourself.

Nobody here wants to spoon feed answers to someone who isn't willing to
put in a little effort themselves.

 

[Jonathan N. Little]

The problem is that HTML & CSS are badly designed
and official documentation is poor. And the half-hearted
attempts at explaining them that you see at various
small websites usually don't provide anything except overly
general or easy examples, perhaps because those websites
are themselves merely intended to get hits and ad-clicks
rather than to educate. The only chance of finding an answer
to an esoteric question in a timely way is to ask fellow
"code monkeys."

Did you go to the site? Am I trying to drive traffic to htmldog to up
their hitcount? No. It is just the best site I have found so far that
*does* explain clearly and accurately how to built web pages in a modern
and effective way. It is the wheat among the chaff. If you doubt it I am
sure many of the competent regulars here will pipe in to confirm my
assertion. I can also assert that the path you are now pursuing will be
accompanied by much frustration and wasted time, and probably no get you
much closer to your goal.

BTW: HTML is very easy and simple to understand. For most practice only
about a dozen elements you will use. CSS is a bit more complicated and
less intuitive in places and in practice is made more complicated
because of IE's poor in inconstant support.

 

[test9991014]

Nobody here wants to spoon feed answers to someone who isn't willing to
put in a little effort themselves.

You presume I haven't searched so that you can pretend
I'm making an unreasonable request of you, when in truth
you are the last person I'd ask because you obviously
aren't mature enough to deal with strangers.

 

[Beauregard T. Shagnasty]

You presume I haven't searched so that you can pretend I'm making an
unreasonable request of you, when in truth you are the last person
I'd ask because you obviously aren't mature enough to deal with
strangers.

Thanks! I needed a good laugh today!

 

[test9991014]

HTMLDog.com is certainly not that. It's a great tutorial.

It's better than most, I'll agree, but remember
I stated my question was esoteric.

In the end, I did what Jonathan discouraged: I experimented
like a "code monkey" and found the answer.

 

[Bergamot]

It's better than most, I'll agree, but remember
I stated my question was esoteric.

Esoteric? Not hardly. If you took the time to actually learn HTML and
CSS you wouldn't have needed to ask at all.

In the end, I did what Jonathan discouraged: I experimented
like a "code monkey" and found the answer.

Hacking away without understanding is a sure way to make a broken page.
It's your loss (or your client's), not ours.

 

[Jonathan N. Little]

It's better than most, I'll agree, but remember
I stated my question was esoteric.

In the end, I did what Jonathan discouraged: I experimented
like a "code monkey" and found the answer.

if

<input type="text" style="height: 10px; font-size: 7pt;">

was your result and

and you do not understand the ramifications of CSS

"background: red"

then, no, you have not "found the answer"

That is why I suggested that you do find the answers and learn a little
about what you are attempting. My good advice was to let you know that
htmldog's tutorials are good and will help you.

 

[Neredbojias]

It's better than most, I'll agree, but remember
I stated my question was esoteric.

In the end, I did what Jonathan discouraged: I experimented
like a "code monkey" and found the answer.

Well, just remember that spankin' it doesn't provide the same lasting
satisfaction as would delving properly into the meat of the matter.

 

[dorayme]

<[email protected]>
,

I experimented
like a "code monkey" and found the answer.

Ah, but thar's the rub. You found something working to your
satisfaction after you did something. But what has been learned?
How much generality?

There is a measure, it will vary somewhat between people, which
is called EEI, it is a measure of the efficiency in the long run
of any strategy for doing something well. The measure records
better results when there is a goodly bit of generalization
involved rather than hitting keys and now and then to get a line
of sense.

 

[Harlan Messinger]

It's better than most, I'll agree, but remember
I stated my question was esoteric.

In the end, I did what Jonathan discouraged: I experimented
like a "code monkey" and found the answer.

It doesn't appear that you did.

In your original post you said you get 4 rows of gray pixels. Why would
you have gray at all? You didn't specify anything to be gray (unless you
did it someplace you didn't show us--in which case, you are advised that
when you ask for debugging help, you need to present all the information
you have--if you can't figure it out, how can we, with only a fraction
of the information you have?).

In any event, I have no gray. I created a page with two tables, one with
TDs as in your original post, and one with TDs adjusted as in your
follow-up. In both cases the two tables look identical. So if you had
gray originally, and the gray turned to red when you switched from the
first formulation to the second, then you changed something else to,
whether you're aware of it or not.

In the second place, your original trouble report was that the 10px-high
INPUT boxes were taking up the entire vertical space of the 14px-high
TDs--and then you reported that the INPUT boxes were taking up 10 rows
of pixels, leaving 4 other rows--whether gray or red, it doesn't
matter--which implies that 4 pixels of the TD were above and beyond the
vertical space taken up by the INPUT, contradicting your complaint.

So in the end, I don't know what was really happening on your end, I
don't know what your code really looked like before or after, I don't
know what you changed in the code, and I don't know what it is you think
you fixed or what you think you learned. Let's just say that if
something like this happens again, where you think something is taking
up too much vertical space, and you think the fix is to replace a
bgcolor attribute with a CSS background: red; well, it won't be.