asked on

Why after I added style sheet definitions for INPUT tag, my text boxes on all web pages get bigger?

After I added style sheet for INPUT tag like this:

INPUT
{
font-size: 10pt;
font-family: Arial
}

All text boxes in my web pages get much bigger even after I specified the size and maxlength for all of my text boxes.

Does anybody know what attribute I need to add to this INPUT style sheet to fix this problem? I don't want to go to every text boxes to specify the width in style sheet format.

Thanks a lot.

arantius

input {
width: 10em;
}

Substitute for 10 whatever value suits your fancy.

BruceCheng

ASKER

I tested it. I doesn't work as expected. I tried use 10em, 1em, 5em ... But on my web pages, some text boxes are changed to very big. Some text boxes are changed to very small. Looks like the SIZE and MAXLENGTH attribute of my textboxes are not functioning any more.

Are there any other suggestions?

Thanks a lot.

MGrassman

If you have some code or a webpage I could reference, it would allow me to narrow the problem down for you.

Michael
{personal website url removed - ee_ai_construct, cs moderator}

BruceCheng

ASKER

The following is the code sample. You can notice that by adding and removing the <style> block, the widthes of the text boxes are changed too. And adding in the "width: 10em" only makes things worse.

My question is, how can I make the text boxes only wide enough to hold the number of characters specified by maxlengh by using that global style sheet. Or at least the width of the text box should be the same as without using the style sheet. Thanks.

<html>
<head>
<title></title>
<style>
INPUT
{
font-size: 10pt;
font-family: Arial
}
</style>
</head>
<body>
<input type="text" size="20" value="This is just for testing"> <br>
<input type="text" size="2" maxlength="2">
</body>
</html>

ASKER CERTIFIED SOLUTION

MGrassman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial