Layers using div tag in Netscape and IE

georgie82
georgie82 used Ask the Experts™
on
I have created a page with layers using the <div > tag, which looks fine in IE, but when I tried it in Netscape 4.6 it is all wrong! It works fine in Netscape 7.0
I imported the css into an external file, which worked once, but I cant get Netscape to show the css again!
also i want my background in a layer because I want a predetermined background size as opposed to across the whole screen, but the background doesnt work correctly in Netscape 4.6.
Im not bothered if the css doesnt work in Netscape, but I would like it to do so, also I want my background to work too!
if the background is in an extrenal style sheet it doesnt show up on netscape apart from behind the form, where it shows  a tiny top section of the image and repeats that instead of the whole image!
is there any way for me to implement code that will work for IE and netscape (showing the layout of the layers the same) or do i have to have seperate css files for netscape and ie, and if so what is the javascript to call these, and what does the netscape css have to look like
Thanks in advance for any help, it is extremely appreciated!
My code is shown below, I have created the page using Dreamweaver MX, so if you know any easy options in there to help, let me know also! Thanks again!

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Village Broadband provided by Caladan Communications Ltd</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="PICS-Label" content='(PICS-1.1

&quot;http://www.icra.org/ratingsv02.html"; l gen true for

&quot;http://www.caladan.net";

r (cz 1 lz 1 nz 1 oz 1 vz 1) &quot;http://www.rsac.org/ratingsv01.html"; l

gen true

for &quot;http://www.caladan.net"; r (n 0 s 0 v 0 l 0))'>
<script language="JavaScript">
<!--


function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
<!--
.content {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12pt;
      font-style: normal;
      color: #006363;
}
.title {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18pt;
      font-style: normal;
      color: #006363;
}
.subtitle {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14pt;
      font-style: normal;
      color: #006363;
}
-->
</style>
</head>

