FP2003 - (Another) Very poor Design view display

[Malcolm]

I am using FP2003 SP3.

Having completed the exercise(!) of converting 28 pages from
HTML to CSS I was taken aback by the extremely poor rendering of those
pages in the Design view compared to their display not only in Preview
(slightly better) but even more so in my browsers where they appear as a
very good imitation of what I would have liked to achieve! So much so
that I abandoned Design view and worked directly from the CSS file to
Firefox. Perhaps it time for me to consider using Expression Web?

Unfortunately the appearance in IE7 is somewhat disappointing as the
rendering of the text in the table of trophy holders is much larger than
in Firefox. Is there an error in my CSS or perhaps a workaround for IE?

http://www.sandiwaygolf.co.uk/golftrophy.html

 

[Murray]

<link rel="stylesheet" type="text/css" href="../sgc_styles/honours.css">

File not found....

(it's a bad link - the page is already at the root level, you cannot go up
one more level from there)

 

[Malcolm]

Murray thank you. I have corrected the link as below:

<link rel="stylesheet" type="text/css" href="sgc_styles/honours.css">

 

[Murray]

Text now looks the same to me on IE/FF/Safari.

Be aware that it is a poor practice to specify only a single font. It's
much more advisable to use a font family, e.g.,

body { font-family:"Trebuchet MS", verdana, arial, helvetica, sans-serif; }

 

[Malcolm]

Again thank you Murray. I have edited the font-family CSS as you suggested.

However, having done that, on line in IE7 I see the yellow text in the
years and names tables larger than the text in the lower grey area. In
Firefox 3, also on line the font-size in both parts is the same and this
is what I intended. Now that it looks the same to you and as I forced a
refresh (Ctrl+F5) of the display in IE7 I am even more puzzled.

 

[Murray]

The yellow text is sized by the 'td' type selector rule -

table#honours {
border-collapse: collapse;
border:0;
width:100%
font-family: "Trebuchet MS";
font-size: 13px
font-weight: normal;
color:#FFFF00;
text-align: left;
padding:5px;
background-image:url(../images/oakveneeropt5012_6.jpg);
}

td {
font-family: "Trebuchet MS";
font-size: 13px
text-align: left;
padding-left:5px;
font-size:90%;
color:#FFFF00;
}
(note the font-size:90% style, and the missing ";" at the end of the first
font-size style in this latter rule)

- whereas the text in the gray area is sized by the table#datatable td
rule -

table#datatable td {
border-collapse: collapse;
border:0;
width:100%
font-family:"Trebuchet MS";
font-size:13px;
font-weight: normal;
color: #000000;
text-align: left;
padding:1px;
background-color: #CCCCCC;
}

I believe that if you remove the font-size:90% style from the 'td' rule, AND
add the missing ";" at the end of the font-size:13px style, you will see
these two font sizes coincide.

 

[Malcolm]

Murray,

Thank you for your patience and the courtesy of your responses; in
particular your last message. I have no excuses for the errors in my
CSS only that I had failed as my work progressed to carefully proof read
the code and to use the CSS Validator. I found other omissions as well
as those you referred to.

All is now as I want and even Design view is correct. I have learned a
lesson with your help. It may be a cliché but it is very hard for an
old dog to learn `new' tricks!

Malcolm

 

[Murray]

As the prototypical 'old dog' I can only say to keep at it! If I can do it,
so can you.... 8)