Linked or embedded stylesheet wrecks display in non-IE browser

[Dan]

I'm avoiding themes, and building a page (based on a 2-column 7-row HTML table), linked to an external style sheet, that will become a DWT to use as the design basis for a web. Got to an (early) stage where its not bad in different browsers - pre-NN6 doubles the width of the left column for some reason (I use a gradient gif as a background there), BUT when I link to a style sheet, it really screws up the display in anything other than IE. The css file is simple, hand-coded, mostly by pasting bits from the various css files belomnging to the theme I thought would do the trick... hand-coded a simple CSS file for i

I have a simple page based on an HTML table - 2-column (left 170px, right 100% - table no width or height), 7 rows, using a background gif in the top row (which has the two cells merged), and a color gradient background in the left column (lower 6 cells) - it's in the embryonic stage but will eventually be a DWT providing design for a web. Wrote a CSS file using copy and paste mostly, linked it to the page, and just having the linked file in the header really screws up the display in all browsers except IE (6.0). Before linking, modern non-IE browsers all showed OK - older NN doubled the left column background for some reason. Any help with why the style sheet makes such a difference would be much appreciated. Following are URLs for the non-linked, linked and embedded versions, together with the CSS sheet URL:- http://preferredcountry.com/Anteroom/st9_no_stylesheet.ht
http://preferredcountry.com/Anteroom/st9_linked_stylesheet.ht
http://preferredcountry.com/Anteroom/st9_embedded_stylesheet.ht
http://preferredcountry.com/Anteroom/dan_st9.cs

TI

Dan Ellis

 

[Stefan B Rusynko]

Heres a validation of your styles
http://jigsaw.w3.org/css-validator/...ountry.com/Anteroom/st9_linked_stylesheet.htm

FYI all your cells w/ only 1   will probably collapse in NN
- always use at least 2   or a transparent gif

If that's eventually going to be a DWT merge the 6 cell on the right and insert a table in that cell for the editable region

IMHO since you are using FP2003, use a customized theme and validate it



| I'm avoiding themes, and building a page (based on a 2-column 7-row HTML table), linked to an external style sheet, that will
become a DWT to use as the design basis for a web. Got to an (early) stage where its not bad in different browsers - pre-NN6
doubles the width of the left column for some reason (I use a gradient gif as a background there), BUT when I link to a style sheet,
it really screws up the display in anything other than IE. The css file is simple, hand-coded, mostly by pasting bits from the
various css files belomnging to the theme I thought would do the trick... hand-coded a simple CSS file for it
|
| I have a simple page based on an HTML table - 2-column (left 170px, right 100% - table no width or height), 7 rows, using a
background gif in the top row (which has the two cells merged), and a color gradient background in the left column (lower 6 cells) -
it's in the embryonic stage but will eventually be a DWT providing design for a web. Wrote a CSS file using copy and paste mostly,
linked it to the page, and just having the linked file in the header really screws up the display in all browsers except IE (6.0).
Before linking, modern non-IE browsers all showed OK - older NN doubled the left column background for some reason. Any help with
why the style sheet makes such a difference would be much appreciated. Following are URLs for the non-linked, linked and embedded
versions, together with the CSS sheet URL:- http://preferredcountry.com/Anteroom/st9_no_stylesheet.htm
| http://preferredcountry.com/Anteroom/st9_linked_stylesheet.htm
| http://preferredcountry.com/Anteroom/st9_embedded_stylesheet.htm
| http://preferredcountry.com/Anteroom/dan_st9.css
|
| TIA
|
| Dan Ellis

 

[Dan]

Stefan

Have placed the dan_st9.css sheet plus files referenced into folder http://preferredcountry.com/Anteroom/CSS-st9 fixed the URL references, but still get e.g.
"Line: 0 Context : .mstheme Property separator-image doesn't exist : url(bar.gif)". Hmmmm

URLs are no
http://preferredcountry.com/Anteroom/CSS-st9/dan_st9.cs
http://preferredcountry.com/Anteroom/st9_embedded_stylesheet.ht
http://preferredcountry.com/Anteroom/st9_linked_stylesheet.ht
http://preferredcountry.com/Anteroom/st9_no_stylesheet.ht

Dan

 

[Chet]

<snip>
| plus some errors such as
| Line 13, column 16: there is no attribute "TOPMARGIN"
(explain...).
| <body topmargin="15" leftmargin="20" rightmargin="20"
bottommargin="15" marginwi
| ^
| Going to the explain page gives
| ""there is no attribute 'FOO' for this element (in this HTML
version)"
| You have used an attribute with an element that is defined not
to have that attribute. This is most commonly caused by using
vendor-specific attributes without setting the document type
appropriately."
|
| Is this because I'm using definitions based on an old theme, do
you think? Is there a way to find out the best DOCTYPE to use
other than trying each in turn?
</snip>

Regardless of what doctype you use, you'll get the error as the
attribute "TOPMARGIN" is not a W3C standard. It's a Microsoft
attribute (I believe) that IE supports, but other browsers do
not.

Hopefully one of the more knowledgeable folks in this ng will
reply with the specifics. If not, check out a site such as
W3Schools and browse the HTML references to see if the
tag/attribute is supported or not.

http://www.w3schools.com/html/html_reference.asp

I no longer use the FP Editor but still lurk in this ng as I
still get a lot of good info.

hth

 

[Kathleen Anderson [MVP - FP]]

Dan:
Try removing the margin HTML attributes from your body tag and adding them
using CSS:

Change this: <body topmargin="15" leftmargin="20" rightmargin="20"
bottommargin="15" marginwi ...

to this: <body>

