• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 229
  • Last Modified:

Vertical Scroll in IE, but not NN

The following html will display the vertical scroll bar, if necessary, in IE, but not in NN.

There is a similar question dealing with a scroll bar not appearing in NN (Title: "ie scroll and not netscape").  It deals with frames and doesn't seem to apply to this situation.

What is the problem?

<html>
<head>
<title>forms</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginwidth="0" marginheight="0" scrolling="yes">

<div id="Layer1" style="position: absolute; width: 470px; height: 435px; z-index: 1; left: 165px; top:
90px">
  <table width="389" border="0" cellspacing="0" cellpadding="0" height="148" name="forms">
    <form name="form1" >
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          1</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="checkbox">
          2</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          3</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="checkbox">
          4</td>
        <td height="25" width="59"><a href="forms//foo.pdf">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          5</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="checkbox">
        6</td>
        <td height="25" width="59"><a href="forms//foo.pdf">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
            <input type="checkbox" name="" value="checkbox">
        7</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="checkbox">
        8</td>
        <td height="25" width="59"></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
        9</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="checkbox">
          10</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          11</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="checkbox">
          12</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          13</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="checkbox">
          14</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          15</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="checkbox">
          16</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="70" width="391">
          <div align="center">
            <input type="submit" name="GetForms" value="Get Forms">
            <input type="reset" name="Reset" value="Reset">
          </div>
        </td>
       
      </tr>
    </form>
  </table>
</div>

<div id="Layer2" style="position:absolute; width:70%; height:55px; z-index:2; left: 165px; top: 600px">
  PDF format allows you to view your form electronically on most computers. The freely available
  <a href="http://www.adobe.com/prodindex/acrobat/readstep.html">Adobe Acrobat reader</a> is required to view and print PDF files.</div>

</body>
</html>

0
jdaues
Asked:
jdaues
  • 2
  • 2
1 Solution
 
moncsiCommented:
When you use divisions Netscape is really picki.  You need to put your two exsisting layers on top of one big layer with no height and width attributes starting a top=0 and left=0.

This will allow you to scroll in both browsers.

I have dealt with this several times before and this seems to be the only solution.

(For simplicity I have moved the div attributes into a style tag.)
Example:

<html>
<head>
<title>forms</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#main (position:absolute; left:0; top:0}
#main1 {position: absolute; width:470; left:172; top:0}
#main2 {position:absolute; width:570; left:62; top:680}
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginwidth="0" marginheight="0">
<DIV ID="main">
<div id="main1">
<form name="form1" > 
  <table width="389" border="0" cellspacing="0" cellpadding="0" height="148" name="forms">
   
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          1</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          2</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          3</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          4</td>
        <td height="25" width="59"><a href="forms//foo.pdf">something
        </a></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          5</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="">
        6</td>
        <td height="25" width="59"><a href="forms//foo.pdf">
        </a></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
            <input type="checkbox" name="" value="">
        7</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="">
        8</td>
        <td height="25" width="59"></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
        9</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          10</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          11</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          12</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          13</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          14</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          15</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          16</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="70" width="391">
          <center>
            <input type="submit" name="GetForms" value="Get Forms">
            <input type="reset" name="Reset" value="Reset">
          </center>
        </td>
            <td>
        </td>
       
      </tr>
     
  </table>
</form>
</div>

<div id="main2">
  PDF format allows you to view your form electronically on most computers. The
  freely available <a href="http://www.adobe.com/prodindex/acrobat/readstep.html">Adobe
  Acrobat reader</a> is required to view and print PDF files.
</div>
</div >

</body>
</html>
0
 
jdauesAuthor Commented:
OK, looking pretty good, with one exception.  
in this line:
#main1 {position:absolute; width:500; left:200; top:0}

it seems to ignore "left:200". main1 appears left justified.  what's wrong here?

(here is the code:)


<html>
<head>
<title>forms</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#main (position:absolute; left:0; top:0}
#main1 {position:absolute; width:500; left:200; top:0}
#main2 {position:absolute; width:500; left:50;  top:500}
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginwidth="0" marginheight="0">
<DIV ID="main">
<div id="main1">
<form name="form1" > 
  <table width="389" border="0" cellspacing="0" cellpadding="0" height="148"
name="forms">
     
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          1</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          2</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          3</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="">
        4</td>
        <td height="25" width="59"><a href="forms//foo.pdf">
        </a></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="checkbox">
          5</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="">
        6</td>
        <td height="25" width="59"><a href="forms//foo.pdf">
        </a></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
            <input type="checkbox" name="" value="">
        7</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
            <input type="checkbox" name="" value="">
        8</td>
        <td height="25" width="59"></td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
        9</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          10</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          11</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          12</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          13</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          14</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="25" width="391" bgcolor="#CCCCFF">
          <input type="checkbox" name="" value="">
          15</td>
        <td height="25" width="59" bgcolor="#CCCCFF">
        </td>
      </tr>
      <tr>
        <td height="25" width="391">
          <input type="checkbox" name="" value="">
          16</td>
        <td height="25" width="59">
        </td>
      </tr>
      <tr>
        <td height="70" width="391">
          <center>
            <input type="submit" name="GetForms" value="Get Forms">
            <input type="reset" name="Reset" value="Reset">
          </center>
        </td>
        <td>
        </td>
         
      </tr>
     
  </table>
</form>
</div>

<div id="main2">
  PDF format allows you to view your form electronically on most computers. The
  freely available <a href="http://www.adobe.com/prodindex/acrobat/readstep.html">Adobe
  Acrobat reader</a> is required to view and print PDF files. <br><br>
</div>
</div > 

</body>
</html>




















0
 
moncsiCommented:
I apologize there is a typo in the code:
#main (position:absolute; left:0; top:0}

The starting opening parenth needs to be change to an opening bracket!

that will fix the positioning!

OOps!
0
 
jdauesAuthor Commented:
doh!
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now