Website built in Frontpage 2003 looks bad in Chrome & FF

  • Thread starter Thread starter CJB
  • Start date Start date
C

CJB

I have built a webpage using FP 2003 with a FP theme. It works well in
I.E. 7/8. The text is large and bold, and the background is just
visible, and the embedded videos play OK. The website is at:
http://chrisbrady.itgo.com/jigdolls/jigdolls.htm

However I've now had reports that folks using Chrome and Firefox can't
read the text because it is small and thin and the background gif
overwhelms it.

So please can someone give me pointers to adjusting the FP generated
HTML (or whatever) so that the pages look the same as in I.E.

I thought that with the new generation of browsers there would be some
conformity of appearance - I mean aren't there agreed standards now-a-
days? - but it seems that web designers still need to code for the
different idiosyncracies of the browsers that are out there.

Thanks - ChrisJBrady
 
I have built a webpage using FP 2003 with a FP theme. It works well in
I.E. 7/8. The text is large and bold, and the background is just
visible, and the embedded videos play OK. The website is at:http://chrisbrady.itgo.com/jigdolls/jigdolls.htm

However I've now had reports that folks using Chrome and Firefox can't
read the text because it is small and thin and the background gif
overwhelms it.

So please can someone give me pointers to adjusting the FP generated
HTML (or whatever) so that the pages look the same as in I.E.

I thought that with the new generation of browsers there would be some
conformity of appearance - I mean aren't there agreed standards now-a-
days? - but it seems that web designers still need to code for the
different idiosyncracies of the browsers that are out there.

Thanks - ChrisJBrady
Click to expand...

Looks OK to me on a PC using Firefox and Chrome.

www.richardfisher.com
 
I see no major differences between IE7, IE8 and FireFox 3.014. There are
differences, because as far as I can see you have not defined any text
sizes - this leaves it up to the browser to decide how large the text should
be.

" I thought that with the new generation of browsers there would be some
conformity of appearance - I mean aren't there agreed standards now-a-
days? - but it seems that web designers still need to code for the
different idiosyncracies of the browsers that are out there. "

Yes, there are standards - but YOU have to code to them. FrontPage does not
code to standards, so you have to. And even today's browsers have their own
idiosyncracies that you have to overcome, IE6 being the worst of the bunch.
IE6 and to a lesser extent IE7 do not follow standards. FrontPage defaults
code that looks good in IE5.

Your own code is curious- lots of potential CSS there, but there is one
error repeated so many times it would be easier to start again than correct.

To start - there is no !doctype. The !doctype places the browser in
standards mode. The other mode - Quirks - means that IE will follow the
rendering rules that IE5 follows, and FireFox will follow a different set of
rules.

The error:

<p id="heading_1"><span><span><span><span><span id="text_1_wrapper"><span
id="text_1">

What's with all the spans? And where are the CSS for heading_1,
text_wrapper_1 and text_1 defined?
The big mistake is that these id's are repeated - an id can only be used
ONCE on the page. If you need the CSS more often then use classes instead.
Or if you are not using CSS - don't use anything. <p> on it's own is just
as good in your page.
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
Very many thanks for your prompt feedback. My responses appended
below. Chris Brady.

I see no major differences between IE7, IE8 and FireFox  3.014.  There are
differences, because as far as I can see you have not defined any text
sizes - this leaves it up to the browser to decide how large the text should
be.

" I thought that with the new generation of browsers there would be some
conformity of appearance - I mean aren't there agreed standards now-a-
days? - but it seems that web designers still need to code for the
different idiosyncracies of the browsers that are out there. "

Yes, there are standards - but YOU have to code to them.  FrontPage does not
code to standards, so you have to.  And even today's worst of the bunch.
IE6 and to a lesser extent IE7 do not follow standards.  FrontPage defaults
code that looks good in IE5.
Click to expand...

Agreed. But that's where my inexperience comes in.
Your own code is curious- lots of potential CSS there, but there is one
error repeated so many times it would be easier to start again than correct.
Click to expand...

My HTML code was purely generated by FP with a standard Theme
providing the CSS (I assume). The only code hand-coded was the
Javascript (minimal).
To start - there is no !doctype.  The !doctype places the browser in
standards mode.  The other mode - Quirks - means that IE will follow the
rendering rules that IE5 follows, and FireFox will follow a different setof
rules.
Click to expand...

Didn't know about this. FP didn't generate this for me. I guess I can
add this by hand - I'll find out how and where.
The error:

