georgie82
asked on
Layers using div tag in Netscape and IE
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
"http://www.icra.org/ratingsv02.html"; l gen true for
"http://www.caladan.net";
r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html"; l
gen true
for "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")&&(p
document.MM_pgW=innerWidth
else if (innerWidth!=document.MM_p
}
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_pre
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"> </p>
<p class="content"> </p>
<div id="background" style="position:absolute; width:750px; height:996px; z-index:1; left: 8; top: 21px; background-image: url(images/background/back
<p> </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"
</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’s what the ‘A’ in ADSL stands for!)</li>
<li>You don’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
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><input name="a1" type="text" id="a1" size="30"></td>
</tr>
<tr>
<td class="content"> </td
<td><input name="a2" type="text" id="a2" size="30"></td>
</tr>
<tr>
<td class="content"> </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:</t
<td><input name="co" type="text" id="co" size="30"></td>
</tr>
<tr>
<td class="content">Country:</
<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><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
</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> </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>
<font color="#006363" size="2" face="Arial, Helvetica, sans-serif">©
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>
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
"http://www.icra.org/ratingsv02.html"; l gen true for
"http://www.caladan.net";
r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html"; l
gen true
for "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")&&(p
document.MM_pgW=innerWidth
else if (innerWidth!=document.MM_p
}
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_pre
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"> </p>
<p class="content"> </p>
<div id="background" style="position:absolute; width:750px; height:996px; z-index:1; left: 8; top: 21px; background-image: url(images/background/back
<p> </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"
</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’s what the ‘A’ in ADSL stands for!)</li>
<li>You don’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
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><input name="a1" type="text" id="a1" size="30"></td>
</tr>
<tr>
<td class="content"> </td
<td><input name="a2" type="text" id="a2" size="30"></td>
</tr>
<tr>
<td class="content"> </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:</t
<td><input name="co" type="text" id="co" size="30"></td>
</tr>
<tr>
<td class="content">Country:</
<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><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
</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> </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>
<font color="#006363" size="2" face="Arial, Helvetica, sans-serif">©
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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?
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?
You mentioned that the CSS doesn't work for the pages with the folders.. is it working ok for your index.html page?
ASKER
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.
i havent got any nested layers, and the rollover images are in a table, it is for a nav bar.
That's a different question entirely.. you should start a new question with more specifics about your probelem.
ASKER
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!
Can this question be closed now, it has been answered!
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/'+userBrow
document.write(load_css);
name your external css documents: nn6.css, ie4.css, nn4.css, and multi.css