Solved

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

Posted on 2004-08-09
5
333 Views
Last Modified: 2008-03-06
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.
0
Comment
Question by:BruceCheng
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 18

Expert Comment

by:arantius
ID: 11754550
input {
  width: 10em;
}

Substitute for 10 whatever value suits your fancy.
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 11755326
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.
0
 
LVL 2

Expert Comment

by:MGrassman
ID: 11756476
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}
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 11757548
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>
0
 
LVL 2

Accepted Solution

by:
MGrassman earned 50 total points
ID: 11757601
For every input box you have that you don't want to be a custom size take out the size attribute and use the width property of css.  Your maxlength attribute will still function correctly.  

Hope this helps.


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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question