Solved

textarea size problems in Mac IE browser

Posted on 2003-11-11
2
598 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

Technology Partners: 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

Suggested Solutions

Title # Comments Views Activity
Angular won't showing my array result in HTML 3 54
IF statment In Powershell 12 28
email validation 9 47
Change how page is organized 3 35
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

740 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