Positioning a text box in Netscape

The following html positions the text box ok in ie4 but does not work in netscape.

<form name="form2">
<INPUT TYPE="TEXT" STYLE="position:absolute;top=150;left=275" "font-family: Arial;" name="banner" size="30">
</form>

How can I modify it to work with both browsers?
LVL 1
ncwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

garrethgCommented:
The only way you can position an element in Navigator is to place it within a layer, like below:

<DIV STYLE="position:absolute;top=150;left=275">
<FORM NAME="form2">
<INPUT NAME="banner" TYPE="text" STYLE="font-family:Arial" SIZE="30">
</FORM>
</DIV>

Notes:
-------
Navigator treats the contents of a layer as a seperate document so you can't split a form across several layers.
You can't apply style to a form element in Navigator so STYLE="font-family:Arial" will only work on MSIE.
Very few CSS attributes work with the inline STYLE attribute in Navigator. Most of the time you would be better off applying style from an embeded or external style sheet.
0
boycey19Commented:
Netscape doesnt support the style attribute for the div layer element. You would have to set up a style sheet for it.

<style type="text/css">
<!--

#formLyr{position:absolute;top:150;left:275;}
input{font-family:arial;}

//-->
</style>

<div id="formLyr">
<form name="form2">
<input name="banner" type="text" size="30">
</form>
</div>

Boycey



0
DreamMasterCommented:
noway boycey19...

Netscape does support the inline style for a div tag..it doesn't support it well however and it sure doesn't support styles in an input tag..

The fact is just that although Netscrape is the first browser that supported Styles...it support them all wrong..

for example i've been struggling with a problem lately: i needed a textbox in Netscape to be exact the same size as in IE, well...Netscape made the textbox almost twice as big as it needed to be to hold the maximum length of the string and i finally learned that the only way to do this, is by using monospace fonts.

What has to be remembered though is the "nice" netscape positioning bug....You can position the textbox with the div, but Netscape will place it differently..

more info?

Max Davidse
http://www.thekitchen.nl
max@thekitchen.nl
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

garrethgCommented:
Netscape will work fine* with
STYLE="position:attribtue;top:value;left:value"

Unfortunately I typed:

top=150;left=275
instead of:
top:150;left:275

* in so much as Navigator can be in relation to CSS
0
ncwAuthor Commented:
garrethg's and boycey19's answers now work fine for the positioning of the text box, however I was using the text box for a scrolling banner created with the Javascript below and in ie4 the banner still works but in netscape the scrolli8ng text has disappeared.

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

          var MESSAGE = "  ....Access Databases....Visual Basic Applications....Web Site Construction....                     ";
          var SPEED   = 10;
          var id,pause=0,position=0;
          function banner() {
                  var i,k,msg=MESSAGE; /*document.form1.message.value*/;
                  k=(67/msg.length)+1;
                  for(i=0;i<=k;i++) msg+=" "+msg;
                 document.form2.banner.value=msg.substring(position,position+90);
                  if(position++==msg.length /*document.form1.message.value.length*/) position=0;
                  id=setTimeout("banner()",1000/SPEED); }
          function action() {
                  if(!pause) {
                          clearTimeout(id);
                          pause=1; }
                  else {
                          banner();
                          pause=0; } }
 // -->
 </SCRIPT>

</HEAD>

<BODY onLoad="banner()">
 
<DIV STYLE="position:absolute;top:150;left:275">
<FORM NAME="form2">
<INPUT NAME="banner" TYPE="text" STYLE="font-family:Arial" SIZE="30">
</FORM>
</DIV>


</BODY>
</HTML>
0
garrethgCommented:
As per my note above NSN treats the contents of a layer as a seperate document so:

document.form2.banner.value=msg.substring(position,position+90);

needs to be:

document.layers[0].document.form2.banner.value=msg.substring(position,position+90);

on NSN.


Replace the problem line with:

if(document.layers){
document.layers[0].document.form2.banner.value= msg.substring(position,position+90);
}
else {
document.form2.banner.value= msg.substring(position,position+90);
}
0
mkdebontCommented:
That the textbox disapears in netscape is correct...

The problem is in netscape that you also have to asign the layer name.

If rewritten you're script and try it you will see that it works!!
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
var MESSAGE = "  ....Access Databases....Visual Basic Applications....Web Site Construction....                     ";
var SPEED   = 10;
var id,pause=0,position=0;

function banner() {
      var i,k,msg=MESSAGE; /*document.form1.message.value*/;
      k=(67/msg.length)+1;
      for(i=0;i<=k;i++) msg+=" "+msg;

      if (document.all)
            {document.form2.banner.value=msg.substring(position,position+90);}
            else
            {document.scroll.document.form2.banner.value=msg.substring(position,position+90);}
      if(position++==msg.length /*document.form1.message.value.length*/)
      position=0;
      id=setTimeout("banner()",1000/SPEED); }
      function action() {
      if(!pause) {
            clearTimeout(id);
            pause=1; }
      else {
            banner();
            pause=0; }
      }
 // -->
</SCRIPT>
</HEAD>
<BODY onLoad="banner()">
<DIV id="scroll" STYLE="position:absolute;top:150;left:275">
      <FORM NAME="form2">
                  <INPUT NAME="banner" TYPE="text" STYLE="font-family:Arial" SIZE="30">
      </FORM>
</div>
</BODY>
</HTML>

Remember that for netscape you have te call the layer name if you want to change to content (ie. images, forms, etc)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mkdebontCommented:
Ps: I build a little check for NS and IE because the syntax is different for IE and NS:

if (document.all)
                            {document.form2.banner.value=msg.substring(position,position+90);}
                            else
                            {document.scroll.document.form2.banner.value=msg.substring(position,position+90);}



If it Internet Explorer then ....(ie) else ....(ns)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.