Davy explained on 09/09/2011 :
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
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">
h1 { background-color: #00FFFF }
body { background-color: #FF00FF }
</style>
Some modern browsers may require the type
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>
<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,
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.
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:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>Test colours</title>
<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.
--
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.
