textbox sizes

Surely the other way around? IE being too long as NS uses a fixed-with font in all it's builds. On NS 10 characters will fit excatly into <INPUT TYPE="text" SIZE="10"> no matter what they are.

Prehaps you could elaborate on:

"NS puts another 10 characters behind."

The font doesn't matter because I'm using a style-sheet.

But to problem still remains. And the different sizes must be solved.

I want a script that it's make me possible to show different length of textboxes in NS and IE.

Sooo, what is it that you want now? I guess what garrethg said here, about the size property, should do the trick...and forget NS with style-sheet. It's a hell. But now you want a script for showing the length of the boxes? Why?

Joseph

I'm making a page with a form that calculate a certain prices.
In here you have 3 textboxes near eachother. To width that I have is only 380 and in IE it fits precisely but in Netscape it way to long.

The client want the textboxes behind eachother so I'm searching for a possibility.

I do not want to have 2 different pages 1 for IE and 1 for NS.

To whole form is in a scrollable layer and that seams to be a problem to.

the style sheet is needed also for NS.

oubelkas,

i'm mdebont's colleague and i know exactly what he means..

The problem is just the fact that Netscape uses the fixed size, and doesn't change the size of the textbox when the font-size gets smaller or bigger. At least that what it seems like...

The form is in a layer and gives a perfect maximum size in IE, but Netscape has a lot of space left in it's textbox..
Even when You type the maximum allowed characters ("W") it still keeps a lot of space open...

Like he says..the problem is in Netscape only..

maybe You're right about the font size instead of the style sheet version but that shouldn't be the only way to do this....

Please help the guy!!! (and with that me.. ;-)  )

Max Davidse
http://www.thekitchen.nl

I'm making a page with a form that calculate a certain prices.
In here you have 3 textboxes near eachother. To width that I have is only 380 and in IE it fits precisely but in Netscape it way to long.

The client want the textboxes behind eachother so I'm searching for a possibility.

I do not want to have 2 different pages 1 for IE and 1 for NS.

To whole form is in a scrollable layer and that seams to be a problem to.

the style sheet is needed also for NS.

Well, like I also mentioned before, NS is a HELL with Style sheet. It's untill not possible to work properly with style sheet under NS. IE on the contrary works perfectly with this. Font size or other properties like these (width, height, font-color, family etc.) all don't work in NS. So therefore SIZE must be used which works fine in IE and NS.

>> the style sheet is needed also for NS.

I know, but I think I have to disappoint you here, because it won't. I also, along with everybody in the world, always have these same probs.

Joseph

I'm making a page with a form that calculate a certain prices.
In here you have 3 textboxes near eachother. To width that I have is only 380 and in IE it fits precisely but in Netscape it way to long.

The client want the textboxes behind eachother so I'm searching for a possibility.

I do not want to have 2 different pages 1 for IE and 1 for NS.

To whole form is in a scrollable layer and that seams to be a problem to.

the style sheet is needed also for NS.

I'm making a page with a form that calculate a certain prices.
In here you have 3 textboxes near eachother. To width that I have is only 380 and in IE it fits precisely but in Netscape it way to long.

The client want the textboxes behind eachother so I'm searching for a possibility.

I do not want to have 2 different pages 1 for IE and 1 for NS.

To whole form is in a scrollable layer and that seams to be a problem to.

the style sheet is needed also for NS.

That's fine, but it won't.....

I'm making a page with a form that calculate a certain prices.
In here you have 3 textboxes near eachother. To width that I have is only 380 and in IE it fits precisely but in Netscape it way to long.

The client want the textboxes behind eachother so I'm searching for a possibility.

I do not want to have 2 different pages 1 for IE and 1 for NS.

To whole form is in a scrollable layer and that seams to be a problem to.

the style sheet is needed also for NS.

It's fine that font size and it works percetly, BUT the size of the characters inside the textbox is also very small and that is not what I want...

So the anwser of garrethg is almost perfect (I know this option), anly the textsize must be the same.

At one way or anonther way the "size" tag inside the input type must be different for NS and IE.

So for IE 10 and for NS 5. Can I change that at an onload-event?

