PDA

View Full Version : CSS differences between Netscape and I.E.

Buff
05-02-2003, 03:21 PM
Im using a style in some tables on a couple of pages and
netscape does it correctly on one page but not another.

(both work fine in I.E.)

I found that using color names for netscape (rather than
rgb hex numbers) seems to help but now always. and of course this can be a severe limitation if force to use color names.

The page that works correctly (at least here) is
http://odin.prohosting.com/~nhs1965/index.htm

the one that doesnt work correctly is at
http://thunder.prohosting.com/~oasys/clientwriteup.htm

both tables using the style are near the top.

using i.e.5.5 and netscape 7.0

what happens is on the oasys page the links don't change
on hover whereas they do on the nhs1965 page.

Thanks in advance for any help.
Roy Sinclair
05-02-2003, 03:56 PM
If you want things to work properly in browsers like Mozilla then you need to write proper HTML code. You've got numerous occurances of out of order tags:

<x><y></x></y> ---- This is wrong, inner tags must be completely within the outer tags <x><y></y></x> would be the correct order.

I also note that you're using a lot of excess tags on the page, if you can use style sheets (and you can), there's no need to use the font, b and center tags as well, those should be added to your style. The "title" property also placed on the <font> tag should be on the <td> or the <a> tag.
Buff
05-02-2003, 05:14 PM
thanks for your close examination.

I'll get right on fixing that.
Buff
05-02-2003, 06:07 PM
Ok Roy I reduced the file to just the top portion including the
table with the class (for testing) and will post it below

I think I got (in this example) all the out of order tags fixed and
changed the <center></center> to and align parameter inside
<td> and moved the title from <font> to the anchor tags.

Netscape now recognizes the textdecoration of underline
(not sure whether it did before or not) but still doesnt change
colors on hover.


<HTML>
<HEAD>
<TITLE>Client Write-Up Software for the CPA</TITLE>
<META NAME="keywords" CONTENT="Write-up">
<META NAME="description" CONTENT="Write-Up for the CPA">
<META http-equiv="Content-Type" content="text-html; charset=iso-8859-1">
<STYLE TYPE="text/css">
.toplnks a:link { color:black ; background-color: "#9Db9c8"; text-decoration: none }
.toplnks a:hover { background-color: "#CEDCE3" ;color: "#202020"; text-decoration: underline }
</STYLE>
</HEAD>
<BODY BGCOLOR="#ECECEC" VLINK="#000000" LINK="#000088" ALINK="#000000" topmargin=0 rightmargin=0 leftmargin=0>
<a name="thetop"></a>
<TABLE border=1 cellspacing=2 cellpadding=2 width="100%" bordercolorlight=white bordercolordark=black class="toplnks">
<TR>
<TD bgcolor="#9DB9C8" align=center><a href="clientwriteup.htm" title="This is the home page"><font size=2 face="MS Sans Serif"><b> Home </b></font></a></TD>
<TD bgcolor="#9DB9C8" align=center><a href="mailto:oasys@sbcglobal.net" title="Email questions comments"><font size=2 face="MS Sans Serif"><b> Contact Us </b></font></a></TD>
<TD bgcolor="#9DB9C8" align=center><a href="oasys.htm#thetop" title="Many of the features are listed here"><font size=2 face="MS Sans Serif"><B> Features </B></font></a></TD>
<TD bgcolor="#9DB9C8" align=center><a href="wutour1a.htm" title="See screenshots of the programs"><font size=2 face="MS Sans Serif"><B> Tour </B></font></a></TD>
<TD bgcolor="#9DB9C8" align=center><a href="FAQS.htm#thetop" title="Answers to lots of questions about our package"><font size=2 face="MS Sans Serif"><B> Questions </B></font></a></TD>
<TD bgcolor="#9DB9C8" align=center><a href="download.htm#thetop" title="Get the free demo"><font size=2 face="MS Sans Serif"><B> Download demo </B></font></a></TD>
<TD bgcolor="#9DB9C8" align=center><a href="ordering.htm#thetop" title="How to order Client Write Up"><font size=2 face="MS Sans Serif"><B> Ordering Info </B></font></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Buff
05-02-2003, 06:27 PM
Figured it out -- I think.

I noticed I could substitute color names and most would work
on both (lightgray doesnt work on I.E.)

So, I removed the "#....."
from the colors in the style and just left it 9DDE3D for example
instead of "#9DDE3D"

and bingo the example works.
dhtmlhelp
05-02-2003, 07:34 PM
Hi Buff,

yes I think the syntax for .toplnks a:hover { background-color: "#CEDCE3" ;color: "#202020"; } is strictly

a.toplnks:hover { background-color: #CEDCE3; color: #202020; }

Note also that you should move values like <TD bgcolor="#9DB9C8" to your style sheet. For example:

td #bg { background-color: #CEDCE3; }

and then use <td class='bg'> in your html

DH
Roy Sinclair
05-02-2003, 07:57 PM
Look at the code below:


<HTML>
<HEAD>
<TITLE>Client Write-Up Software for the CPA</TITLE>
<META NAME="keywords" CONTENT="Write-up">
<META NAME="description" CONTENT="Write-Up for the CPA">
<META http-equiv="Content-Type" content="text-html; charset=iso-8859-1">
<STYLE TYPE="text/css">
.toplnks { background-color: #9Db9c8; font-weight: bold; text-align: center; font-family: MS Sans Serif; font-size: x-small;}
.toplnks a:link { color:black ;text-decoration: none; }
.toplnks a:hover { background-color: #CEDCE3 ;color: #202020; text-decoration: underline }
</STYLE>
</HEAD>
<BODY BGCOLOR="#ECECEC" VLINK="#000000" LINK="#000088" ALINK="#000000" topmargin=0 rightmargin=0 leftmargin=0>
<a name="thetop"></a>
<TABLE border=1 cellspacing=2 cellpadding=2 width="100%" bordercolorlight=white bordercolordark=black class="toplnks">
<TR>
<TD><a href="clientwriteup.htm" title="This is the home page">Home</a></TD>
<TD><a href="mailtoasys@sbcglobal.net" title="Email questions comments">Contact Us</a></TD>
<TD><a href="oasys.htm#thetop" title="Many of the features are listed here">Features</a></TD>
<TD><a href="wutour1a.htm" title="See screenshots of the programs">Tour</a></TD>
<TD><a href="FAQS.htm#thetop" title="Answers to lots of questions about our package">Questions</a></TD>
<TD><a href="download.htm#thetop" title="Get the free demo">Download demo</a></TD>
<TD><a href="ordering.htm#thetop" title="How to order Client Write Up">Ordering Info</a></TD>
</TR>
</TABLE>
</BODY>
</HTML>


See how much cleaner looking this code is without the excess tags I mentioned? That's the beauty of CSS, you can elminate all that repetitive specifying of information and the associated extra tags from your content which makes finding and changing that content a whole lot easier. It also makes it very easy to re-style the whole menu by changing only a few lines of CSS.

If you want to learn more, try to figure out how to add the CSS to the toplnks class that'll allow you to change this: <TABLE border=1 cellspacing=2 cellpadding=2 width="100%" bordercolorlight=white bordercolordark=black class="toplnks"> to this: <TABLE class="toplnks"> without altering the look.

Something to get you started:

http://www.westciv.com/style_master/academy/css_tutorial/properties/border.html
http://www.w3.org/TR/CSS2/box.html#border-properties