and then, if your CSS is external: body { margin: 5px 0px 2px 25px }
If your CSS is inline: <body STYLE="margin: 5px 0px 2px 25px">this is a test
display document</body>

From http://www.blooberry.com/indexdot/css/properties/margin/margin.htm

 

[Chet]

| I'm avoiding themes, and building a page (based on a 2-column
7-row HTML table), linked to an external style sheet, that will
become a DWT to use as the design basis for a web. Got to an
(early) stage where its not bad in different browsers - pre-NN6
doubles the width of the left column for some reason (I use a
gradient gif as a background there), BUT when I link to a style
sheet, it really screws up the display in anything other than IE.
The css file is simple, hand-coded, mostly by pasting bits from
the various css files belomnging to the theme I thought would do
the trick... hand-coded a simple CSS file for it
|
| I have a simple page based on an HTML table - 2-column (left
170px, right 100% - table no width or height), 7 rows, using a
background gif in the top row (which has the two cells merged),
and a color gradient background in the left column (lower 6
cells) - it's in the embryonic stage but will eventually be a DWT
providing design for a web. Wrote a CSS file using copy and
paste mostly, linked it to the page, and just having the linked
file in the header really screws up the display in all browsers
except IE (6.0). Before linking, modern non-IE browsers all
showed OK - older NN doubled the left column background for some
reason. Any help with why the style sheet makes such a
difference would be much appreciated. Following are URLs for the
non-linked, linked and embedded versions, together with the CSS
sheet URL:-
http://preferredcountry.com/Anteroom/st9_no_stylesheet.htm
| http://preferredcountry.com/Anteroom/st9_linked_stylesheet.htm
|
http://preferredcountry.com/Anteroom/st9_embedded_stylesheet.htm
| http://preferredcountry.com/Anteroom/dan_st9.css
|
| TIA
|
| Dan Ellis

Dan,

Would it be possible for you to e-mail me the entire html page
that you're working on? I'd like to see it and play with it a
bit? It would be appreciated.

 

[Stefan B Rusynko]

That's because in older versions of FP the HR image in a theme was applied using a MS only style
..mstheme {separator-image ...}, not supported by validators
- in FP2003 the HR line is no longer an image

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.net-sites.com/sitebuilder/newsgroups.asp
_____________________________________________


| Stefan,
|
| Have placed the dan_st9.css sheet plus files referenced into folder http://preferredcountry.com/Anteroom/CSS-st9 fixed the URL
references, but still get e.g.
| "Line: 0 Context : .mstheme Property separator-image doesn't exist : url(bar.gif)". Hmmmm.
|
| URLs are now
| http://preferredcountry.com/Anteroom/CSS-st9/dan_st9.css
| http://preferredcountry.com/Anteroom/st9_embedded_stylesheet.htm
| http://preferredcountry.com/Anteroom/st9_linked_stylesheet.htm
| http://preferredcountry.com/Anteroom/st9_no_stylesheet.htm
|
| Dan

 

[Dan]

No problem, and thanks. First, I'll make some changes suggested by Kathleen and Stefan plus some others I've realised are necessary 'cos I started with CSS code from an old version of FP that uses MS-proprietary styles in its themes... I'm really almost a beginner, and make beginner's mistakes :-

Da

 

[Dan]

Thanks, Kathleen - that's a very useful hint (and URL) for me. Incidentally, in a post from you about "Doctype specification in Frontpage 2003" - 12/27/2003, you give a really valuable hint about editing the Normal.tem file to include a proper DOCTYPE - at http://www.spiderwebwoman.com/tutorials/doctypesolution.asp. Does exactly the same apply to FP2003? If so, you might want to add that to your page - and I guess the Normal.tem is in C:\Program Files\Microsoft Office\Templates\1033\Pages11? (Not .../Pages, I mean).

I have a lot of fixing to do to the CSS file - I started with a prior version of FP theme with many proprietray-to-MS elements - all I have to do is find their equivalents in validate-able CSS... See my two Wanted - posts, looking for a DOCTYPE detector and a CSS/HTML invalid-stuff detector that would smartly suggest legal equivalents. And of course they need to be free . I see you've already posted to the second - Wow! Sometimes this group amazes me. Thanks!

Dan Ellis

Dan Ellis

 

[Kathleen Anderson [MVP - FP]]

Hi Dan:
On my PC, it's located in C:\Program Files\Microsoft
Office\Templates\1033\PAGES11\normal.tem\ and I've just updated the page -
thanks!

I'm not sure that you're going to find a DOCTYPE detector - most validators
will tell you what it *isn't*, not what it *is*.

 

[Chet]

| No problem, and thanks. First, I'll make some changes
suggested by Kathleen and Stefan plus some others I've realised
are necessary 'cos I started with CSS code from an old version of
FP that uses MS-proprietary styles in its themes... I'm really
almost a beginner, and make beginner's mistakes
|
| Dan
|

We were all beginners at one time, I don't think anyone has ever
been born with this type of knowledge!! Sometimes I still feel
like a beginner!

No hurry at all to receive what you're working on, would just
like to see the entire page really. Just mail it to me off the
ng.

Thanks,

 

[Dan]

Hi Kathleen, blooberry seems to be down today - I found at http://www.w3schools.com/css/default.asp an alternative source of code snippets etc. that showed me that the order in body { margin: 5px 0px 2px 25px } goes top, right, bottom, left - had trouble sorting that out because so many elements in my CSS need fixing, plus I suspect my DOCTYP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
"http://www.w3.org/TR/html4/loose.dtd"
is incorrect - I get quite different behavior in different browsers if I remove the DOCTYPE (switches browsers to quirky mode, right?) than if it's in place... I have some serious learning to do. And a lot of fixing up, also..

Thanks for your help - much appreciated

Dan Ellis