Stylesheets - Inline and external styles same but behave differently

Author

Inline and external styles same but behave differently

whitesmith

2007-10-22, 6:18 pm

Hello to all,

FF 2, IE 7 and NS 7 behave the same when I inline my styles as in this
short example:
<head>
<style>
body {
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
}
p, h1, h2, h3, h4, h5, h6 {
margin: 1em;
}
h4 {
font-size: 100%;
padding: 1px 0 1px 0;
border-top: 1px solid red;
background-color: #E4E4E4;
}
</style>
</head>
<body>
<h4>Did Someone Say McDonald's?</h4>
<p>Old McDonald has a farm ... </p>
</body>

But only IE7 renders the page correctly when I stuff everything
between the style tags in an external stylesheet and link to it as in:

<head>
<link rel="stylesheet" type="text/css" href="C:\Yada\css
\default.css" />
</head>
<body>
<h4>Did Someone Say McDonald's?</h4>
<p>Old McDonald has a farm ... </p>
</body>

I would be pleased to hear from anyone who can explain what causes the
different behavior.

Ian Hobson

2007-10-22, 6:18 pm

whitesmith wrote:

> <head>
> <link rel="stylesheet" type="text/css" href="C:\Yada\css
> \default.css" />

What is a href to a local file?

I'm rather surprised you got any styling on any of them!

Regards

Ian

Chris F.A. Johnson

2007-10-22, 10:18 pm

On 2007-10-22, whitesmith wrote:
>
> FF 2, IE 7 and NS 7 behave the same when I inline my styles as in this
> short example:
><head>
><style>
> body {
> font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
> }
> p, h1, h2, h3, h4, h5, h6 {
> margin: 1em;
> }
> h4 {
> font-size: 100%;
> padding: 1px 0 1px 0;
> border-top: 1px solid red;
> background-color: #E4E4E4;
> }
></style>
></head>
><body>
> <h4>Did Someone Say McDonald's?</h4>
> <p>Old McDonald has a farm ... </p>
></body>
>
> But only IE7 renders the page correctly when I stuff everything
> between the style tags in an external stylesheet

You don't put <style> tags in an external stylesheet.

>and link to it as in:

><head>
> <link rel="stylesheet" type="text/css" href="C:\Yada\css\default.css" />

Use a relative reference to the css file, e.g.:

<link rel="stylesheet" type="text/css" href="../Yada/css/default.css">

></head>
><body>
> <h4>Did Someone Say McDonald's?</h4>
> <p>Old McDonald has a farm ... </p>
></body>
>
> I would be pleased to hear from anyone who can explain what causes the
> different behavior.
>

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

dorayme

2007-10-22, 10:18 pm

In article
<1193088721.513273.120330@v23g2000prn.googlegroups.com>,
whitesmith <apasserby@hushmail.com> wrote:

