Member Avatar for MDanz

i have this text area..

textarea name="reply" id="reply" cols="105" rows="2"></textarea>

in firefox the textarea is larger and in IE the text area is shorter. How do i have the same size text area in both browsers? Can i have an example?

  • 3 Contributors
  • 2 Replies
  • 89 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

: different browsers use different default form styles (font metrics, padding, line-height, and scrollbar behavior), so HTML cols/rows will not produce identical pixel sizes everywhere. 's inline sizing works but is harder to maintain, and was right to flag overflow/scrollbar issues — those affect the usable area.

Make the textarea predictable by normalizing its typography and the box model. Setting box-sizing so the declared width/height include padding and border removes a common source of mismatch. Also set an explicit font-size/line-height and padding so the same number of lines look the same across browsers. Example CSS that does not rely on UA defaults:

textarea#reply {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font: 14px/1.4 "Helvetica Neue", Arial, sans-serif;
  padding: 8px;
  width: 420px;
  min-height: 3.5rem;
  resize: vertical;       /* control user resizing */
  overflow-y: auto;
  border: 1px solid #bbb;
}

Troubleshooting: open DevTools and check the computed box model (font-size, line-height, padding, border). If values still differ, apply a small reset or use a normalize stylesheet. For background reading see the MDN docs on the HTML textarea element and the CSS box-sizing property: textarea element and box-sizing.

Recommended Answers

All 2 Replies

Member Avatar for SKANK!!!!! 
textarea style="width:200px;height:444px"

no brianer

Member Avatar for ko ko

Use css. Here is example:

textarea#reply {
      width: 424px;
      height: 126px;
      border: 1px solid gray;
      overflow: auto /* Hiding scroll-bar in IE */
     }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.