Netscape used not only in Win32 systems (xUNIX, Mac too).
Its mean as _no way_ to set _same_ as IE size.

But if you want make textbox size same as IE on Win32 systems, simply insert javascript code instead of html textbox code like:

<script language="Javascript">
<!--
  if (IEFlagVariable)
  {
    document.writeln('IEtextboxcode');
  }
  else
  {
    document.writeln('NNtextboxcode');
  }
//-->
</script>

Very good!!

Thanx, I thougt that netscape could not handle with style's but it seams to me that the current sollutions works.

Now we don't have to write a javascript function

Martijn de Bont
http://www.thekitchen.nl

It's important to realise Netscape DOESN'T handle the STYLE so you don't try to build a house of cards...

Exactly what I meant garrethg! You're right! Martijn, be careful for that, NS is unreliable when it comes to style sheet and STYLE.

Joseph

That's why I posted the solution I did.  I probably should have explained it better, though -- Netscape 4 will ignore the STYLE attribute in <INPUT> tags, but it will use a monospace font by default.  IE will not use a monospace font by default, but adding the STYLE attribute makes it do so. The result is that both NS and IE display the same size box with the same font. However, this only works to display monospace.

I tried what mblase told me and it worked fine.
I know that NS4 does not support styles in an input-tag, but when I tried it the length of the textbox in NS and IE where the same.


Try it yourself if you don't believe it!!

They were the same because IE was set to a fixed-width font by the STYLE, Netscape already uses fixed-width font.

MSIE's input's font was changed.
NSN's was not.

Yes I know garrethg!

The anwser was very good but now do I have antoher problem:

I put the style into the input-tag. This input tag is inside a "div"-tag.

Netscape doesn't like that very mutch and he doesn't show the form at all.
javascript error: "this.css".
IE does it well!!

Is there a way to ignore this error??

A JavaScript error? You'll have to post the entire code then.

Do you want the entire code??

<html>
<head>
  <title>Berekenen</title>
  <SCRIPT>
<!--
function resetForm(num)
{
   if (navigator.appName == "Netscape")
   {
      document.layers['divCont'].document.layers['divScroll1'].document.forms[num].reset();
   }
   if (navigator.appName == "Microsoft Internet Explorer")
   {
      document.forms[num].reset();
   }
}
function ccc13(form)
{
        if (navigator.appName == "Netscape")
        {
           form = document.layers['divCont'].document.layers['divScroll1'].document.forms[2];
        }

      factor = 3;
      sum = 0;
      for (index = form.numero.value.length; index > 0; --index)
      {
            sum = sum + form.numero.value.substring (index-1, index) * factor;
            factor = 4 - factor;
      }

      cc = ((1000 - sum) % 10);
      form.chiffre.value = "0" + form.numero.value + cc;
      result = form.chiffre.value;
      form.cc.value = cc;
      if (form.numero.value.length!=12)
      {
            alert("LET OP! Voer 12 cijfers in")
            form.cc.value = ""
            form.chiffre.value = "";
      }
}

function ccc8(form)
{
      if (navigator.appName == "Netscape")
        {
           form = document.layers['divCont'].document.layers['divScroll1'].document.forms[0];
        }
        factor = 3;
      sum = 0;
      for (index = form.numero.value.length; index > 0; --index)
      {
            sum = sum + form.numero.value.substring (index-1, index) * factor;
            factor = 4 - factor;
      }
      cc = ((1000 - sum) % 10);
      form.chiffre.value = "000000" + form.numero.value + cc;
      result = form.chiffre.value;
      form.cc.value = cc
      if (form.numero.value.length!=7)
      {
            alert("LET OP! Voer 7 cijfers in")
            form.cc.value = ""
            form.chiffre.value = "";
      }
}

function ccc12(form)
{
        if (navigator.appName == "Netscape")
        {
           form = document.layers['divCont'].document.layers['divScroll1'].document.forms[1];
        }

      factor = 3;
      sum = 0;
      for (index = form.numero.value.length; index > 0; --index)
      {
            sum = sum + form.numero.value.substring (index-1, index) * factor;
            factor = 4 - factor;
      }
      cc = ((1000 - sum) % 10);
      form.chiffre.value = "00" + form.numero.value + cc;
      result = form.chiffre.value;
      form.cc.value = cc
      if (form.numero.value.length!=11)
      {
            alert("LET OP! Voer 11 cijfers in")
            form.cc.value = ""
            form.chiffre.value = "";
      }
}