<p id="heading_1"><span><span><span><span><span id="text_1_wrapper"><span
id="text_1">

What's with all the spans?  
Click to expand...

Didn't know they were there. FP must have put them in for a reason!!!
And where are the CSS for  heading_1, text_wrapper_1 and text_1 defined?
Click to expand...

Again FP didn't create any CSS for these. Not sure what they do.
The big mistake is that these id's are repeated - an id can only be used
ONCE on the page.  
Click to expand...

FP repeated them for me!!
If you need the CSS more often then use classes instead.
Click to expand...

Classes? Hmm - not sure how to use those.
 
Hmm - I added the following to the head of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

and when 'Preview'ed in I.E. all the text became centred with the
bullet points all over the place.

What !doctype should I use please.

And please how do I remove all the <span>'s etc. I actually have a
bout 50 dsimilar pages on my web site!!

Many thanks.

Chris Brady.
 
Aha - I have to use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>

then all appears OK.

But now I have to remove all the duplicate <spans>

Chris B.
 
Depends on how compliant your html code is
- For Non- compliant html try

<!Doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


Hmm - I added the following to the head of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

and when 'Preview'ed in I.E. all the text became centred with the
bullet points all over the place.

What !doctype should I use please.

And please how do I remove all the <span>'s etc. I actually have a
bout 50 dsimilar pages on my web site!!

Many thanks.

Chris Brady.
 
FrontPage may have included some of the spans, but it definitely did not
include the ids on its own. FP will also not repeat ids - they would have
to be copied.

To remove the <span> tags use Find and replace:
Find <span> replace (leave blank)
Find <span id="text_1_wrapper"> replace (leave blank)
Find <span id="text_2_wrapper"> replace (leave blank)
Find <span id="text_1"> replace (leave blank)
Find <span id="text_2"> replace (leave blank)
Find </span> replace (leave blank)

Do the same for all the invalid and repeated ids in <p> and <h..> tags
Find id="heading_1" replace (leave blank)
and repeat for the other unused ids.

There are over 300 <span> tags in that page - and none of them do anything.
The reason the wording centres when you use a valid !doctype is this:
<div align="center">
The align="center" is inherited by other tags within that <div> - so
everything centres
This is standards at work - use the correct tags and attributes.

<div align="center"><center>
<!--mstheme--></font> <table border="2" cellpadding="5" width="90%"
cellspacing="5" bordercolordark="#003333" bordercolorlight="#669999">

is better as:

<div style="width: 90%; margin: 0 auto;">
<table border="2" cellpadding="5" cellspacing="5">

This will not centre text that should be left justified, and centres the
content, but a valid !doctype is required such as
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

.. bordercolorlight and bordercolordark are invalid attributes that only do
anything in IE.

I suggest a visit to http://w3schools.com to learn the basics of HTML and
CSS - with modern browsers you will need both.

With the corrections mentioned in this thread, there is very little wrong
with the page.
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
FrontPage may have included some of the spans, but it definitely did not
include the ids on its own.  FP will also not repeat ids - they would have
to be copied.

To remove the <span> tags use Find and replace:
Find <span>  replace (leave blank)
Find <span id="text_1_wrapper">  replace (leave blank)
Find <span id="text_2_wrapper"> replace (leave blank)
Find <span id="text_1">   replace (leave blank)
Find <span id="text_2">   replace (leave blank)
Find </span>  replace (leave blank)

Do the same for all the invalid and repeated ids in <p> and <h..> tags
Find  id="heading_1"    replace (leave blank)
and repeat for the other unused ids.

There are over 300 <span> tags in that page - and none of them do anything.
The reason the wording centres when you use a valid !doctype is this:
<div align="center">
The align="center" is inherited by other tags within that <div> - so
everything centres
This is standards at work - use the correct tags and attributes.

<div align="center"><center>
 <!--mstheme--></font> <table border="2" cellpadding="5" width="90%"
cellspacing="5" bordercolordark="#003333" bordercolorlight="#669999">

is better as:

<div style="width: 90%; margin: 0 auto;">
<table border="2" cellpadding="5" cellspacing="5">

This will not centre text that should be left justified, and centres the
content, but a valid !doctype is required such as
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

.  bordercolorlight and bordercolordark are invalid attributes that only do
anything in IE.

I suggest a visit tohttp://w3schools.comto learn the basics of HTML and
CSS - with modern browsers you will need both.

With the corrections mentioned in this thread, there is very little wrong
with the page.
--
Ron Symonds
Microsoft MVP (Expression Web)http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.














- Show quoted text -
Click to expand...

