CSS Newbie - CSS Works With Invalid DOCTYPE. Fails With Valid DOCTYPE.

L

Larry Lindstrom

Hi Folks:

Developing on my Solaris system.

Long ago, in another century, I was a moderately competent HTML
novice.

I'm attempting to get up to speed with the HTML Dog tutorial. When
I'm finished with that I'm planning on moving to W3 School. Any
suggestions for a different approach or recommendations for a tutorial?

I was attempting to get external CSS working. I was happy with my
progress, until I realized that I had a typo in my DOCTYPE statement.

This is the DOCTYPE for the page that has a working CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The second line starts with an angle bracket where a quote is needed.

The page displays as I would hope the CSS would influence it.

Correcting the DOCTYPE typo seems to cause the CSS to be ignored and
the text to be displayed in the default colors.

W3C Markup Validation Service complains about the invalid "<"
character in the DOCTYPE, of the page that displays properly.

The HTML and the CSS Validation Services seem happy with the page that
ignores the CSS.

Here is the IP address of the page on my server:


http://67.171.145.190/htmldog_htdocs/02_css_beginner_tutorial/01_applying_css/

I hope I'm not opening myself up for an attack by giving out that URL.

I'm sure this is something stupid.

What am I doing wrong?

Thanks
Larry
 
R

Robin Rattay

Am 10.06.2012 12:22, schrieb Larry Lindstrom:
I'm attempting to get up to speed with the HTML Dog tutorial. When
I'm finished with that I'm planning on moving to W3 School. Any
suggestions for a different approach or recommendations for a tutorial?
Click to expand...

