?
Solved

textarea size problems in Mac IE browser

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

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

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. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…
Suggested Courses

569 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