function ccc14(form)
{
        if (navigator.appName == "Netscape")
        {
           form = document.layers['divCont'].document.layers['divScroll1'].document.forms[3];
        }
        factor = 3;
      sum = 0;
      for (index = form.numero.value.length; index > 0; --index)
      {
            sum = sum + form.numero.value.substring (index-1, index) * factor;
      factor = 4 - factor;
      }
      cc = ((1000 - sum) % 10);
      form.chiffre.value = form.numero.value + cc;
      result = form.chiffre.value;
      form.cc.value = cc
      if (form.numero.value.length!=13)
      {
            alert("LET OP! Voer 13 cijfers in")
            form.cc.value = ""
            form.chiffre.value = "";
      }
}

function ccc18(form)
{
        if (navigator.appName == "Netscape")
        {
           form = document.layers['divCont'].document.layers['divScroll1'].document.forms[4];
        }
       
      factor = 3;
      sum = 0;
      for (index = form.numero.value.length; index > 0; --index)
      {
            sum = sum + form.numero.value.substring (index-1, index) * factor;
            factor = 4 - factor;
      }
      cc = ((1000 - sum) % 10);
      form.cc.value = cc
      if (form.numero.value.length!=17)
      {
            alert("LET OP! Voer 17 cijfers in")
            form.cc.value = "";
      }
}

//-->
</SCRIPT>
<style>
<!--
      #divControl{position:absolute; font-family:times new roman; left:0; top:0; font-size:12px; z-index:3 }
      #divCont{position:absolute; top:60; left:85; clip:rect(0,500,230,0); height:175; width:500; z-index:5}
      .clScroll{position:absolute; left:0; top:0; font-size:12px; font-family:Arial;  z-index:2; visibility:hidden}
      p { font-family:"arial"; font-size:10px }
        td { font-family:"times new roman"; font-size:12px }
        b { font-weight: bold }
      a { font-family:"Verdana"; font-size:10px; color:#0f377d; text-decoration : none }
        a:hover { color:#0f37BB; text-decoration : underline }
//-->
</style>

<script language="javascript">
<!--
top.submenu.location.replace('smartsite.asp?id=140')
//-->
</script>
<script language="javascript">
/********************************************************************************
Scripts container van Max Davidse, deze container bevat procedures die gebruikt
worden voor de website van the Kitchen Interactive.
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

/*********************************************************************************
Variabelen die je kunt aanpassen staan hieronder
*********************************************************************************/

//The speed of the timeout between each scroll.
timSpeed=50

//The height of the container (change this when it scrolls to much or to little)
contHeight=230
/*********************************************************************************
Object Constructor...deze stelt de methoden en properties vast van de objecten
*********************************************************************************/
function makeScrollObj(obj,nest){
      nest=(!nest) ? '':'document.'+nest+'.'                                                            
      this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                                          
      this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')                                          
      this.top=b_gettop                                                            
      return this
}
//Getting the top for the top method
function b_gettop(){
      var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
      return gleft;
}
//Variables
var scrollTim;
var active=0;
/*********************************************************************************
Scroll functie:
Kijkt welke kant op moet worden gescrolled, en of hij niet al op zijn maximale
positie is.
*********************************************************************************/
function scroll(speed){
      clearTimeout(scrollTim)
      way=speed>0?1:0
      if((!way && oScroll[active].top()>-oScroll[active].scrollHeight+contHeight) || (oScroll[active].top()<0 && way)){
            oScroll[active].css.top=oScroll[active].top()+speed
            scrollTim=setTimeout("scroll("+speed+")",timSpeed)
      }
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
      clearTimeout(scrollTim)
}
/*********************************************************************************
Veranderen van de actieve layer..verbergt de vorige layer en toont de nieuwe.
*********************************************************************************/
function changeActive(num){
      oScroll[active].css.visibility='hidden'
      active=num
      oScroll[active].css.top=0
      oScroll[active].css.visibility='visible'
}
/*********************************************************************************
Initialiseerd de pagina, roept de object constructor aan.
Hier kun je zoveel objecten aanmaken als je wilt.
*********************************************************************************/
function scrollInit(){
      oScroll=new Array()
      oScroll[0]=new      makeScrollObj('divScroll1','divCont')
      oScroll[1]=new      makeScrollObj('divScroll2','divCont')
      oScroll[2]=new      makeScrollObj('divScroll3','divCont')
      oScroll[3]=new      makeScrollObj('divScroll4','divCont')
      oScroll[4]=new      makeScrollObj('divScroll5','divCont')
      oScroll[5]=new      makeScrollObj('divScroll6','divCont')
      oScroll[0].css.visibility='visible'
}
/*********************************************************************************
scrollInit() kun je aanroepen bij de onload van een pagina.
*********************************************************************************/

//-->
</script>

<script language="JavaScript">
<!--
  num=0
  count=0
function swappers(){
  ++count;
  if (count>4) count=1;
  if (count==num)
  {
    ++count;
    if (count>4) count=1;
  }
  if (count==1) MM_swapImage('document.layers[\'woordenlijst\'].document.Image1','document.Image1','pics/woordenlstAnim.gif');
  if (count==2) MM_swapImage('document.layers[\'zoek\'].document.Image2','document.Image2','pics/bedrijfAnim.gif');
  if (count==3) MM_swapImage('document.layers[\'bereken\'].document.Image3','document.Image3','pics/berekenAnim.gif');
  if (count==4) MM_swapImage('document.layers[\'nieuws\'].document.Image4','document.Image4','pics/nieuwsAnim.gif');
  setTimeout("swappers();",3000);
}
function MM_swapImage() { //v2.0
  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
    objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
    if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
        (objStr.indexOf('document.all[')   ==0 && document.all   ==null))
      objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
    obj = eval(objStr);
    if (obj != null) {
      swapArray[j++] = obj;
      swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
      obj.src = MM_swapImage.arguments[i+2];
  } }
  document.MM_swapImgData = swapArray; //used for restore
}
//-->
</script>

