Solved

textarea size problems in Mac IE browser

Posted on 2003-11-11
2
601 Views
Last Modified: 2010-04-09
I am having problems getting a textarea box to use a concistent size across many different browsers.  I have used CSS to set the font details which seems to make it work well in recent Windows IE and Netscape browsers, but Mac browsers seem to blow it all out of the water.

The textarea boxes are expanding way too wide, and are messing with the page layout. I don't mind doing some javascript browser and OS checking and putting in some conditional code, if that is what it takes.

(I'm not worried about Netscape 4 or earlier)  Any suggestions would be welcome.
0
Comment
Question by:ianmac26
[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 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9724454
Are you using CSS to override your width setting?

<html>
<head>
<style tyype="text/css">
<!--
textarea     { width: 200px; }
-->
</style>
</head>
<body>
<form>
<textarea rows="2" name="mytext" cols="20"></textarea>
</form>
</body>
</html>
0
 
LVL 6

Accepted Solution

by:
ren_b earned 250 total points
ID: 9728902
make sure  you don't mistake cols for width in pixels. but also, im not sure cause i don't use ie on macs, but if you have really small text in the textareas, and mac ie doesn't  render it correctly, than it may be rendered huge compared to what you have.

what you can do... which probably isn't a great alternative and there is a better way of doing it, is check to see if its a mac on ie...

also, here is a REALLY good browser check if you ever need one ive gotten it from dhtmlcentral.com..

function browserCheck(){
      this.ver=navigator.appVersion
      this.agent=navigator.userAgent.toLowerCase()
      this.dom=document.getElementById?1:0
      this.ns4=(!this.dom && document.layers)?1:0;
      this.op=window.opera
      this.moz=(this.agent.indexOf("gecko")>-1 || window.sidebar)
      this.ie=this.agent.indexOf("msie")>-1 && !this.op
      if(this.op){
            this.op5=(this.agent.indexOf("opera 5")>-1 || this.agent.indexOf("opera/5")>-1)
            this.op6=(this.agent.indexOf("opera 6")>-1 || this.agent.indexOf("opera/6")>-1)
            this.op7=this.dom&&!this.op5&&!this.op6
      }else if(this.moz) this.ns6 = 1
      else if(this.ie){
            this.ie4 = !this.dom && document.all
        this.ie5 = (this.agent.indexOf("msie 5")>-1)
        this.ie55 = (this.ie5 && this.agent.indexOf("msie 5.5")>-1)
        this.ie6 = this.dom && !this.ie4 && !this.ie5 && ! this.ie55
      }
      this.mac=(this.agent.indexOf("mac")>-1)
      this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.op5 || this.op6 || this.op7)
  this.usedom= this.ns6||this.op7
  this.reuse = this.ie||this.op7||this.usedom
  this.px=this.dom&&!this.op5?"px":""
      return this
}
var bc=new browserCheck()

// so now we can check the browser..

if(bc.mac&&bc.ie) document.writeln("<link rel='stylesheet' href='macie.css' type='text/css'>");
else document.writeln("<link rel='stylesheet' href='normal.css' type='text/css'>");
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

717 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