WOW - thank you for the your help. Unfortunatelky I have over 50 pages
with the same problems. But I don't know where all the 'id' tags came
from. I certainly didn't type them in!!

Now I will massively edit the page(s).

Thank you again.

Chris Brady
 
OK - I'm getting there. Here's the next issue:

Adjusting Font Sizes w.r.t. Browsers

With my FP generated web page using a standard FP Theme, I cannot find
anywhere that defines the font size for Normal aka Default text in the
CSS file(s).

However if I add a tag <font size="3"> the text appears as the same
size in I.E. So somewhere in the CSS(s) there must be a statement that
says: "make the default body text font size = 3 !! But where?

Anyway when I view the page in both Firefox and Chrome the Normal aka
Default text size is small and thin almost unreadable. So I tried
adding a tag <font size="4"> and this worked a treat.

So now I need some Javascript code to detect the browser version and
adjust the fontsize accordingly.

Or is there a better way. Perhaps I can add browser detecting
Javascript to the CSS file(s)?

Cheers - Chris B.
 
On my systems (Windows XP and Windows 7) Firefox and Safari display the text
at roughly the same size as IE.
Check the text size setting in View->Text Size in IE (should be set to
Normal)
In FireFox 3.0xxx
View->Zoom->Reset

These should set the browsers to show text at the "out of the box" setting -
both at <font size="3">
The CSS that sets the default font size is built into the browser.
You don't need any JavaScript to detect browsers, because it all works
correctly now. Don't fix what isn't broken.
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
Thank you. You said:

"Don't fix what isn't broken."

Well I have tried to fix the fonts by using CSSs however when loaded
to the server nothing worked - the CSSs were ignored. Also with all of
the editing FP kindly screwed up the text fonts, refused to properly
apply the theme, and lost the link to the background gif.

So having wasted an entire day messing around, and failed to get any
CSS working, I am reverting back to the original text and theme page
layout.

=====

So the bits that do appear to be broken are:

Firefox
=====
The bullet points are way too high and aren't level with the text