</head>
<body background="pics/bg_ean.jpg" BGPROPERTIES="fixed" onload="scrollInit();swappers()">
<div id="zoek" style="position:absolute; width:57px; height:38px; left: 218px; top: 21px">
  <a href="smartsite.asp?id=11" target="inhoud"  onMouseOver="num=2;MM_swapImage('document.layers[\'zoek\'].document.Image2','document.Image2','pics/btn_EANcodeMouseOver.GIF')" onMouseOut="num=0;MM_swapImage('document.layers[\'zoek\'].document.Image2','document.Image2','pics/btn_EANcode.GIF')">
    <img src="pics/btn_EANcode.GIF" border="0" name="Image2">
  </a>
</div>
<div id="woordenlijst" style="position:absolute; width:51px; height:46px; left: 28px; top: 257px">
  <a href="smartsite.asp?id=12" target="inhoud" onMouseOver="num=1;MM_swapImage('document.layers[\'woordenlijst\'].document.Image1','document.Image1','pics/btn_woordenlijstMouseOver.GIF')" onMouseOut="num=0;MM_swapImage('document.layers[\'woordenlijst\'].document.Image1','document.Image1','pics/btn_woordenlijst.GIF')">
    <img src="pics/btn_woordenlijst.GIF" border="0" name="Image1">
  </a>
</div>


<div id="bereken" style="position:absolute; width:46px; height:36px; left: 276; top: 21px">
  <a href="smartsite.asp?id=10" target="inhoud" onMouseOver="num=3;MM_swapImage('document.layers[\'bereken\'].document.Image3','document.Image3','pics/btn_berekenMouseOver.GIF')" onMouseOut="num=0;MM_swapImage('document.layers[\'bereken\'].document.Image3','document.Image3','pics/btn_berekeningen.GIF')">
    <img src="pics/btn_berekeningen.GIF" border="0" name="Image3">
  </a>
</div>