HTML Dog is a great tutorial, however you should avoid W3School (see
http://w3fools.com/). I can't think of another good tutorial, but I use
the Mozilla Developer Network as a reference. It includes inforamtion
about non-Mozilla browsers: https://developer.mozilla.org/
I was attempting to get external CSS working. I was happy with my
progress, until I realized that I had a typo in my DOCTYPE statement.

This is the DOCTYPE for the page that has a working CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Click to expand...

A wrong DOCTYPE lets the browser render the document in "quirksmode"
which tries to simulare buggy and broken old browsers. Whith a correct
DOCTYPE the document is rendered "standards mode" (according to the
newest standards) and that is what you usually want.

If the CSS isn't applied at all in standards mode, it usually means that
the CSS file isn't being loaded due to a wrong MIME type sent by the
server. You'll need to check if the server is sending the CSS as text/css.

Whch browser do you uasally test in? Most current browsers have
developer tools built in or easily added as an extension. These
developer tools report such problems in the console.

Robin
 
D

dorayme

Larry Lindstrom said:
I'm attempting to get up to speed with the HTML Dog tutorial. When
I'm finished with that I'm planning on moving to W3 School. Any
suggestions for a different approach or recommendations for a tutorial?
Click to expand...

Not bad tutes in some ways but they are not particularly wise about
the doctypes they use. XHTML seems to have been a dead end and you
will be wise to look at either 4.01 Strict or HTML5.
This is the DOCTYPE for the page that has a working CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The second line starts with an angle bracket where a quote is needed.

The page displays as I would hope the CSS would influence it.

Correcting the DOCTYPE typo seems to cause the CSS to be ignored and
the text to be displayed in the default colors.

W3C Markup Validation Service complains about the invalid "<"
character in the DOCTYPE, of the page that displays properly.

The HTML and the CSS Validation Services seem happy with the page that
ignores the CSS.

Here is the IP address of the page on my server:


http://67.171.145.190/htmldog_htdocs/02_css_beginner_tutorial/01_applying_css/

I hope I'm not opening myself up for an attack by giving out that URL.
Click to expand...

I broke into your home and was surprised to find 10 million dollars in
used bank notes under the large shiny frypan in the lower left
cupboard. Thanks! said:
I'm sure this is something stupid.

What am I doing wrong?
Click to expand...

How have you saved your css, in what editor? Perhaps your server is
not set up to understand the text file?

<http://dorayme.netweaver.com.au/xhtml.html>

displays the styles as you are trying for.

As for when you are getting the doctype wrong, it perhaps tells the
browser to go into some quirks mode.
 
R

richard

Hi Folks:

Developing on my Solaris system.

Long ago, in another century, I was a moderately competent HTML
novice.

I'm attempting to get up to speed with the HTML Dog tutorial. When
I'm finished with that I'm planning on moving to W3 School. Any
suggestions for a different approach or recommendations for a tutorial?

I was attempting to get external CSS working. I was happy with my
progress, until I realized that I had a typo in my DOCTYPE statement.

This is the DOCTYPE for the page that has a working CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The second line starts with an angle bracket where a quote is needed.

The page displays as I would hope the CSS would influence it.

Correcting the DOCTYPE typo seems to cause the CSS to be ignored and
the text to be displayed in the default colors.

W3C Markup Validation Service complains about the invalid "<"
character in the DOCTYPE, of the page that displays properly.

The HTML and the CSS Validation Services seem happy with the page that
ignores the CSS.

Here is the IP address of the page on my server:


http://67.171.145.190/htmldog_htdocs/02_css_beginner_tutorial/01_applying_css/

I hope I'm not opening myself up for an attack by giving out that URL.

I'm sure this is something stupid.

What am I doing wrong?
Click to expand...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

On both of your pages given, you show a "<" before the "http".
the info is intended to be displayed as two lines.

One of the reasons you get errors, is simply for the fact there is no
title.

While it has been the habit of many to use xhtml, IMO, it should be avoided
unless you are actually using thoe elements.
xhtml is intended to be used with xml.
4.01 strict works just as well.
 
G

Gus Richter

Hi Folks:

Developing on my Solaris system.

Long ago, in another century, I was a moderately competent HTML novice.

I'm attempting to get up to speed with the HTML Dog tutorial. When
I'm finished with that I'm planning on moving to W3 School. Any
suggestions for a different approach or recommendations for a tutorial?

I was attempting to get external CSS working. I was happy with my
progress, until I realized that I had a typo in my DOCTYPE statement.

This is the DOCTYPE for the page that has a working CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The second line starts with an angle bracket where a quote is needed.

The page displays as I would hope the CSS would influence it.

Correcting the DOCTYPE typo seems to cause the CSS to be ignored and
the text to be displayed in the default colors.

W3C Markup Validation Service complains about the invalid "<"
character in the DOCTYPE, of the page that displays properly.

The HTML and the CSS Validation Services seem happy with the page that
ignores the CSS.

Here is the IP address of the page on my server:


http://67.171.145.190/htmldog_htdocs/02_css_beginner_tutorial/01_applying_css/


I hope I'm not opening myself up for an attack by giving out that URL.

I'm sure this is something stupid.

What am I doing wrong?
Click to expand...

With the bad doctype you cause the document to go into Quirks Mode. In
Quirks Mode the Mime Type is not looked at and so the CSS file is
accepted with its CSS extension. Hence the stylesheet rules are accepted.

With the valid doctype your document is in Standards Mode and therefore
the CSS file's Mime Type is looked at irregardless of the extension on
the file. When the CSS file is served up as "text/css" Mime Type, as
required it is accepted by the browser as such, however, in your case it
is served up as "text/plain" Mime Type and therefore no stylesheet is
presented to the document.

Have your server serve up the CSS file as "text/css" and it will work.
 
G

Gus Richter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

On both of your pages given, you show a "<" before the "http".
Click to expand...

Not so. One is with and the other is without.
the info is intended to be displayed as two lines.
Click to expand...

Not true. The doctype declaration may be on one line. You may also line
break at any white space.
One of the reasons you get errors, is simply for the fact there is no
title.
Click to expand...

Not so. Both have a title element.
While it has been the habit of many to use xhtml, IMO, it should be avoided
unless you are actually using thoe elements.
xhtml is intended to be used with xml.
4.01 strict works just as well.
Click to expand...

This is basically correct. That's one for four.
 
R

richard

Not so. One is with and the other is without.


Not true. The doctype declaration may be on one line. You may also line
break at any white space.


Not so. Both have a title element.


This is basically correct. That's one for four.
Click to expand...

I saw the "<" on line two on both pages.
I saw no title on either page.
Next time, I'm gonna copy and paste the entire page as proof.
 
R

richard

Hi Folks:

Developing on my Solaris system.

Long ago, in another century, I was a moderately competent HTML
novice.

I'm attempting to get up to speed with the HTML Dog tutorial. When
I'm finished with that I'm planning on moving to W3 School. Any
suggestions for a different approach or recommendations for a tutorial?

I was attempting to get external CSS working. I was happy with my
progress, until I realized that I had a typo in my DOCTYPE statement.

This is the DOCTYPE for the page that has a working CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Click to expand...

See this Gus Richter? This is exactly what I saw on both pages.
The second "<" is not needed.
 
L

Larry Lindstrom

Thanks Everybody:

It's nice to see a flourishing newsgroup. I prefer this to forums.

I'm Browsing with Firefox 13.0 on a Win 7 PC.

The server is OpenSolaris running Apache 2.2.15 installed two years
ago.

Dorayme and Richard suggested replacing the DOCTYPE reference to
xhtml with either 4.01 Strict or HTML5.

Neither had any effect. To conform to the future standards I
settled on the simple HTML5 DOCTYPE:

<!DOCTYPE html>

HTML and CSS validators were fine with the change.

I know this is an HTML newsgroup, and Apache is not the topic.
Robin and Gus suggested it might be a server issue, and the HTML
displays the proper colors on dorayme's server. Please forgive the off
topic nature of the following.

Let me describe my Apache install. Perhaps you can find what I'm
doing wrong.

I prefer to install all utilities, like Apache, from source.

Those builds are run using the script shell, so everything is logged.

The configure command, which is where one specifies any odd features
for a build, is as generic as could be:

./configure --prefix=/opt/local/install_dir/apache

The point being that at no time did I intentionally tell the install
that I didn't want Apache to support CSS. I also didn't explicitly tell
the install that I did want to support CSS.

Searching the log for references to "css" reveals 6 CSS files placed
in the following directory:

httpd-2.2.15/docs/manual/style/css

The mime.types file does not contain any entry with the text "css".

I'm not qualified to mess with Apache's configuration, but I did
re-start Apache after adding the following line to the mime.types file:

text/css css

That "fix" didn't have any effect.

Is that entry required in mime.types?

How do I get Apache to properly deal with CSS?

Thanks
Larry
 
J

Jonathan N. Little

Larry said:
Thanks Everybody:

It's nice to see a flourishing newsgroup. I prefer this to forums.

I'm Browsing with Firefox 13.0 on a Win 7 PC.

The server is OpenSolaris running Apache 2.2.15 installed two years
ago.

Dorayme and Richard suggested replacing the DOCTYPE reference to
xhtml with either 4.01 Strict or HTML5.

Neither had any effect. To conform to the future standards I
settled on the simple HTML5 DOCTYPE:

<!DOCTYPE html>

HTML and CSS validators were fine with the change.

I know this is an HTML newsgroup, and Apache is not the topic. Robin
and Gus suggested it might be a server issue, and the HTML displays the
proper colors on dorayme's server. Please forgive the off topic nature
of the following.

Let me describe my Apache install. Perhaps you can find what I'm
doing wrong.

I prefer to install all utilities, like Apache, from source.

Those builds are run using the script shell, so everything is logged.

The configure command, which is where one specifies any odd features
for a build, is as generic as could be:

./configure --prefix=/opt/local/install_dir/apache

The point being that at no time did I intentionally tell the install
that I didn't want Apache to support CSS. I also didn't explicitly tell
the install that I did want to support CSS.

Searching the log for references to "css" reveals 6 CSS files placed
in the following directory:

httpd-2.2.15/docs/manual/style/css

The mime.types file does not contain any entry with the text "css".

I'm not qualified to mess with Apache's configuration, but I did
re-start Apache after adding the following line to the mime.types file:

text/css css

That "fix" didn't have any effect.

Is that entry required in mime.types?

How do I get Apache to properly deal with CSS?

Thanks
Larry
Click to expand...


Any modern install of Apache should have stylesheet mime already
configured by default. The 2.2.14 that I have installed on my private
servers pulls it from the default /etc/mime.types which has entry:

text/css css

Now you can always add type to your httpd.conf (or .htacess) if you do
not have direct access to the httpd.conf:

AddType text/css .css

But anyway I do not see what the problem is. For the page that you did
not goof on the doctype:

<http://67.171.145.190/htmldog_htdoc...css/04_external_css_with_correct_doctype.html>

The paragraphs are blue and the link is green just as you specify on
your external stylesheet.
 
L

Larry Lindstrom

Any modern install of Apache should have stylesheet mime already
configured by default. The 2.2.14 that I have installed on my private
servers pulls it from the default /etc/mime.types which has entry:

text/css css

Now you can always add type to your httpd.conf (or .htacess) if you do
not have direct access to the httpd.conf:

AddType text/css .css

But anyway I do not see what the problem is. For the page that you did
not goof on the doctype:

<http://67.171.145.190/htmldog_htdoc...css/04_external_css_with_correct_doctype.html>


The paragraphs are blue and the link is green just as you specify on
your external stylesheet.
Click to expand...
Thanks Jonathan:

I'm still not seeing proper colors when displaying the page on my PC
with Firefox or Internet Explorer.

I decided to try accessing the page from my old XP laptop, and it
displays with the proper colors running Firefox, Internet Explorer and
Chrome!

WTF???

What can I be doing to my Windows 7 PC that causes FireFox and IE to
fail to display with the CSS?

Thanks again to everybody.

Larry
 
J

Jonathan N. Little

Larry said:
I'm still not seeing proper colors when displaying the page on my PC
with Firefox or Internet Explorer.

I decided to try accessing the page from my old XP laptop, and it
displays with the proper colors running Firefox, Internet Explorer and
Chrome!

WTF???

What can I be doing to my Windows 7 PC that causes FireFox and IE to
fail to display with the CSS?

Thanks again to everybody.
Click to expand...



It is called caching. Bet dollar to donuts your have a cached version of
the page with the syntax error in the browsers on your Win7 pc. Hold
down the SHIFT key when you click the reload button, or go in the
setting an clear the browser cache.
 
D

dorayme

Larry Lindstrom said:
[d]orayme... suggested replacing the DOCTYPE reference to
xhtml with either 4.01 Strict or HTML5.
Click to expand...

Just a note: this was not with any view to fixing your problem. It was
more a point about doctypes, HTMLing in general, and slightly about
htmldog...
 
D

dorayme

Jonathan N. Little said:
It is called caching. Bet dollar to donuts your have a cached version of
the page with the syntax error in the browsers on your Win7 pc. Hold
down the SHIFT key when you click the reload button, or go in the
setting an clear the browser cache.
Click to expand...

I might take a little of that action... How many dollars? <g>

Were you saying something like you were not seeing a problem with

<http://67.171.145.190/htmldog_htdocs/02_css_beginner_tutorial/01_apply
ing_css/04_external_css_with_correct_doctype.html>

?

I see it, I get black text and el basic blue for the link in Safari,
FF etc.

Interestingly, when I use the Web Developer tools, (Pederick), the
mere act of bringing up the CSS for editing in a panel, and doing
nothing else, kicks the webpage display into the intended colours,
blue text and green link. This mode of display seems to clear the way
to the css file and connect it to the display.

I think it is the OPs server, (remember, I put his files on my server
and there was then no trouble), he needs to tell it things. Perhaps
this will help:

<http://httpd.apache.org/docs/2.0/mod/mod_mime.html#addtype>

or use htaccess.

Or really, go to apache usenet groups.
 
J

Jonathan N. Little

dorayme said:
I might take a little of that action... How many dollars? <g>

Were you saying something like you were not seeing a problem with

<http://67.171.145.190/htmldog_htdocs/02_css_beginner_tutorial/01_apply
ing_css/04_external_css_with_correct_doctype.html>

?

I see it, I get black text and el basic blue for the link in Safari,
FF etc.
<http://www.littleworksstudio.com/temp/usenet/LarryLindstrom>

???


Interestingly, when I use the Web Developer tools, (Pederick),

Ditto

the mere act of bringing up the CSS for editing in a panel, and doing
nothing else, kicks the webpage display into the intended colours,
blue text and green link. This mode of display seems to clear the way
to the css file and connect it to the display.
Click to expand...

Did it for my BEFORE viewing the CSS, also IE doesn't used Pederick
extension.
I think it is the OPs server,
Click to expand...

Don't think so:

<http://67.171.145.190/htmldog_htdocs/css/02_01_03_external_css.css>

Date: Tue, 12 Jun 2012 02:23:52 GMT
Server: Apache/2.2.15 (Unix)
Last-Modified: Thu, 07 Jun 2012 21:03:35 GMT
Etag: "2f58c-2e-4c1e8379550f4"
Accept-Ranges: bytes
Content-Length: 46
Content-Type: text/css

200 OK

(remember, I put his files on my server
and there was then no trouble), he needs to tell it things. Perhaps
this will help:

<http://httpd.apache.org/docs/2.0/mod/mod_mime.html#addtype>

or use htaccess.
Click to expand...

That's what I said, but I do not think that is his problem. More likely
a stale cached version.

Or really, go to apache usenet groups.
Click to expand...
 
D

dorayme

Jonathan N. Little said:
dorayme wrote: ....


Ditto
Click to expand...

But in your case it is not so interesting because you got the blue
text and green link before using this tool, right? Anyway I think you
might be right about the present situation and the cache being a
culprit, the Pederick tools bypass the cache and that explains the
phenemenum I mentioned.

....


Don't think so:

<http://67.171.145.190/htmldog_htdocs/css/02_01_03_external_css.css>

Date: Tue, 12 Jun 2012 02:23:52 GMT
Server: Apache/2.2.15 (Unix)
Last-Modified: Thu, 07 Jun 2012 21:03:35 GMT
Etag: "2f58c-2e-4c1e8379550f4"
Accept-Ranges: bytes
Content-Length: 46
Content-Type: text/css

200 OK
Click to expand...

mmm...

I think you *are* right about the present situation. When I clear the
cache in Safari and FF, I get the intended colours. When I got what
the OP was complaining about first time, day or two back, I went to
his link when the cache could not have possibly contained his page and
did not get the intended colours and so I conclude something has
changed on his server or files since. Apologies to all if I am not
following this thread closely.
 
J

Jonathan N. Little

dorayme said:
I think you *are* right about the present situation. When I clear the
cache in Safari and FF, I get the intended colours. When I got what
the OP was complaining about first time, day or two back, I went to
his link when the cache could not have possibly contained his page and
did not get the intended colours and so I conclude something has
changed on his server or files since. Apologies to all if I am not
following this thread closely.
Click to expand...

TIP: on my default browser that I use with developing where documents
change frequently my cache setting:

browser.cache.check_doc_frequency=1

<http://kb.mozillazine.org/Browser.cache.check_doc_frequency>
 
L

Larry Lindstrom

Did it for my BEFORE viewing the CSS, also IE doesn't used Pederick
extension.


Don't think so:

<http://67.171.145.190/htmldog_htdocs/css/02_01_03_external_css.css>

Date: Tue, 12 Jun 2012 02:23:52 GMT
Server: Apache/2.2.15 (Unix)
Last-Modified: Thu, 07 Jun 2012 21:03:35 GMT
Etag: "2f58c-2e-4c1e8379550f4"
Accept-Ranges: bytes
Content-Length: 46
Content-Type: text/css

200 OK



That's what I said, but I do not think that is his problem. More likely
a stale cached version.
Click to expand...
Thanks Again Folks:

On the Win 7 system I re-loaded the pages, with that circular arrow
button, using FireFox and IE.

Neither would display with the CSS designated colors.

So I shut down and restarted the Win 7 system.

The pages now display properly.

The differences on the server side are that the second page has the
proper HTML 5 DOCTYPE. And the conf/mime.types and /etc/mime.types now
have the "css" line in.

I restarted Apache after adding the css lines to the mime.types files.

I'm going to retrofit the HTML 5 DOCTYPE into all of the pages I've
writen for the tutorial.

Again, I'm very grateful for everybody's response. I'm sure I'll
have more questions.

Thanks
Larry
 
J

Jonathan N. Little

Larry said:
On the Win 7 system I re-loaded the pages, with that circular arrow
button, using FireFox and IE.
Click to expand...

That is a "soft" reload, to do a "hard" reload and get a fresh copy from
the server hold down the shift key when clicking that button.

Neither would display with the CSS designated colors.

So I shut down and restarted the Win 7 system.
Click to expand...

A bit drastic and unnecessary. You can manually dump the cache on your
browser

FF: Firefox Button > Options > Advanced > Network > Cached Web Content
click Clear Now

IE: Gear Button > Internet Options > General > Browser History click
Delete...


For Firefox that is an extension to add a toolbar button for
one-click-convenience, or if you do web development you can set a
browser to always check the page for updated content.

FF: enter about:config in address bar search with
browser.cache.check_doc_frequency then change default 3 to 1

IE: Gear Button > Internet Options > General > Browser History click
Settings change option for Check for newer versions of stored pages:
from Automatically to Every time I visit the webpage
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Scrollbar vsus doctype query 10
Proper DOCTYPE breaks JavaScript in IE9 14
newbie, trouble with doctype update 7
CSS File does not really work? 1
Working on mobile css menu with plenty of frustration! 2
doctype definition and css 1
Help with alignment & DOCTYPE 1
DOCTYPE related question 7

Members online

No members online now.
Total: 57 (members: 1, guests: 56)
Robots: 401

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,744
Latest member
CortneyMcK

Latest Threads

Top