Make your own free website on Tripod.com

~ We Can Sing Webpage Notes ~

Cascading Stylesheet Classes & Netscape -

I set up my page with a table and put the Photo Albums navigation bar in the first row, the second row contains two columns. Column 1 is my menu bar and column 2 is the main part of my page. I wanted different fonts for my navigation bars, along with different colours for the links and table background. I created different 'classes' for my Navigation Bars in my stylesheet like this:


.navigationbar
{background-color: #990033;
border: thin #FFFFFF solid;
color: #FFFFFF;
font-family: "Verdana", "sans serif";
font-size: 10pt;
font-style: italic;
padding: 1%;
text-align: right;
text-decoration: none}

.navigationbar A:link
{color: #FFCCCC;
text-decoration: none}

.navigationbar A:visited
{color: #CC9999;
text-decoration: none}

.navigationbar A:active
{color: #CCFFFF;
text-decoration: none}

.navigationbar A:hover
{color: #CCFFFF}

I started each table cell with code like this:

<td colspan=2 valign= middle align=center width="100%" height=50><P CLASS="navigationbar">

and then entered the information for that cell.

Everthing looked great in IE, but not so in Netscape. After many hours of frustration trying to figure out what was wrong, I was just about to give up and go back to my frames pages, when I decided to try moving the <P CLASS=navigationbar> code inside the <td> tag like this:

<td colspan=2 valign= middle align=center width="100%" height=50 P CLASS="navigationbar">.

Finally Netscape could I understand what I wanted!

I've started using Arachnophilia to edit my webpages. It's a great HTML editor that allows me to preview my pages in both IE5 and Netscape, before saving the changes to the file, what a time-saver! Best of all it is free! You can download the program from the Arachnophilia Home Page