(But Media Player shows the controls in 'Val Knight' clip OK, Chrome
doesn't)

Chrome
======
Media Player`shows no controls in 'Val Knight' clip - Not OK

Media Player starts up with auto - whereas I.E. and Firefox wait for
user to click 'start' - Not OK

At end of playing this clip the screen blanks out - whereas I.E.and
Firefox display the backgroup JPG

And I've yet to try any other browsers!!!

Please can someone advise on this.

I'll getthe page right yet!!

Thanks - Chris Brady

P.S. This was the CSS code I tried to get to work:

http://www.alistapart.com/articles/howtosizetextincss/

This was applied to the existing FP theme.css file. However it appears
that FP doesn't like CSS files to be edited and refused to recognise
the changes!!!

<style type="text/css">
..mstheme {
top-bar-button: url(topglobd.gif);
version: 1.0;
navbutton-background-color: rgb(255,255,255);
}
..mstheme-topbar-font {
font-family: Arial, Helvetica;
color: rgb(153,0,0);
}
body {
font-size:100%;
font-family: Trebuchet MS, Arial, Helvetica;
background-image: url(toptxtr.gif);
}
..bodytext p {
font-size:0.875em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
<style type="text/css">
h1
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h2
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h3
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h4
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h5
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h6
{
font-family: Trebuchet MS, Arial, Helvetica;}
</style>
 
You may be at the stage I was a couple of years ago. I decided to
abandon Frontpage and rewrite using CSS and HTML. It is quite a lot
of work but not too much more than trying to fix the Frontpage code.
I now have a web page that is standards compliant and displays as I
want in all modern browsers (more or less).

www.richardfisher.com
 
When you added the CSS to the <head> of the page, did you also add the
classes to the relevant parts of the page?
A FrontPage theme will ALWAYS over-rule any CSS you use. The theme is
always applied after your CSS - either by using HTML attributes and <font>
tags, or by placing the CSS link (FP2003, and FP2002 if CSS is chosen in the
theme configuration) immediately before the </head> tag - regardless of your
wishes.
So if you wish to use CSS to fix font sizes, you will have to remove the
font tags and the content of the <body> tag, and remove the theme.

FYI - NEVER use pt for text sizes These are print metrics, and should be
confined to print. Different browsers will display pts at different sizes
as they interpret the size and convert to pixels. Pixels for font-sizes
should be avoided in IE (as that article says). IE cannot resize pixels,
but all other browsers can - this means accessibility problems in IE.

As for the media player - different browsers will do different things. This
is why web designers get big pay packets. I don't use video, so can't help
there.
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.



CJB said:
Thank you. You said:

"Don't fix what isn't broken."

Well I have tried to fix the fonts by using CSSs however when loaded
to the server nothing worked - the CSSs were ignored. Also with all of
the editing FP kindly screwed up the text fonts, refused to properly
apply the theme, and lost the link to the background gif.

So having wasted an entire day messing around, and failed to get any
CSS working, I am reverting back to the original text and theme page
layout.

=====

So the bits that do appear to be broken are:

Firefox
=====
The bullet points are way too high and aren't level with the text

(But Media Player shows the controls in 'Val Knight' clip OK, Chrome
doesn't)

Chrome
======
Media Player`shows no controls in 'Val Knight' clip - Not OK

Media Player starts up with auto - whereas I.E. and Firefox wait for
user to click 'start' - Not OK

At end of playing this clip the screen blanks out - whereas I.E.and
Firefox display the backgroup JPG

And I've yet to try any other browsers!!!

Please can someone advise on this.

I'll getthe page right yet!!

Thanks - Chris Brady

P.S. This was the CSS code I tried to get to work:

http://www.alistapart.com/articles/howtosizetextincss/

This was applied to the existing FP theme.css file. However it appears
that FP doesn't like CSS files to be edited and refused to recognise
the changes!!!

<style type="text/css">
.mstheme {
top-bar-button: url(topglobd.gif);
version: 1.0;
navbutton-background-color: rgb(255,255,255);
}
.mstheme-topbar-font {
font-family: Arial, Helvetica;
color: rgb(153,0,0);
}
body {
font-size:100%;
font-family: Trebuchet MS, Arial, Helvetica;
background-image: url(toptxtr.gif);
}
.bodytext p {
font-size:0.875em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
<style type="text/css">
h1
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h2
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h3
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h4
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h5
{
font-family: Trebuchet MS, Arial, Helvetica;
}
h6
{
font-family: Trebuchet MS, Arial, Helvetica;}
</style>
Click to expand...
 
When you added the CSS to the <head> of the page, did you also add the
classes to the relevant parts of the page?
A FrontPage theme will ALWAYS over-rule any CSS you use.  The theme is
always applied after your CSS - either by using HTML attributes and <font>
tags, or by placing the CSS link (FP2003, and FP2002 if CSS is chosen in the
theme configuration) immediately before the </head> tag - regardless of your
wishes.
So if you wish to use CSS to fix font sizes, you will have to remove the
font tags and the content of the <body> tag, and remove the theme.

FYI - NEVER use pt for text sizes  These are print metrics, and should be
confined to print.  Different browsers will display pts at different sizes
as they interpret the size and convert to pixels.  Pixels for font-sizes
should be avoided in IE (as that article says).  IE cannot resize pixels,
but all other browsers can - this means accessibility problems in IE.

As for the media player - different browsers will do different things.  This
is why web designers get big pay packets.  I don't use video, so can't help
there.
--
Ron Symonds
Microsoft MVP (Expression Web)http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
Click to expand...

Thank you again. I actually modified the FP theme CSSs - they were
simple enough. But the effects were ignored. CJB.
 
You may be at the stage I was a couple of years ago.  I decided to
abandon Frontpage and rewrite using CSS and HTML.  It is quite a lot
of work but not too much more than trying to fix the Frontpage code.
I now have a web page that is standards compliant and displays as I
want in all modern browsers (more or less).

www.richardfisher.com
Click to expand...

Hi - I've checked your web site and it looks very good. I also checked
the code and I see what you are doing. Very nice coding - neat and
precise. Thank you - Chris B.
 
The only way to modify the theme CSS is to modify the theme and save with a
new name.
As Richard Fisher implied - themes are very restricting.

You could copy the theme CSS and use those as a basis - but remove the
theme. A lot of the CSS used for the theme is not used, so extract the bits
you need and delete the rest - several copies may be needed as backups :)
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
The only way to modify the theme CSS is to modify the theme and save witha
new name.
As Richard Fisher implied - themes are very restricting.

You could copy the theme CSS and use those as a basis - but remove the
theme.  A lot of the CSS used for the theme is not used, so extract thebits
you need and delete the rest - several copies may be needed as backups :)
--
Ron Symonds
Microsoft MVP (Expression Web)http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.







- Show quoted text -
Click to expand...

You're right. Thanks. Create a new theme based on the original one!!
Will try that out. Chris B.
 
Back
Top