By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

DOCTYPE problem under Mozilla!

P: n/a
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. &copy;2004</P>
<BR>
</div>
</BODY>
</HTML>

Thanks so much for your time

Patrick
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
"Patrick" <va******@netzero.net> wrote in
comp.infosystems.www.authoring.stylesheets:
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


URL? (Yes, I saw your code snippets, but bitter experience has
taught that what people put in their newsgroup postings, even with
the best will in the world, isn't what was actually on the server.)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #2

P: n/a
Just a few comments (on top to tease any pompous ass in the house)
(especially those who don't know an url when they see one)

Don't set absolute font sizes (pt or px) -- use percentages so the observer
can adjust the size.

Don't set absolute widths (px). Use em so width will adjust to
font size. Same with critical margins.

Don't break (BR) your lines, let them word-wrap so they can
adjust themselves to the screen width and font size.

You place <HR> by its position in the html code.
Don't then tell it where to be by the style -- confuses some browsers.

I like your colors. The font Verdana is deprecated here.

I am renowned expert of two months playing with css.

Mason C http://masonc.netcom.com/1index.htm. (comments welcomed)

now here's the *bottom* :

On 4 Apr 2004 13:51:59 -0700, va******@netzero.net (Patrick) wrote:
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. &copy;2004</P>
<BR>
</div>
</BODY>
</HTML>

Thanks so much for your time

Patrick


Jul 20 '05 #3

P: n/a
MasonC wrote:
Just a few comments (on top to tease any pompous ass in the house)
(especially those who don't know an url when they see one)

now here's the *bottom* :

On 4 Apr 2004 13:51:59 -0700, va******@netzero.net (Patrick) wrote:


Given that you obviously know how to behave on Usenet...

http://www.allmyfaqs.com/faq.pl?How_to_post

.... but refuse to. Plonk.

(Hint: Shouting "I'm going to be rude" and then doing so is not funny)

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Jul 20 '05 #4

P: n/a
On 4 Apr 2004 13:51:59 -0700, va******@netzero.net (Patrick) wrote:
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). The page is temporarily at http://www.geocities.com/vaindioux/


I can't see exactly what the problem is, but you seem to be caught in
two minds about how to lay out the page. One can either position
everything, or one can use the normal flow together with margin/padding
and floats where appropriate. You seem to have mostly gone for the
former, but with bits of margins and things here and there.

My experience suggests that the latter is simpler to get right and
adjusts better to windows of verying widths.

I suggest you try a version with all the positioning stripped out and
with margin/padding and floats - see if you prefer it.

And as already mentioned, try to avoid px and pt units for screen use,
and use relative units.
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #5

P: n/a
MasonC wrote:

Don't set absolute font sizes (pt or px) -- use percentages so the observer
can adjust the size.


I would be inclined to rephrase this as -- use percentages so the
observer won't need to adjust the size.

This would be more likely true if body text were left at the default
size (100%), of course.

--
Reply address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #6

P: n/a
Stephen Poley <sb******************@xs4all.nl> wrote

I can't see exactly what the problem is, but you seem to be caught in
two minds about how to lay out the page.
Hi

Stan Brown:
URL?


Stan the URL is in my original post.

Mason C:

Man, simply great tips and general advice.I have started correcting my
code with what you wrote and it already makes a big difference. Thanks
so much for your great help.

David Dorward:

Dave, Mason has been great help and i really don't care if people top
post when they are going to be as helpfull as he has been. Nothing
against you dave just a general point.

kchayka:

Good extra point made.Thanks!

Stephen Poley:

Man just as Mason above, thanks so much. I haven't started
implementing the changes that you recommended, i am still playing with
what Mason said since i have very little time during the week. You are
so right about me beeing caught in two minds about how to layout my
page. I am going to work on what you recommend ASAP. Thanks for
putting me on the right tracks.BTW i was just checking your
"webmatters" page over the week-end and it made me validate and
discover this doctype mess.I just thought i would let you know that
your page already helped me and since it's bookmarked in my favorites,
it will again i am sure.

Thanks to all of you and especially Mason and Stephen.

Best regards

Patrick
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.