Inline and external styles same but behave differently

#1

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.

#2

whitesmith wrote:

Quote:

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

#3

On 2007-10-22, whitesmith wrote:

Quote:

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.

Quote:

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">

Quote:

/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)

#4

In article
<1193088721.513273.120330 (AT) v23g2000prn (DOT) googlegroups.com>,
whitesmith <apasserby (AT) hushmail (DOT) com> wrote:

Quote:

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 {
....

Quote:

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

#5

On Oct 22, 4:57 pm, Ian Hobson <ian.hob... (AT) ntlworld (DOT) com> wrote:

Quote:

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

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.

#6

On Oct 22, 5:37 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Quote:

In article
1193088721.513273.120... (AT) v23g2000prn (DOT) googlegroups.com>,

whitesmith <apasse... (AT) hushmail (DOT) 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

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?

#7

In article
<1193093825.148183.206730 (AT) q3g2000prf (DOT) googlegroups.com>,
whitesmith <apasserby (AT) hushmail (DOT) com> wrote:

Quote:

On Oct 22, 5:37 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> 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...

Quote:

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

#8

On 10/22/07 03:57 pm, whitesmith wrote:

Quote:

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

to

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

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)

#9

whitesmith wrote:

Quote:

On Oct 22, 4:57 pm, Ian Hobson <ian.hob... (AT) ntlworld (DOT) com> wrote:
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

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

#10

On Oct 22, 9:08 pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

Quote:

whitesmith wrote:
On Oct 22, 4:57 pm, Ian Hobson <ian.hob... (AT) ntlworld (DOT) com> wrote:
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

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 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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Inline and external styles same but behave differently

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Inline and external styles same but behave differently - 10-22-2007 , 05:32 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 05:57 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 06:32 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 06:37 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 06:46 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 06:57 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 08:11 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 09:27 PM

Re: Inline and external styles same but behave differently - 10-22-2007 , 10:08 PM

Re: Inline and external styles same but behave differently - 10-23-2007 , 11:16 AM