> Hello to all,
>
> FF 2, IE 7 and NS 7 behave the same when I inline my styles as in this
> short example:
> <head>
> <style>
> body {
....

> But only IE7 renders the page correctly when I stuff everything
> between the style tags in an external stylesheet and link to it as in:
>
> <head>
> <link rel="stylesheet" type="text/css" href="C:\Yada\css
> \default.css" />
> </head>

> I would be pleased to hear from anyone who can explain what causes the
> different behavior.

First look at where you have the html file. If the stylesheet is
at the same level, change your

<link rel="stylesheet" type="text/css" href="C:\Yada\css
\default.css" />

to

<link rel="stylesheet" type="text/css" href="default.css" />

If it is in a folder underneath:

<link rel="stylesheet" type="text/css" href="folder/default.css"
/>

If it is a folder above:

<link rel="stylesheet" type="text/css"
href="../folder/default.css" />

and like this...

("default" is probably not the best name, btw. The default style
sheet is what the browser uses for all the styling not supplied
by the author)

--
dorayme

whitesmith

2007-10-22, 10:18 pm

On Oct 22, 4:57 pm, Ian Hobson <ian.hob...@ntlworld.com> wrote:
> whitesmith wrote:
>
> What is a href to a local file?
>
> I'm rather surprised you got any styling on any of them!
>
> Regards
>
> Ian

File location can't possibly make any difference. For example, Meyer
("Cascading Style Sheets: The Definitive Guide") references many
instances of local sheets with hrefs looking exactly like mine.

whitesmith

2007-10-22, 10:18 pm

On Oct 22, 5:37 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <1193088721.513273.120...@v23g2000prn.googlegroups.com>,
>
> whitesmith <apasse...@hushmail.com> wrote:
>
>
> ...
>
>
>
> First look at where you have the html file. If the stylesheet is
> at the same level, change your
>
> <link rel="stylesheet" type="text/css" href="C:\Yada\css
> \default.css" />
>
> to
>
> <link rel="stylesheet" type="text/css" href="default.css" />
>
> If it is in a folder underneath:
>
> <link rel="stylesheet" type="text/css" href="folder/default.css"
> />
>
> If it is a folder above:
>
> <link rel="stylesheet" type="text/css"
> href="../folder/default.css" />
>
> and like this...
>
> ("default" is probably not the best name, btw. The default style
> sheet is what the browser uses for all the styling not supplied
> by the author)
>
> --
> dorayme

I tried changing the name from default to custom -- same result. I
also put it in a folder below -- same result. The CSS validates, btw.
Puzzling, is it not?

dorayme

2007-10-22, 10:18 pm

In article
<1193093825.148183.206730@q3g2000prf.googlegroups.com>,
whitesmith <apasserby@hushmail.com> wrote:

> On Oct 22, 5:37 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:

[color=darkred]
> I
> also put it in a folder below -- same result. The CSS validates, btw.
> Puzzling, is it not?

You did like this:

1. You had a name.html file in some directory called "top"

2. You had custom.css in a folder called "one_down" in top.

3. You had in the <head> of name.html the following:

<link rel="stylesheet" type="text/css" href="one_down/custom.css"
/>

and you opened name.html in a browser and it did not use the
styles that were in custom.css?

How about posting a url anyway

(btw, use a 4.01 strict doctype and leave off the " />" and use
simply "/>")

--
dorayme

Jim Moe

2007-10-22, 10:18 pm

On 10/22/07 03:57 pm, whitesmith wrote:
> I tried changing the name from default to custom -- same result. I
> also put it in a folder below -- same result. The CSS validates, btw.
> Puzzling, is it not?
>
"\" is not valid syntax for an URL as a path delimiter. Although IE may
do so for fun.
Providing URLs to two test cases would resolve this question far more
quickly.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jonathan N. Little

2007-10-22, 10:18 pm

whitesmith wrote:
> On Oct 22, 4:57 pm, Ian Hobson <ian.hob...@ntlworld.com> wrote:
>
>
> File location can't possibly make any difference. For example, Meyer
> ("Cascading Style Sheets: The Definitive Guide") references many
> instances of local sheets with hrefs looking exactly like mine.
>

Except that "C:\Yada\css\default.css" is not a valid URL but a Windows
filesystem path... URLs the slashes go the other way. My SeaMonkey would
not load a stylesheet defined that way, it would have to be:

"file:///C:/Yada/css/default.css"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

whitesmith

2007-10-23, 6:17 pm

On Oct 22, 9:08 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
> whitesmith wrote:
>
>
>
>
>
> Except that "C:\Yada\css\default.css" is not a valid URL but a Windows
> filesystem path... URLs the slashes go the other way. My SeaMonkey would
> not load a stylesheet defined that way, it would have to be:
>
> "file:///C:/Yada/css/default.css"
>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Bingo! I was again bitten by that virus called Windows. After changing
to forward slashes FF and NS work perfectly but IE is now broken
(sigh). To fix that I'll have to use a workaround to format the file
names with backslashes to handle the case where the UA is IE.

My thanks to everyone for suggestions, and special thanks to Jonathan
for the spot-on solution.

Jonathan N. Little

2007-10-23, 6:17 pm

whitesmith wrote:
> On Oct 22, 9:08 pm, "Jonathan N. Little" <lws4...@centralva.net>
> wrote:

[color=darkred]
> Bingo! I was again bitten by that virus called Windows. After changing
> to forward slashes FF and NS work perfectly but IE is now broken
> (sigh). To fix that I'll have to use a workaround to format the file
> names with backslashes to handle the case where the UA is IE.
>
> My thanks to everyone for suggestions, and special thanks to Jonathan
> for the spot-on solution.
>

Well you best bet is *not* to use the "file:" protocol but to use a
relative paths for URLs. If the HTML page is in "C:\Yada" then reference
to the stylesheet as:

"css/default.css" or "./css/default.css"

then it will work is any of your browsers...

If the HTML page is a deeper folder say "C:\Yada\htmldocs" then
reference to the stylesheet as:

"../css/default.css"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com