Forum Moderators: open
I just did a check and opened the template with firefox the way i downloaded it. worked the way it should so it seems it's something i've done to cause this. the main thing i've done with the template is deleted the header it used and put my one but with another size. i might have done other stuff too without noticing but if it works in internet explorer, it's probbably something simple that is causing other browsers not to read it properly.
[edited by: justAname at 1:19 pm (utc) on July 5, 2008]
but when i tested it today in other browsers, only the header and the writing come up. background and all the rest of the style is gone......
I did a validator check for errors and the usual ones came up, something wrong with the meta tags but they seem alright to me and i don't think meta tags can destroy the whole style.
If you're missing **ONE** closing quote, or have them in the attribute, like
<meta name="description" content="My site>
</head>
<body> .....
or
<meta name="description" content="My "cool" site">
</head>
<body> .....
It will sometimes cause the browser to think whole sections are part of that attribute, causing large portions or all the page to disappear. This is one of those things that one browser or the other may seem more forgiving.
In these cases, trial and error works - cut out chunks of the code in a test file until it completely validates, then see if it goes away.
Edit: Did a check opened my index file with dreamweaver and clicked preview in firefox, worked the way it should so why doesn't it work on the real version? i will still try to find if it's something to do with the code.
[edited by: justAname at 5:14 pm (utc) on July 5, 2008]
i edited all the code mistakes i could and still not a single change. maybe it's something to do with the style but it was html strict valided when i checked it with no editings, did so now again to make sure, it only had 1 error which i cannot not understand:
54 #header Value Error : text-align Parse Error
now i have removed the header if thats what it means or something but can that really be the problem?
[edited by: justAname at 8:20 pm (utc) on July 5, 2008]
/**************************************************/
/* Body and Wrapper */
/**************************************************/
body {
background: #000099 url(back.png) top center repeat-x;
margin: 0;
padding: 0;
font: normal 8pt/13pt verdana, arial,sans-serif;
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 0;
text-align: left;
}
/**************************************************/
/* Top Piece */
/**************************************************/
#top {
background: url(bgtop.png) top center no-repeat;
width: 800px;
height: 78px;
}
/**************************************************/
/* Content
another wrapper that holds all the content */
/**************************************************/
#content {
background: url(bgmiddle.png) center repeat-y;
width: 766px;
height: 100%;
padding: 0px 17px 0px 17px;
}
/**************************************************/
/* All the content */
/**************************************************/
#header {
background: url(header.png) top center no-repeat;
width: 746px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: ;
}
/* Menu */
#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
}
#menu li a {
height: 37px;
voice-family: "\"}\"";
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}
#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background: url(off.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}
#menu li a:hover {
color: blue;
background: url(on.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
#stuff {
background: url(texttop.png) top left no-repeat;
width: 520px;
margin: 0px 0px 0px 220px;
padding-top: 55px;
border: 2px navy;
}
img {
border: none;
}
/**************************************************/
/* Bottom */
/**************************************************/
#bottom {
background: url(bgbottom.png) bottom center no-repeat;
width: 800px;
height: 50px;
}
and my edited actual web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="file:///C¦/Documents and Settings/marti/Desktop/template/style.css" />
<meta name="Keywords" content=" Keywords of Website ">
<meta name="Description" content=" Description of Website ">
<style type="text/css">
<!--
.style3 {font-size: xx-large}
.style7 {font-size: 11px}
.style8 {
font-size: 24px
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
</div>
<div id="content">
<p><img src="network5.JPG" alt="" width="700" height="140" /></p>
<div id="menu">
<ul>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
<li><a href="/s.html">DSD</a></li>
</ul>
</div>
<div id="stuff">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><br />
<br />
</p>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
file:///C�/Documents and Settings/marti/Desktop/template/style.cssfile:///C?/if you're not using your own home server then try changing that entire url to a relative url instead.
something like this...
template/style.css../template/style.css[as a side note... you need to put some closing slashes on your keyword and description meta tags as well, because the strict doctype requires them]
So the whole thing was that i needed to paste the images into my local sites folder and to change that line of code to style.css
i just wander how come Internet explorer got the style and the images!? Google cache could too! so why can't the other browsers? i'm kind of confused.
[edited by: justAname at 12:58 pm (utc) on July 6, 2008]
