?
Solved

textarea size problems in Mac IE browser

Posted on 2003-11-11
2
Medium Priority
?
603 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 750 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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