Solved

Vertical Scroll in IE, but not NN

Posted on 2000-04-18
4
221 Views
Last Modified: 2010-04-09
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
Comment
Question by:jdaues
  • 2
  • 2
4 Comments
 

Accepted Solution

by:
moncsi earned 50 total points
ID: 2728360
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
 

Author Comment

by:jdaues
ID: 2728622
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
 

Expert Comment

by:moncsi
ID: 2728646
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
 

Author Comment

by:jdaues
ID: 2728758
doh!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

911 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now