Forum Moderators: not2easy
I've built a site using DW layers, and it looks good on IE, but on Netscape, it only shows the raw content and not the layer backgrounds and layout etc.
Three questions...
1. Doing a target browser check brings up some erros such as "CSS property height is not supported [Netscape Navigator 4.0]" and "CSS property layer-background is not supported..." (the last one isn't supported by IE5, 5.5, 6 and NS 4.0, 6.0, 7,0). Will these type of errors cause NS to simply not show any of the CSS styling?
2. On the above example, why does DW even bother to give the option for layer-background if none of the main browsers support it?
3. Is there anywhere on the WebmasterWorld for people to post URLs or code for others to look at and solve problems? I've seen people post snippets of code, but I guess I'd need to post the CSS file as well as the HTML, or let someone see the test site. I'd be happy to pay someone to take a quick look and point out the problem... I'm sure it's obvious but I seem to be blind to my own code now...
I'd be grateful for any help
Thanks
Dave
{ background-image: url(/images/file.ext)
I use "background-image: url(/images/file.ext)" for images already thanks... now I look at the code again, I can't even work out why I used layer-background anymore, so I've taken it out... still doesn't work in NS though :(
I have used background-repeat though, which DW says causes serious redraw problems... could that be it?
Leosghost, thanks for the welcome, and I sympathise with you... unfortunately I'm not conversant enough with css to help you, sorry!
lexis200
I'm still having problems with this... is there anyone prepared to have a quick look at the site/code and tell me where I've gone wrong? It will probably be SO obvious to one of you, but I just don't get it... IE6 shows it beautifully, NS just shows a jumble of text and images.
Something else weird, When I validate it at w3.org, if I have the doctype in the code, it validates but doesn't show in either IE or NS, but when I take the doctype out, it doesn't validate (obviously) but shows properly in IE. Anyone shed any light on this as well?
Just a thought, I don't suppose it's anything to do with me using Dreamweaver layers?
Thanks for any help
Dave
I've reduced the html as best I can but I'm not sure what bits might be causing the problem and therefore how much is necessary.
As for the CSS file, I've just copied it verbatim. Sorry but they're both a bit long.
Also, please be aware that I'm very much at the beginning of the html/css learning cycle, so the code is probably much messier that you are all used to, sorry about that!
I've tried this on Mozilla 1.6 and NS 7.1 and doesn't work on either. IE shows it perfectly.
<html>
<head>
<title>template 2</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="/templates/boschgarage.css" rel="stylesheet" type="text/css">
<script>
<!--
//reloads the window if Nav4 resized
function MM_reloadPage(init) {
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);
-->
</script>
<script src="/templates/boschgarage.js" type="text/javascript"></script>
</head><body>
<div class="container">
<div class="left">
<!--#include file="menu.shtml" --></div>
<div class="top">
<div align="right"style="z-index:8;">
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><!--#config timefmt="%A, %d %B, %Y" -->
<!--#echo var="DATE_LOCAL" --></font></p>
</div>
<div id="Banner" style="position:absolute; left:1px; top:15px; width:760px; height:79px; z-index:1" class="banner">
<div id="garagelogo" style="position:absolute; left:429px; top:0px; width:280px; height:87px; z-index:7;"><img src="/images/garagebanner1.jpg" hspace="15" vspace="9" alt="A BCS Member garage">
</div>
</div>
<div id="boschlogo1" style="position:absolute; left:26px; top:-7px; width:100px; height:89px; z-index:6; background-color: #FFFFFF; border: 1px none #000000;" class="menuitems">
<div align="center"><div><img src="/images/bcs-logo.jpg" width="100" height="100" alt="BCS"></div>
</div>
</div>
</div><div class="divide"><img src="/images/transpix.gif" width="2" height="376" alt="BCS garage logo"></div>
<div class="main"><div id="Layer1" style="position:absolute; left:143px; top:76px; width:289px; height:195px; z-index:1">
<p align="center" class="main">Centralised text box</p>
<p align="center" class="main">Text goes here </p>
</div>
</div></div>
</body>
</html>
A:link {
COLOR: #FFFFFF; TEXT-DECORATION: none;
}
A:visited {
COLOR: #FFFFFF; TEXT-DECORATION: none;
}A:active {
COLOR: #0099FF; TEXT-DECORATION: none;
}A.nav:link {
color: #003366;
text-decoration: underline;
}
A.nav:visited {
TEXT-DECORATION: none;
color: #000000;
}
A.nav:active {
COLOR: #0099FF; TEXT-DECORATION: none;body {
margin: 0;
padding: 0;
}div {
border: 0px solid #000000;
}div.container {
position:absolute;
left:50%;
top:50%;
width:760px;
height:482px;
/* the width/2 */
margin-left:-365px;
/* the height/2 */
margin-top:-241px;
border:0px ;
text-align: left;
width: 760px;
height: 482px;
background-color: #006699;
color: #FFFFFF;
}div.left {
position: absolute;
top: 107px;
left: 0px;
width: 164px;
height: 359px;
background-image: url(/images/menugrad.jpg);
background-repeat: repeat-x;
margin-top: 10px;
margin-left: 10px;
border-right-color: #FFFFFF;
}div.top {
position: absolute;
top: 0px;
left: 0px;
width: 760px;
height: 109px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: #FFFFFF;background-color: #006699;
}div.main {
position: absolute;
top: 106px;
left: 180px;
width: 570px;
height: 357px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
background-color: #ecf0ff;
color: #003366;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
clip: 0px,570px,357px,0px;
overflow: hidden;
}div.maincontain {
position: absolute;
top: 108px;
left: 178px;
width: 570px;
height: 357px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
background-color: #ecf0ff;
color: #003366;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
clip: 0px,570px,357px,0px;
overflow: hidden;
}.banner {
background-color: #FFFFFF;
background-image: url("/images/fadeline.jpg");
}
.boschlogo {
}.menuitems {
font-size: 14px;
color: #FFFFFF;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-left: 5px;
font-weight: bold;
}.submenuitems {
font-size: 10px;
color: #FFFFFF;
text-align: left;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: lighter;
}.headline {color: #006699
font-family: Verdana, tahoma;
font-size: 18px;
font-family: Verdana, tahoma;
color: #003366;
}.normtext {
color: #006699;
font-family: Verdana, tahoma;
font-size: 11px;
}div.divide {
position: absolute;
top: 108px;
left: 182px;
width: 1px;
height: 340px;
background-color: #FFFFFF;
margin-top: 1px;
margin-left: 1px;
border-right-color: #FFFFFF;
}
.menuitemHome {
font-size: 14px;
color: #FFFFFF;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-left: 10px;
font-weight: bold;
}
.email {
color: #006699;
background-color: #006699;
}
.tagline {
font-family: Verdana, tahoma;
font-size: 16px;
color: #003366;
}
.frontpagetag {
font-family: Verdana, tahoma;
font-size: 18px;
color: #003366;
}
Dave
<link href="/templates/boschgarage.css" rel="stylesheet" type="text/css">
Cheers
Dave
[searchengineworld.com...] -- click on "Server Header Checker"
Sorry, misunderstood you there :)
Here's the results of the server header check
Server Response: [widget.com...]
Status: HTTP/1.1 200 OK
Date: Thu, 15 Jul 2004 08:56:35 GMT
Server: Apache/1.3.31 (Unix) mod_auth_passthrough/1.8 mod_log_bytes/1.2 mod_bwlimited/1.4 PHP/4.3.8 FrontPage/5.0.2.2634a mod_ssl/2.8.18 OpenSSL/0.9.7a
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html
It didn't mention anywhere about the css file.
Could this be the problem? I know the css file is used in IE because I can see the changes as I make them, but not in the latest NS or mozilla. I haven't even tried the older browsers yet!
Thanks for your continuing help!
Dave
I'm a bit confused now...
Dave
Running the header check on the css file certainly makes more sense... :)
The answer is Yes. The server sends the css file as Content-Type: text/css
Any other thoughts?
Cheers
Dave
Managed to get it sorted, thanks to another thread from the CSS forum... just so you know, the style sheet was failing at this point...
A.nav:visited {
TEXT-DECORATION: none;
color: #000000;
}
A.nav:active {
COLOR: #0099FF; TEXT-DECORATION: none;body {
margin: 0;
padding: 0;
}div {
border: 0px solid #000000;
}
as the body tag was blocking the rest of the style sheet from being parsed. No idea how it got there either, but I must have looked at it a hundred times without actually seeing it.
I eventually found it by installing Firefox and the developer tool, and looking at the CSS sheet that the browser saw. What a cool browser Firefox is... I'd recommend it to anyone!
Thanks for your initial help DrDoc
Cheers
Dave
No it wasn't the body rule. There's a curly brace missing at the end of the rule above..
A.nav:active {
COLOR: #0099FF; TEXT-DECORATION: none;
I guess this is a good time to emphasize the importance of validating your CSS [jigsaw.w3.org] and your markup [validator.w3.org].
On my laptop screen it is VERY difficult to see the difference between them.
Using the wrong one stops the CSS from working. The validator quickly points out the error.