<div id="nieuws" style="position:absolute; width:51px; height:44px; left: 28px; top: 212px">
  <a href="smartsite.asp?id=9" target="inhoud" onMouseOver="num=4;MM_swapImage('document.layers[\'nieuws\'].document.Image4','document.Image4','pics/btn_nieuwsMouseOVer.GIF')" onMouseOut="num=0;MM_swapImage('document.layers[\'nieuws\'].document.Image4','document.Image4','pics/btn_nieuws.GIF')">
    <img src="pics/btn_nieuws.GIF" border="0" name="Image4">
  </a>
</div>
<div id="printen" style="position:absolute; left:410; top:293; width:50; height:50"><a href="smartsite.asp?id=150&page=148" target="new" onmouseover="javascript:window.status='Print deze pagina'" onmouseout="javascript:window.status=''"><img src="pics/btn_printbutton.gif" border=0" alt="Print deze pagina"></a></div>
<!--
      //Layers met tekst
//-->
<div id="divCont">
      <div id="divScroll1" class="clScroll"><b>Berekenen</b><br>
<table border=0 cellspacing=0 cellpadding=4 width=100%><tr><td valign=top width=370>In de tabel hieronder kunt u voor verschillende codes het controlecijfer berekenen:<br>
Toets in het eerste veld de cijfers van de artikelcode in, minus uiteraard het controlecijfer. Als u op 'bereken' klikt, verschijnt in het tweede veld het controlecijfer. In het veld daarnaast ziet u dan de gehele EAN-code, inclusief controlecijfer. Deze is weergegeven in een code van 14 posities. EAN International adviseert namelijk om in uw bestanden een veld van 14 posities te reserveren voor EAN- en UCC-artikelcodes. Wij raden u  aan de codes rechts uit te lijnen en eventuele resterende posities aan de linkerkant van de code te vullen met nullen. Op die manier kan nooit verwarring ontstaan tussen verschillende soorten codes als de EAN8- en de EAN7UCC-14-code.
<table cellspacing=0 cellpadding=2 border=0>
<FORM name="ean8">
   <tr>
     <td colspan=3><b>EAN8</b></td>
   </tr>
   <tr>
     <td><B><i>Artikelcode</i></B></td>
     <td><B><i>Controlecijfer</i></B></td>
     <td><b><i>EAN-code</i></B></td>
   </tr>
   <tr>
     <td><INPUT TYPE="text" NAME="numero" SIZE=7 width=7 MAXLENGTH=7></td>
     <td align=center><INPUT TYPE="text" NAME=cc SIZE=1></td>
     <td align=center><INPUT TYPE="text" NAME=chiffre SIZE=14></td>
   </tr>
   <tr>
     <td colspan=3 align=center><a href="javascript:ccc8(document.forms[0]);"><img src="pics/btn_berekenen.gif" border=0></a>
     <a href="javascript:resetForm(0)"><img src="pics/btn_wissen.gif" border=0></a></td>
   </tr>
   </FORM>
<FORM>
   <tr>
     <td colspan=3><b>UCC12</b></td>
   </tr>
   <tr>
     <td><B><i>Artikelcode</i></B></td>
     <td><B><i>Controlecijfer</i></B></td>
     <td><b><i>EAN-code</i></B></td>
   </tr>
   <tr>
     <td><INPUT TYPE="text" NAME=numero SIZE=11 MAXLENGTH=11></td>
     <td align=center><INPUT TYPE="text" NAME=cc SIZE=1></td>
     <td><INPUT TYPE="text" NAME=chiffre SIZE=14></td>
   </tr>
   <tr>
     <td colspan=3 align=center><a href="javascript:ccc12(document.forms[1]);"><img src="pics/btn_berekenen.gif" border=0></a>
 <a href="javascript:resetForm(1)"><img src="pics/btn_wissen.gif" border=0></a>
     </td>
   </tr>
   </FORM>