<p class="title">&nbsp;</p>
<p class="content">&nbsp;</p>
<div id="background" style="position:absolute; width:750px; height:996px; z-index:1; left: 8; top: 21px; background-image: url(images/background/background.gif);  border: 1px none #000000;">
  <p>&nbsp;</p>
  <div id="logo" style="position:absolute; width:182px; height:41px; z-index:2; left: 0px; top: -13px;" class="background">
    <p class="content"><a href="http://www.caladan.co.uk"><img src="images/logofinal.gif" alt="Caladan Communications Ltd" width="245" height="73" border="0"></a></p>
  </div>
  <div id="content" style="position:absolute; width:738px; height:443px; z-index:3; left: 11px; top: 67px;" class="content">
    <p class="title"><img src="images/adsl.gif" width="100" height="100"></p>
    <div id="Layer1" style="position:absolute; width:637px; height:121px; z-index:3; top: 0px; left: 101px;">
      <p class="title">Broadband Internet Access for Wollaston</p>
      <p class="content">As you may (or may not) know BT is currently unable to
        provide a timescale for providing ADSL in Wollaston, this usually means
        that there are not enough potential customers for them to make it financially
        viable. So what can you do right now, if you want high speed internet
        access?</p>
      </div>
    <div id="Layer3" style="position:absolute; width:739px; height:784px; z-index:5; left: 0px; top: 122px;">
      <p>
        <br>
      We have the answer, in the form of: <strong>Wireless Broadband</strong>
      </p>
      <p>The cost is comparable to ADSL but it has distinct advantages over
          ADSL, for example:</p>
       
      <ul>
        <li>The bandwidth is the same in both directions, unlike ADSL which is
          Asymmetrical (that&#8217;s what the &#8216;A&#8217; in ADSL stands for!)</li>
        <li>You don&#8217;t need a phone line to take part</li>
        <li> Depending on your distance from the base station the available bandwidth
          can be greater and of better quality than ADSL</li>
     
      </ul>
        If you require more information about Village Broadband<a href="faq.html" target="_blank"onMouseOver="window.status='Frequently Asked Questions and Answers'; return true" onMouseOut="window.status=''; return true">
      click here</a></a> .<br>
      <br>
      If you are interested in receiving this service, please let us know by completing
      the form below.
      <form action="/subscribe.php" method="post" name="CUSTdetails" id="CUSTdetails" onSubmit="return doit(this)">
        <table width="99%" border="0">
          <tr>
            <td width="35%" class="content">Name:</td>
            <td width="33%"><input name="nm" type="text" id="nm" size="30"></td>
          </tr>
          <tr>
            <td class="content">Address:</td>
            <td><input name="a1" type="text" id="a1" size="30"></td>
          </tr>
          <tr>
            <td class="content">&nbsp;</td>
            <td><input name="a2" type="text" id="a2" size="30"></td>
          </tr>
          <tr>
            <td class="content">&nbsp;</td>
            <td><input name="a3" type="text" id="a3" size="30"></td>
          </tr>
          <tr>
            <td class="content">City:</td>
            <td><input name="ci" type="text" id="ci" size="30"></td>
          </tr>
          <tr>
            <td class="content">County:</td>
            <td><input name="co" type="text" id="co" size="30"></td>
          </tr>
          <tr>
            <td class="content">Country:</td>
            <td><select name="cu" id="cu">
                <option value=00 > 
                           
               
                 
                <option value=GB selected>United Kingdom
                <option value=UM >United States Minor Outlying Islands
                <option value=US >United States of America
                 </select></td>
          </tr>
          <tr>
            <td class="content">Postcode:</td>
            <td><input name="pc" type="text" id="pc"></td>
          </tr>
          <tr>
            <td class="content">Telephone number:</td>
            <td><input name="tl" type="text" id="tl"></td>
          </tr>
          <tr>
            <td class="content">Fax number:</td>
            <td><input name="fn" type="text" id="fn"></td>
          </tr>
          <tr>
            <td class="content">E-mail address:</td>
            <td><b><font face="Arial, Helvetica, sans-serif" size="2">
              <input name="em" type="text" id="em"onMouseOver="window.status='Enter your e-mail address here'; return true" onMouseOut="window.status=''; return true" size="40">
              </font></b></td>
          </tr>
          <tr>
            <td class="content"> Comments:</td>
            <td><textarea name="nt" cols="30" id="nt"></textarea> </td>
          </tr>
          <tr>
            <td class="content">Click on the Submit button to submit your details</td>
            <td><input name="Submit" type="submit" id="Submit" value="Submit"></td>
        </table>
      </form>
        <p>Alternatively you can call us on 01933 666970, or pop in and talk to
        us at 1 Newton Road, Wollaston, on the corner next to the Chip shop. </p>
      <p>&nbsp; </p>
    </div>

  </div>
  <div id="Layer4" style="position:absolute; width:277px; height:50px; z-index:4; left: 303px; top: 11px;" class="title"><font size="6">Village
    Broadband </font></div>
</div>
<div id="footer" style="position:absolute; width:749px; height:49px; z-index:2; left: 8px; top: 992px;">
  <div align="center"><a  class="tandc">
    <hr>
    &nbsp;&nbsp;<font color="#006363" size="2" face="Arial, Helvetica, sans-serif">&copy;
    Copyright 2002 </font></a><font color="#006363" size="2" face="Arial, Helvetica, sans-serif">Caladan
    Communications Ltd</font><font size="2" face="Arial, Helvetica, sans-serif"><br>
    </font></div>
</div>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
wo
you may need to load separate style sheets depending on the client browser. you could use something like this:

userBrowser = "multi";
if(document.getElementById)
userBrowser = "nn6";
if(document.all)
userBrowser = "ie4";
if(document.layers)
userBrowser = "nn4";

load_css = "<LINK REL=\"StyleSheet\" type=\"text/css\" HREF=\"includes/'+userBrowser+'.css\">"
document.write(load_css);

name your external css documents: nn6.css, ie4.css, nn4.css, and multi.css
Commented:
Netscape 4 is known to have a lot of bugs when it comes to implementing CSS - there are a number of things it just can't do.

With Netscape 4, backgrounds don't fill the whole layer, it only fills the part of the layer that contains something. The way I've found to get around this is to use one layer purely for the background, and another for the
content to appear inside that layer.

For the background layer:

- subtract 10 px from the value of the left and top
  positions, as NN4 automatically adds 10px padding.
  Unless this gives you negative values, you may want
  to use different style sheets for NN4 vs everything
  else so that the positioning of the layer is ok.

- border: none; (which are doing anyway)

- set a default background colour using Netscape's
  proprietary
  layer-background-color: #ffffff;
 
- z-index: 0;

Inside this background layer, use a transparent gif (1 px x 1 px is sufficient) that fills the layer by setting its height and width to the value you want. So now the layer is filled, NN4 will display the background!

For the layer with the content, use a higher z-index and also use border: none;  

Something else I have found out the hard way is that in order for style sheets to work in Netscape 4, they must be in the ROOT of your web directory. Wherever your main index.html page is, keep your stylesheet(s), particularly your NN4 one, there too.

Author

Commented:
I hane kept my nn4 style sheet in the root directory but my other html files are organidsed into folders, ie my index.html for the website is where the css is, but my other files are located in folders within the directory the index.html and css files are located. the css doesnt seem to work for the background layer when i apply it to the pages withing the folders, will i have to take them all out of the folders?
Ensure you’re charging the right price for your IT

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

Commented:
No, you can keep your HTML files in folders... it's just the style sheets that you can't place in separate folders if you want NN4 to detect them.

You mentioned that the CSS doesn't work for the pages with the folders.. is it working ok for your index.html page?

Author

Commented:
yes its working okay for the index page now. i have sorted the background layer issue but are now struggling with rollover images. i have found code that works on other sites which basically modifies the mouseover method by adding document etc, but i cant get it to work with mine? any suggestions?
i havent got any nested layers, and the rollover images are in a table, it is for a nav bar.

Commented:
That's a different question entirely.. you should start a new question with more specifics about your probelem.

Author

Commented:
The CSS background works as long as the background gif used for all html files is in the same folder as the file.

Can this question be closed now, it has been answered!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial