CODEWITHSUNDEEP
htmlcss
Waleed Eissa
Waleed Eissa

Reputation: 10543

How to make a textbox and a textarea same width cross-browsers?

Setting the width of both the textbox (ie. input type="text") and the textarea to 500px doesn't work in IE6 and Chrome, only works fine in FF2 (haven't tested other browsers), IE and Chrome add two pixels to the textbox.

Padding and margin is set to 0 on all elements using

*
{
margin: 0px;
padding: 0px;
}

Changing the doctype from xhtml 1.0 transitional to strict didn't work too.

Upvotes: 12

Views: 21629

Answers (8)

Justin
Justin

Reputation: 27331

I use CSS3 to make textbox and input work the same. See jsFiddle. 

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Works in IE8+, see caniuse.

Upvotes: 2

Thiru
Thiru

Reputation: 1

<!--***********************CSS**************************-->
<style>

.set_font

{

font-family:verdana;

font-size:10px;

color:#ffffff;

width:250px;

}

.set_font2

{

font-family:verdana;

font-size:10px;

color:#000000;

width:250px;

}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>

Upvotes: -1

Tariq Amin
Tariq Amin

Reputation: 11

I have been experimenting and found out that "the ratio" between text input and textarea can be calculated using 21 * 8*x.

If you have

< input type="text" size="X" />< br/> < textarea cols="X">< /textarea>

... and you want them to be equally wide, use this formula to calculate the width for the input text.

if x = 70 then 21*8*70 = 581px

So you will write:

< input type="text" size="70" style="width: 581px" />< br/> < textarea cols="70">< /textarea>

The two will become equal!

In this way in a program/website/etc you can enter the same value and get the same result (cols in textarea)!

Upvotes: 1

user58777
user58777

Reputation:

I would recommend first to avoid that "star" reset rule, as it only brings problems down the line. Instead prefer a specific reset like

ul, ol, p, blockquote, h1, h2 /etc.../ { margin:0; padding:0; }

FORM ELEMENTs, in fact, is where the star rule does the most damage.

AFAIK, setting padding and width explicitly to a textarea and an input element, will give the exacts same pixel width in all browsers.

IE6 does add a 1px margin to the TOP and BOTTOM I believe, not the sides.

Here's an example of a RESET rule taht does'nt break the default properties of form elements:

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/

body { 
    font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif; 
    margin:0; padding:0; 
    background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
    color:#303030;
}

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }

/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }

These are just random, but you get the idea. Don't clear margin and padding on everything, it's much safer to clear what you need to, and leave the browser defaults elsewhere.

Upvotes: 1

Adriana
Adriana

Reputation: 8634

I also think that the problem is in border. Try defining the border style specifically for inputs/textarea together with their width.

input, textarea{ border:1px solid grey; width:498px; }

Also take a look in the source if input/textarea is not defined anywhere else or in their own tag (e.g. size or rows/cols). Other option when IE messes around is using special css file for it. However IMHO it shouldn't be necessary in your case.

Upvotes: 1

Paolo Bergantino
Paolo Bergantino

Reputation: 488704

You need to explicitly set a border of 1px and make the width 498px, or make the border 0 and the width 500px, although the latter will make the input impossible to see unless you know it's there, so from there it's just a styling issue.

Upvotes: 9

Matt Howell
Matt Howell

Reputation: 15966

You might have some luck using a set of reset styles in your CSS. They go a long way to eliminating the cross-browser differences between the way elements are rendered.

Eric Meyer (one of the web's best minds on CSS) describes reset styles and why he uses them here -- with his latest version here.

That said, without knowing the overall effect you're trying to achieve, form elements are notoriously difficult to style in a way that is perfectly consistent across browser platforms. Best of luck. :)

Upvotes: 4

benmmc
benmmc

Reputation: 21

Try

input{
border:none;
}

Upvotes: 0

Related Questions