Hi
I am fairly new to CSS and the web.I am trying to build a site more to
practice my skills than for the site itself.
I have been focusing on CSS and try my best to make it work in I.E
6.0, Opera 7.23, Mozilla 1.4 and N.N. 7.1.
My site was doing fine until i read i was supposed to keep everything
validated so i entered a strict html 4.01 doctype with url
following.My HTML validated fine.
So i validated my CSS and beside a little annoyance with the
font-family which i don't want to deal with right now so i commented
it out for now, all was fine.
HTML 4.01 strict validated
CSS2 validated
Now after i added the doctype, Mozilla and N.N. won't display my
header "After dark".It's actually there, it is behind the <DIV> called
yourbox (I found out when i entered a negative value to the top
property like top: -10px of the P.header).
I have just searched this group and the web and read a lot about
Mozilla standards and quirks mode but still i can't find a solution to
my problem.
For now i have replaced my strict 4.01 doctype with url with a
transitional 4.01 doctype without url and that allows me to validate
and Mozilla and N.N. display my header fine.
When you look at my code and the doctype at the top, i have left the
strict doctype that i would rather have but i commented it out for
now.Also in my style the font-family property is also commented out
twice as i want to focus on fixing the doctype problem first.
The page is temporarily at http://www.geocities.com/vaindioux/ (Beware
that you can't validate HTML from that page as geocities adds all kind
of code to the page.)
Please view it with Mozilla or N.N and also activate the 4.01 strict
doctype and deactivate the transitional one and you will see my header
disappear.
One more note, my geocities site don't display well with I.E but if
you copy and paste my code below in notepad and open the file with
I.E. on your hard drive it will display well, it's a geocities bug
(Remember I.E isn't my problem at this point).
Here is the whole code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">-->
<HTML>
<HEAD>
<TITLE>After dark</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1">
<STYLE TYPE="text/css">
P.header{
top: 0px;
text-align: center;
/*font-family: serif;*/
font-size: 700%;}
#yourbox {border: 2px solid #FF9900;
font-size: 15pt;
margin-left:100pt;
margin-top: 15pt;
text-align: justify;
background: #996600;
position: absolute;
top: 110px;
left: -20px;
}
#Button a{
border: 4px solid #FF9900;
background-color:#996600;
color: #000000;
display: block;
/*font-family: verdana;*/
font-size: 10px;
font-weight: bold;
width: 90px;
padding: 3px 5px;
margin: 1px;
}
#Button a:hover{
border: 4px solid #FFCC00;
color: #FFFFFF;
}
#newsbox{border: 2px solid #FF9900;
font-size: 15pt;
margin-left:100pt;
margin-top: 15pt;
text-align: justify;
background: #996600;
position: absolute;
top: 300px;
left: -20px;
}
..top{position:absolute;
top: 115px;
height: 5px;
background-color:black;
color: black;
width: 98%;
}
..bottom{position:absolute;
top: 485px;
height: 5px;
background-color:black;
color: black;
width: 98%;
}
#links {position: absolute;
top: 500px;
margin-left: 13%;
margin-right: 13%;
}
a:link {color: black; text-decoration: underline; }
a:visited {color: black; text-decoration: underline; }
a:hover {color: #ffffff; text-decoration: none; }
a:active {color: #0000ff; text-decoration: underline; }
</STYLE>
</HEAD>
<BODY STYLE="background: #336600">
<P CLASS="header">after dark</P>
<HR CLASS="top">
<DIV ID="Button" style="position: absolute; left: 0px; top: 180px;">
<DIV><A HREF="#">MOVIES</A></DIV>
<DIV><A HREF="#">NEWS</A></DIV>
<DIV><A HREF="#">TRIVIA</A></DIV>
<DIV><A HREF="#">LINKS</A></DIV>
<DIV><A HREF="#">EXTRAS</A></DIV>
<DIV><A HREF="#">GUESTBOOK</A></DIV>
<DIV><A HREF="#">CONTACT</A></DIV>
<DIV><A HREF="#">SITE MAP</A></DIV>
<DIV><A HREF="#">ABOUT</A></DIV>
</DIV>
<DIV ID="yourbox">
<P>Welcome surfer to the after dark website, this site was created to
give infos<BR> about horror and sci-fi movies released on DVD that I
have
seen or plan on<BR> seeing.You will find here pictures, brief reviews,
movie ratings, horror and<BR> sci-fi DVD's related links along with
trivias to test your knowledge and other<BR> goodies treating on the
subject.This site is primarily created to have fun and<BR> will only
grow
with time, please feel free to sign my guestbook.</P>
</DIV>
<DIV ID="newsbox">
<P>Latest news</P>
<UL>
<LI>John Romero's last project</LI>
<LI>Jeepers creepers 3???</LI>
<LI>Alien DVD gift set</LI>
</UL>
</DIV>
<HR CLASS="bottom">
<DIV ID="links">
<a href="#">Movies</a> |
<a href="#">News</a> |
<a href="#">Trivia</a> |
<a href="#">Links</a> |
<a href="#">Extras</a>|
<a href="#">Guestbook</a>|
<a href="#">Contact</a> |
<A HREF="#">Site map</A> |
<A HREF="#">About</A>
<BR>
<P>All right reserved. ©2004</P>
<BR>
</div>
</BODY>
</HTML>
Thanks so much for your time
Patrick