<FORM>
   <tr>
     <td colspan=3><b>EAN13</b></td>
   </tr>
   <tr>
     <td><B><i>Artikelcode</i></B></td>
     <td><B><i>Controlecijfer</i></B></td>
     <td><b><i>EAN-code</i></B></td>
   </tr>
   <tr>
     <td><INPUT TYPE="text" NAME=numero SIZE=12 MAXLENGTH=12></td>
     <td align=center><INPUT TYPE="text" NAME=cc SIZE=1></td>
     <td><INPUT TYPE="text" NAME=chiffre SIZE=14></td>
   </tr>
   <tr>
     <td colspan=3 align=center><a href="javascript:ccc13(document.forms[2]);"><img src="pics/btn_berekenen.gif" border=0></a>
 <a href="javascript:resetForm(2)"><img src="pics/btn_wissen.gif" border=0></a>
     </td>
   </tr>
   </FORM>
<FORM>
   <tr>
     <td colspan=3><b>EAN/UCC14</b></td>
   </tr>
   <tr>
     <td><B><i>Artikelcode</i></B></td>
     <td><B><i>Controlecijfer</i></B></td>
     <td><b><i>EAN-code</i></B></td>
   </tr>
   <tr>
     <td align=center><INPUT TYPE="text" NAME=numero SIZE=13 MAXLENGTH=13></td>
     <td align=center><INPUT TYPE="text" NAME=cc SIZE=1></td>
     <td><INPUT TYPE="text" NAME=chiffre SIZE=14></td>
   </tr>
   <tr>
     <td colspan=3 align=center><a href="javascript:ccc14(document.forms[3]);"><img src="pics/btn_berekenen.gif" border=0></a>
 <a href="javascript:resetForm(3)"><img src="pics/btn_wissen.gif" border=0></a>
     </td>
   </tr>
   </FORM>
    <tr>
     <td colspan=3>EAN/UCC-identificatie van logistieke eenheden (SSCC)</td>
   </tr>
   <FORM>
   <tr>
     <td colspan=3><br><b>EAN/UCC14</b></td>
   </tr>
   <tr>
     <td><B><i>EAN/UCC14 code</i></B></td>
     <td colspan=2><B><i>Controlecijfer</i></b></td>
   </tr>
   <tr>
     <td><INPUT TYPE="text" NAME=numero SIZE=17 MAXLENGTH=17></td>
     <td align=center><INPUT TYPE="text" NAME=cc SIZE=1></td>
     <td> </td>
   </tr>
   <tr>
     <td colspan=3 align=center><a href="javascript:ccc18(document.forms[4]);"><img src="pics/btn_berekenen.gif" border=0></a>
     <a href="javascript:resetForm(4)"><img src="pics/btn_wissen.gif" border=0></a></td>
   </tr>
   </FORM>
</table></td><td valign=top width=130></td></tr></table></div>
      <div id="divScroll2" class="clScroll"></div>
      <div id="divScroll3" class="clScroll"></div>
      <div id="divScroll4" class="clScroll"></div>
      <div id="divScroll5" class="clScroll"></div>
      <div id="divScroll6" class="clScroll"></div>

</div>
<div id="divControl">
      <div id="pijlup" name="pijlup" style="position:absolute; left:591; top:49"><a href="#" onMouseOver="scroll(5)" onmousedown="scroll(15)" onMouseOut="noScroll()"><img src="pics/btn_pijlUp.gif" border=0></a></div>
      <div id="pijldown" name="pijldown" style="position:absolute; left:591; top:266"><a href="#" onMouseOver="scroll(-5)" onmousedown="scroll(-15)" onMouseOut="noScroll()"><img src="pics/btn_pijlDown.gif" border=0></a></div>
</div>

</body>
</html>


I hope you know what you asked! ;-)

I'm looking at in Navigator 4.7 and I'm not experiencing any JS problems.

However the entire page is going to fall to pieces if the Navigator window is resized so you might consider putting  onResize="self.location.reload()" in the BODY tag. I can see the form elements OK, but some of them dissappear when the layer is moved. This is a redraw problem between Netscape and the OS. You'll notice if you bring another window in front of it and then refocus the window with the form elements they will be visible again. Usual Windows BS.

I suggest, that at the end of the day, you would be better off redirecting Navigator users to a simpler page.

This should be posted as a second question, mkdebont, so that new points can be awarded.