Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Embedded BODY style not working
1 view
Skip to first unread message
Davy
Sep 9, 2011, 6:45:10 AM9/9/11
to
If I place in the header:
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
The first affects h1 elements on the page but the 'body'
style has no effect on any elements on the page. As I
understand it all body elements except tables should have a
the background colour #FF00FF unless over-riden by an inline
style statement?
I believe I get the same problem if I try to use the same
style definition in a .css
Anyone any thoughts? Using Frontpage 2000 in Windows XP
Davy
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
The first affects h1 elements on the page but the 'body'
style has no effect on any elements on the page. As I
understand it all body elements except tables should have a
the background colour #FF00FF unless over-riden by an inline
style statement?
I believe I get the same problem if I try to use the same
style definition in a .css
Anyone any thoughts? Using Frontpage 2000 in Windows XP
Davy
Ronx
Sep 9, 2011, 8:25:41 AM9/9/11
to
After serious thinking Davy wrote :
Using FP2000 in Windows 98, and FP 2003 in
Windows 7 I get the correct colours for body and
h1 (#00ffff and #ff00ff respectively) using the
CSS exactly as your snippet, in Normal/Design
view.
The correct code is:
<style type="text/css">
attribute, however the page also rendered
correctly in IE9 and FireFox 3.6
The body background colour will remain showing
(even in tables) until over-ridden by any CSS
statement following (or more specific than [the
h1 rule in this case]) the body style rules,
whether the CSS is inline, embedded or in an
external CSS file.
The HTML I used to test is:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft
FrontPage 4.0">
<meta name="ProgId"
content="FrontPage.Editor.Document">
<title>New Page 1</title>
<body>
<h1>Test Colours</h1>
<p>This is a colour test</p>
<table border="1" width="50%">
<tr>
<td width="50%">1st Cell</td>
<td width="50%">2nd Cell</td>
</tr>
<tr>
<td width="50%">2nd row</td>
<td width="50%">4th Cell</td>
</tr>
</table>
</body>
</html>
Although in general FP2000 does not render CSS
very well, in this case I could not reproduce
your problem.
--
Ron Symonds - Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp/wf-menu.aspx
Microsoft has closed this newsgroup on Microsoft
servers - see
http://www.rxs-enterprises.org/fp/newsgroup-closure.aspx
for details of why and where to go next.
Windows 7 I get the correct colours for body and
h1 (#00ffff and #ff00ff respectively) using the
CSS exactly as your snippet, in Normal/Design
view.
The correct code is:
<style type="text/css">
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
Some modern browsers may require the type
body { background-color: #FF00FF }
</style>
attribute, however the page also rendered
correctly in IE9 and FireFox 3.6
The body background colour will remain showing
(even in tables) until over-ridden by any CSS
statement following (or more specific than [the
h1 rule in this case]) the body style rules,
whether the CSS is inline, embedded or in an
external CSS file.
The HTML I used to test is:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft
FrontPage 4.0">
<meta name="ProgId"
content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
</head>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
<body>
<h1>Test Colours</h1>
<p>This is a colour test</p>
<table border="1" width="50%">
<tr>
<td width="50%">1st Cell</td>
<td width="50%">2nd Cell</td>
</tr>
<tr>
<td width="50%">2nd row</td>
<td width="50%">4th Cell</td>
</tr>
</table>
</body>
</html>
Although in general FP2000 does not render CSS
very well, in this case I could not reproduce
your problem.
--
Ron Symonds - Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp/wf-menu.aspx
Microsoft has closed this newsgroup on Microsoft
servers - see
http://www.rxs-enterprises.org/fp/newsgroup-closure.aspx
for details of why and where to go next.
Davy
Sep 9, 2011, 10:00:50 AM9/9/11
to
Ronx <ron...@hotmail.com> wrote in news:j4d0mq$jsb$1@dont-
email.me:
Ron,
thanks for the prompt reply which has led me to
understanding that it is not a FP-specific problem since I
can replicate the problem when creating a page in Notepad.
Where your successful example differs from what I am using
is that my full code links to a .css style sheet:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId"
content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
<!--mstheme--><link rel="stylesheet" type="text/css"
href="_themes/copy-of-straight-edge/copy1011.css"><meta
name="Microsoft Theme" content="copy-of-straight-edge 1011,
default">
<meta name="Microsoft Border" content="tl, default">
</head>
Removing the style sheet link causes the embeded BODY style
statement to work. If I move the Link statement above the
Style statement or to the bottom of the file, below the
</html> tag then it still fails!
But I understand that style definitions embeded in the HEAD
replace any style definitions in a linked .css file? Where
am I wrong.
David
email.me:
thanks for the prompt reply which has led me to
understanding that it is not a FP-specific problem since I
can replicate the problem when creating a page in Notepad.
Where your successful example differs from what I am using
is that my full code links to a .css style sheet:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId"
content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
href="_themes/copy-of-straight-edge/copy1011.css"><meta
name="Microsoft Theme" content="copy-of-straight-edge 1011,
default">
<meta name="Microsoft Border" content="tl, default">
</head>
Removing the style sheet link causes the embeded BODY style
statement to work. If I move the Link statement above the
Style statement or to the bottom of the file, below the
</html> tag then it still fails!
But I understand that style definitions embeded in the HEAD
replace any style definitions in a linked .css file? Where
am I wrong.
David
Ronx
Sep 9, 2011, 12:25:06 PM9/9/11
to
Davy explained on 09/09/2011 :
CSS styles are evaluated in the order they
appear, or are linked to, in the page (there are
exceptions - Google CSS specificity)
The linked stylesheet when produced by a
FrontPage theme will _always_ be last in the
<head> section of the page - FrontPage will move
it there regardless of your efforts, so the rules
in this will override your rules. Check by
previewing in browser and View Source. The ways
round this are:
1) Change the rules (particulary for body, and
watch for background-image as well as
background-color) in the linked stylesheet. This
probably involves changing the theme, or saving
the stylesheet with a new name and removing the
theme - then use the saved stylesheet; this gives
a good oportunity to remove all the bloat
FrontPage adds to a theme stylesheet, and keep
the bits you need.
or 2) Open the page in Notepad, and move the
stylesheet link above the style block. Also
delete the <!--mstheme--> comment, and the meta
tag:
<meta name="Microsoft Theme"
content="copy-of-straight-edge 1011, default"> -
then never open the page in FrontPage again or
you will be back where you started, since the
theme is a default for the website.
An example of the <head> of the edited page is:
<meta name="Microsoft Theme" content="satin
1011">
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF;
background-image: none; }
</style>
</head>
Your embedded rules follow the stylesheet, and
therefor take precedence.
If there are several pages it would be easier to
use use option 1) above.
or 3) Add inline syles to every element in the
page: for example:
<p style="background-color: #ff00ff;">...</p>
<p style="background-color: #ff00ff;">...</p>
<table style="background-color:
#ff00ff;">...</table>
and so on. Tedious and very difficult to edit
later to change the colour scheme - and the body
background will be as in the theme, not your
colour.
Option 1) is the best solution, or remove the
theme and write your own stylesheet from scratch.
appear, or are linked to, in the page (there are
exceptions - Google CSS specificity)
The linked stylesheet when produced by a
FrontPage theme will _always_ be last in the
<head> section of the page - FrontPage will move
it there regardless of your efforts, so the rules
in this will override your rules. Check by
previewing in browser and View Source. The ways
round this are:
1) Change the rules (particulary for body, and
watch for background-image as well as
background-color) in the linked stylesheet. This
probably involves changing the theme, or saving
the stylesheet with a new name and removing the
theme - then use the saved stylesheet; this gives
a good oportunity to remove all the bloat
FrontPage adds to a theme stylesheet, and keep
the bits you need.
or 2) Open the page in Notepad, and move the
stylesheet link above the style block. Also
delete the <!--mstheme--> comment, and the meta
tag:
<meta name="Microsoft Theme"
content="copy-of-straight-edge 1011, default"> -
then never open the page in FrontPage again or
you will be back where you started, since the
theme is a default for the website.
An example of the <head> of the edited page is:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>Test colours</title>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<meta name="Microsoft Theme" content="satin
1011">
<style>
h1 { background-color: #00FFFF }
body { background-color: #FF00FF;
background-image: none; }
</style>
</head>
Your embedded rules follow the stylesheet, and
therefor take precedence.
If there are several pages it would be easier to
use use option 1) above.
or 3) Add inline syles to every element in the
page: for example:
<p style="background-color: #ff00ff;">...</p>
<p style="background-color: #ff00ff;">...</p>
<table style="background-color:
#ff00ff;">...</table>
and so on. Tedious and very difficult to edit
later to change the colour scheme - and the body
background will be as in the theme, not your
colour.
Option 1) is the best solution, or remove the
theme and write your own stylesheet from scratch.
Davy
Sep 9, 2011, 1:52:09 PM9/9/11
to
Ronx <ron...@hotmail.com> wrote in news:j4deno$nfc$1@dont-
email.me:
email.me:
> Davy explained on 09/09/2011 :
>> Ronx <ron...@hotmail.com> wrote in
>> news:j4d0mq$jsb$1@dont- email.me:
>
>>> After serious thinking Davy wrote :
>>>> If I place in the header:
>>>> <style>
>>>> h1 { background-color: #00FFFF }
>>>> body { background-color: #FF00FF }
>>>> </style>
>>>
>>>> The first affects h1 elements on the page but
>>>> the 'body' style has no effect on any
>>>> elements on the page. As I understand it
>>>> all body elements except tables should have
>>>> a the background colour #FF00FF unless
>>>> over-riden by an inline style statement?
>>>
>>>> I believe I get the same problem if I try to
>>>> use the same style definition in a .css
>>>> Anyone any thoughts? Using Frontpage 2000 in
>>>> Windows XP
>>>
>>>> Davy
>
Although it is true that css styles are evaluated in the
order in which they appear, they should not, according to
the rules I have read, over-ride embeded style definitions
in the HEAD of a page.
I tested this by recreating the page in Notepad and placing
the Link statement in various places. So as I said in my
last post "If I move the Link statement above the Style
statement or to the bottom of the file, below the </html>
tag then it still fails!"
>
> If there are several pages it would be easier to
> use use option 1) above.
>
>
> or 3) Add inline syles to every element in the
> page: for example:
> <p style="background-color: #ff00ff;">...</p>
> <p style="background-color: #ff00ff;">...</p>
> <table style="background-color:
> #ff00ff;">...</table>
> and so on. Tedious and very difficult to edit
> later to change the colour scheme - and the body
> background will be as in the theme, not your
> colour.
>
> Option 1) is the best solution, or remove the
> theme and write your own stylesheet from scratch.
>
I edited the linked CSS stylesheet and removed
"Body {background-image: url('strbkgde.gif')}"
and then the embeded body style statement worked. But I am
still no clearer why! It seems that although an H1 backgound
colour style will over-ride a Body Background gif, maybe an
embedded body background colour style cannot over-ride a
body background gif?
Davy
Ronx
Sep 9, 2011, 2:37:48 PM9/9/11
to
Davy was thinking very hard :
Whwerever you read that - it is not correct.
Consider a file named style.css which contains:
body (background-color: red;}
The page contains:
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet"
type=text/css">
<style type="text/css">
body {background-color: green; }
</style>
</head>
<body>
<p>background?</p>
</body>
</html>
The background will be green
But for a page coded:
<html>
<head>
<title>test</title>
<style type="text/css">
body {background-color: green; }
</style>
<link href="style.css" rel="stylesheet"
type=text/css">
</head>
<body>
<p>background?</p>
</body>
</html>
The background colour will be red, because the
stylesheet follows the embedded style block.
However,
Replace the paragraph with
<p style="background-color: blue">background?</p>
and that paragraph will have a blue background,
because the inline style follows the embedded and
external styles.
A style statement after the </html> - anything
could happen depending on the browser. It is not
in a part of the page so the browser itself
decides what to do with it - act on it or ignore
it. Invalid HTML produces indeterminate results
Moving the link statement before the style block
- the style block wins and the background colour
changes. But watch out for the background-image
...
win, because HTML elements are contained by the
body, and only the body has a background colour
applied in the style sheet. An elements (h1, p,
li etc)background colour or background image will
always go on top of the body's background color
or background image.
If you added
p {background-color: red } to the style block,
every paragraph would aquire a red background.
background-color and background-image are two
different things - if you add a background image
it will always cover the background colour -
think of the background colour as a paint
undercoat, and the background image as topcoat.
Changing the background colour does not change or
remove the background image - the image is still
there until you remove it, either by declaring
body {background-image: none;} in a style block,
or editing the CSS file.
> Davy
Consider a file named style.css which contains:
body (background-color: red;}
The page contains:
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet"
type=text/css">
<style type="text/css">
body {background-color: green; }
</style>
</head>
<body>
<p>background?</p>
</body>
</html>
The background will be green
But for a page coded:
<html>
<head>
<title>test</title>
<style type="text/css">
body {background-color: green; }
</style>
<link href="style.css" rel="stylesheet"
type=text/css">
</head>
<body>
<p>background?</p>
</body>
</html>
The background colour will be red, because the
stylesheet follows the embedded style block.
However,
Replace the paragraph with
<p style="background-color: blue">background?</p>
and that paragraph will have a blue background,
because the inline style follows the embedded and
external styles.
could happen depending on the browser. It is not
in a part of the page so the browser itself
decides what to do with it - act on it or ignore
it. Invalid HTML produces indeterminate results
Moving the link statement before the style block
- the style block wins and the background colour
changes. But watch out for the background-image
...
>>
>> If there are several pages it would be easier
>> to use use option 1) above.
>>
>>
>> or 3) Add inline syles to every element in the
>> page: for example:
>> <p style="background-color: #ff00ff;">...</p>
>> <p style="background-color: #ff00ff;">...</p>
>> <table style="background-color:
>> #ff00ff;">...</table>
>> and so on. Tedious and very difficult to edit
>> later to change the colour scheme - and the
>> body background will be as in the theme, not
>> your colour.
>>
>> Option 1) is the best solution, or remove the
>> theme and write your own stylesheet from
>> scratch.
>>
> I edited the linked CSS stylesheet and removed
> "Body {background-image: url('strbkgde.gif')}"
> and then the embeded body style statement
> worked. But I am still no clearer why! It
> seems that although an H1 backgound colour
> style will over-ride a Body Background gif,
> maybe an embedded body background colour style
> cannot over-ride a body background gif?
A background applied to a specific element will
>> If there are several pages it would be easier
>> to use use option 1) above.
>>
>>
>> or 3) Add inline syles to every element in the
>> page: for example:
>> <p style="background-color: #ff00ff;">...</p>
>> <p style="background-color: #ff00ff;">...</p>
>> <table style="background-color:
>> #ff00ff;">...</table>
>> and so on. Tedious and very difficult to edit
>> later to change the colour scheme - and the
>> body background will be as in the theme, not
>> your colour.
>>
>> Option 1) is the best solution, or remove the
>> theme and write your own stylesheet from
>> scratch.
>>
> I edited the linked CSS stylesheet and removed
> "Body {background-image: url('strbkgde.gif')}"
> and then the embeded body style statement
> worked. But I am still no clearer why! It
> seems that although an H1 backgound colour
> style will over-ride a Body Background gif,
> maybe an embedded body background colour style
> cannot over-ride a body background gif?
win, because HTML elements are contained by the
body, and only the body has a background colour
applied in the style sheet. An elements (h1, p,
li etc)background colour or background image will
always go on top of the body's background color
or background image.
If you added
p {background-color: red } to the style block,
every paragraph would aquire a red background.
background-color and background-image are two
different things - if you add a background image
it will always cover the background colour -
think of the background colour as a paint
undercoat, and the background image as topcoat.
Changing the background colour does not change or
remove the background image - the image is still
there until you remove it, either by declaring
body {background-image: none;} in a style block,
or editing the CSS file.
> Davy
Davy
Sep 9, 2011, 4:02:10 PM9/9/11
to
Ron,
thanks for the info. Now I think I have solved most of my
problems.
I added an embedded style statement such as
Body {font-size:20px} but it didn't have any effect even when
I deleted all the Body style definitions in the CSS.
However I had overlooked the <p> style statement in the CSS
(all my web page paragraphs started <p>). Once I deleted the
<p> style statement in the CSS then Body font style
statements in the embodded style worked OK.
Although embedded style statements generally over-ride CSS
statements (the rules of cascading), it seems the CSS style
statement over-ruled the Embedded style statement because it
was more specific (to <p> tags).
thanks
David
thanks for the info. Now I think I have solved most of my
problems.
I added an embedded style statement such as
Body {font-size:20px} but it didn't have any effect even when
I deleted all the Body style definitions in the CSS.
However I had overlooked the <p> style statement in the CSS
(all my web page paragraphs started <p>). Once I deleted the
<p> style statement in the CSS then Body font style
statements in the embodded style worked OK.
Although embedded style statements generally over-ride CSS
statements (the rules of cascading), it seems the CSS style
statement over-ruled the Embedded style statement because it
was more specific (to <p> tags).
thanks
David
Ronx
Sep 9, 2011, 5:20:43 PM9/9/11
to
After serious thinking Davy wrote :
See
http://www.rxs-enterprises.org/tests/pages/cssExamples/example1.html
There are 5 other examples linked from that page.
These examples demonstrate that order of embedded
and linked CSS in the <head> are important.
Davy
Sep 10, 2011, 5:46:14 AM9/10/11
to
Ronx <ron...@hotmail.com> wrote in news:j4e022$m0u$1@dont-
email.me:
email.me:
Ron,
thanks for setting up those pages, very interesting - please
don't delete them cos they could be useful to others.
But it is difficult to believe that there is such a basic
fault in Frontpage - i.e always placing the Link to .css
sheets AFTER the embedded styles. So embedded styles can
never work if the external style sheet contains style
definitions for the same tags! - which in FP they are likely
to.
I Googled the web for what I thought would be thousands of
people experiencing this problem with FP but found no
reports at all.
David
Al Sparber
Sep 10, 2011, 4:45:35 PM9/10/11
to
Ronx wrote:
>
>
> Although in general FP2000 does not render CSS very well, in this case
> I could not reproduce your problem.
>
get you started. Stop abusing young boys.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | WidgetsFrom - Sat Sep 10 18:01:06 2011
X-Mozilla-Status: 0800
X-Mozilla-Status2: 00000000
X-Mozilla-Keys:
FCC: imap://jtan...@imap.mail.yahoo.com/Sent
X-Identity-Key: id1
X-Account-Key: account3
Date: Sat, 10 Sep 2011 18:01:06 -0300
From: Al Sparber <sup...@projectseven.com>
Reply-To: sup...@projectseven.com
X-Mozilla-Draft-Info: internal/draft; vcard=0; receipt=1; uuencode=0
MIME-Version: 1.0
Newsgroups: microsoft.public.frontpage.client
X-Mozilla-News-Host: nntp.aioe.org
Subject: Re: Embedded BODY style not working
References: <Xns9F5B778...@216.196.109.145> <j4d0mq$jsb$1...@dont-email.me>
In-Reply-To: <j4d0mq$jsb$1...@dont-email.me>
Content-Type: text/plain; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit
Ronx wrote:
>
>
> Although in general FP2000 does not render CSS very well, in this case
> I could not reproduce your problem.
>
Dreamweaver to get you started.
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
0 new messages