My gallery looks like a dog's breakfast in Netscape - Aaarghh!

[wayfarer]

Have just checked out my gallery in Netscape and it appears as though none of the stylesheet info is being applied by the browser... Everything looks hunky dory in Internet Explorer, but the table backgrounds, text formatting and borders etc are not showing up in Netscape at all.

I have a PHPBB forum built awhile ago with a modified look and feel and using an external style sheet and it looks great in both browsers. Similar principles would be involved, I would have thought.

What areas should I be examining to try to determine why the difference is occurring? Here's a sample from my style sheet and a screendump from both browsers. It's pretty obvious which is the Netscape one

Code Select Expand

/*
$Id: style.css,v 1.2 2004/06/11 09:20:09 tarique Exp $
*/

/* Foreground color definition */
body { color : #FFFFFF; font-size: 12px; font-family: Verdana, Helvetica, sans-serif; }
.topmenu, .topmenu a  { color: #b2d9ff; font-size: 11px; font-family: Verdana, Helvetica, sans-serif }
.topmenu a:hover   { color: #00ff00; font-size: 11px; font-family: Verdana; text-decoration: none }
.topmenu a:active  { color: #00ff00; font-size: 11px; font-family: Verdana }
.tableh1, .tableh1a, .tableh1_compact, .navmenu, .navmenu a, .sortorder_cell, .statlink, .statlink a, tableh1faq, { color : #ADFF2F; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.tabbedmenu, .tabbednavmenu a,  { color : #005dcf; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.tableh2, .tableh2_compact  { color: #FFFFFF; }
.tablepicinfo, .tablepicinfo_compact  { background-color: #FFFFFF; table-width: 30%; }
.alicetablepicinfo, .alicetablepicinfo_compact  { color: #000000; }
.tablegreenback, .tablegreenback_compact, { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #000000; }
.tablegreenback, .tablegreenback_compact, { font-size: 12px; font-family: Verdana, Helvetica, sans-serif; color: #000000; }
.whitetable2, {font-size: 10px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }
.whitetablehome, {font-size: 10px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }
.whitetable3, {font-size: 12px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }
.whitetable2faq, {font-size: 12px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }
.greytable, {font-size: 12px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; }
.stopslides  { color: #006400;  font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; { background-color: #000000; }
.textinput, .listbox, .radio, .checkbox { background-color: #CC3399; }
.alblink, .alblink a { color : #005dcf; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.albumlink2, .albumlink2 a, .catlink, .catlink a { color : #B2D9FF; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
a,  .bblink a, .user_thumb_infobox a, .sortorder_options a, { color: #005dcf; }
a:hover, .bblink a:hover, .user_thumb_infobox a:hover, .alblink a:hover, .catlink a:hover, .statlink a:hover { color : #3ED7F6; }
.button, .comment_button, .admin_menu_thumb, .admin_menu_thumb a, .admin_menu_thumb a:hover, .admin_menu, .admin_menu a, .admin_menu a:hover  { color: #-000000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.comment_date { color : #FFFFFF; }
.blackcomment_date { color : #000000; }
.footer, .footer a, .footer a:hover { color: #b2d9ff; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }

/* Background colors definition */
body { background-color: #4682b4; }
.textinput, .listbox, .radio, { background-color: #FFFFFF; }
.checkbox, { background-color: #F0F8FF; }
.tableh1, .tableh1_compact, { background-image : url(images/cellpic3.gif) ; }
.tableh2, .tableh2_compact, .tablef, .img_caption_table th, .navmenu, .navmenu a, .navmenu a:hover {         background-color: #000000; }
.tablef, {         background-color: #FF33FF; }
.tablepicinfo, .tablepicinfo_compact  { color: #FFFFFF; }
.alicetablepicinfo, .alicetablepicinfo_compact  { background-color: #F0F8FF; }
.tableb, .tableb_compact, .thumbnails, .img_caption_table td, .albumdesc, { background-color : #333333 ; }
.filmthumbnails, { background-color : #000000 ; }
.tablegreenback, .tablegreenback_compact, {background-image: url(images/cellpic2.jpg); }
.tablegreenback2, .tablegreenback2_compact, {background-image: url(images/cellpic2.jpg); }
.blacktable,  { background-color : #000000 ; }
.greytable, { background-color: #CCCCCC; }
.altimagecaption, .altimagecaption td { background-color : #000000 ; width: 200px; overflow: auto }
.faqsecondhead, .faqsecondhead a, .faqsecondhead td,  {background-image: url(images/cellpic4.gif); }

/* Borders for input controls */
.textinput, .listbox, .button, .comment_button, .admin_menu, .admin_menu_thumb  {        border: 1px solid #666666; }
.image { border: 1px solid #000000; }
.imageborder { border: 1px solid #000000; background-color:#000000; margin-top: 8px; margin-bottom: 8px; }
.image1 { border: 1px solid #ff0000; }

.maintable, {        background-color: #4682B4; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.maintablea, .maintableb {        background-color: #000000; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; border: 1px solid #000000; }
.img_caption_table th, .img_caption_table td { border-top : 0px solid #000000; }

/* Fonts definition */
body { font-family: "Verdana, Arial, sans-serif; }
.tableh1, .tableh1a, .catlink, .tableh2 { font-family: Verdana, Arial, sans-serif; }
.tableh4, .tableh4a, { font-family: Verdana, Arial, sans-serif; font-weight: bold; }
.textinput, .listbox, .radio, .checkbox { font-family: "Verdana, Arial, sans-serif; }
.button, .comment_button, .sortorder_options, .admin_menu_thumb { font-family: Verdana, Arial, Helvetica, sans-serif; }
.bluecatlink, { color : #000000; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.bluecatlink a, { color : #005dcf; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.bluecatlinkcaption, .bluecatlinkcaption a, { color : #000000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.altimagecaption, .altimagecaption a, .altimagecaption th, .altimagecaption td, { color : #999999; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.faqsecondhead, .faqsecondhead a, .faqsecondhead td,  { font-size: 12px; font-weight: bold, color: #006400; font-family: Verdana, Arial, Helvetica, sans-serif; }

table {
       font-size : 12px;
}

body {
       font-size : 12px;
       margin: 0px;
}

h1{
       font-weight: normal;
       font-size: 28px;
       font-family: "Verdana, Arial, Helvetica, sans-serif;
       text-decoration: none;
       padding-left : 20px;
       color: #000000;
       margin: 1px;
}

h2 {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       background-image : url(images/box_left_icon.gif);
       background-repeat : no-repeat;
       background-position : left;
       padding-left : 18px;
       font-size: 18px;}

h3 {
       font-weight: bold;
       font-family: "Verdana, Geneva, Arial, sans-serif;
       font-size: 12px;
       padding-left : 10px;
       color: #006400;
       margin: 2px;
}

h4 {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       padding-left : 5px;
       font-size: 12px;}

p {
       font-size: 100%;
       margin: 2px 0px;
}

ul {
       margin-left: 5px;
       padding: 0px;
}

li {
       margin-left: 0px;
       margin-top: 0px;
       margin-bottom: 0px;
       padding: 0px;
       list-style-position: inside;
       list-style-type: disc;
}

.top_panel td {
       white-space: nowrap;
}

.top_menu_left_bttn a {
       background-image : url(images/left_menu_button.gif);
       background-repeat : no-repeat;
       background-position : left;
       padding-left : 12px;
       padding-right : 6px;
       position: relative;
       display: block;
       height : 35px;
       line-height : 35px;
       text-decoration: none;
       color: #B2D9FF;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 11px;
}

.top_menu_left_bttn a:hover {
       background-image : url(images/left_menu_button_over.gif);
       background-position : left;
       background-repeat : no-repeat;
       text-decoration: none;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color: #F0AF00;
       font-size: 11px;
}

.top_menu_right_bttn a {
       background-image : url(images/right_menu_button.gif);
       background-repeat : no-repeat;
       background-position : right;
       padding-right : 22px;
       padding-left : 6px;
       position: relative;
       display: block;
       height : 35px;
       line-height : 35px;
       text-decoration: none;
       color: #B2D9FF;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 11px;
}

.top_menu_right_bttn a:hover {
       background-image : url(images/right_menu_button_over.gif);
       background-position : right;
       background-repeat : no-repeat;
       text-decoration: none;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color: #F0AF00;
       font-size: 11px;
}

.top_menu_bttn a {
       background-image : url(images/menu_button.gif);
       background-position : left;
       padding-left : 6px;
       padding-right : 6px;
       position: relative;
       display: block;
       height : 35px;
       line-height : 35px;
       text-decoration: none;
       color: #B2D9FF;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 11px;
}

.top_menu_bttn a:hover {
       background-image : url(images/menu_button_over.gif);
       text-decoration: none;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       color:         #F0AF00;
       font-size: 11px;
       text-decoration: none;

}

.textinput {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       padding-right: 3px;
       padding-left: 3px;
}

.listbox {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       vertical-align : middle;
}

.button {
       font-size: 11px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif;
       background-position : absmiddle;
       color: #000000;
       background-color: #E5F1E7;

}

.comment_button  {
       color: #000000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #E5F1E7;
       background-position: 50% middle; padding-right: 3px; padding-left: 3px
}

.radio {
       font-size: 100%;
       vertical-align : middle;
       background-color: #F0F8FF;
}

.checkbox {
       font-size: 100%;
       vertical-align : middle;
}

a {
       text-decoration: none;
}

a:hover {
       text-decoration: none;
}

.bblink a {
       text-decoration: none;
}

.bblink a:hover {
       text-decoration: underline;
}

.maintable {
       margin-top: 0px;
       margin-bottom: 0px;
       border-style: none;
}

.maintablea {
       margin-top: 0px;
       margin-bottom: 0px
}

.maintableb {
       border-top: 0px;
       padding-top: 1px;
       padding-right: 5px;
       padding-bottom: 1px;
       padding-left: 5px;
}

.tableh1 {
       padding-right: 10px;
       padding-left: 10px;
       border-left: 1px solid #DCDCDC;
       border-top: 1px solid #DCDCDC;
       border-right: 1px solid #DCDCDC;
       border-bottom: 1px solid #DCDCDC;
       height: 25px;
       background-image: url(images/cellpic3.gif);
}

.tableh1faq {
       color: #ADFF2F; font-weight: bold;
       padding-right: 10px;
       padding-left: 10px;
       border-left: 1px solid #DCDCDC;
       border-top: 1px solid #DCDCDC;
       border-right: 1px solid #DCDCDC;
       border-bottom: 1px solid #DCDCDC;
       height: 25px;
       background-image: url(images/cellpic3.gif);
}

.tableh1faq2 {
       color: #ADFF2F; font-weight: bold;
       padding-right: 10px;
       padding-left: 10px;
       border-left: 1px solid #DCDCDC;
       border-top: 1px solid #DCDCDC;
       border-right: 1px solid #DCDCDC;
       border-bottom: 1px solid #DCDCDC;
       height: 25px;
       background-image: url(images/cellpic3.gif);
}


[donnoman]

You have a number of parsing errors in that css file, you should probably start by hitting up a validator like http://jigsaw.w3.org/css-validator and clean it up.

I saw a couple duplicates in there as well.

[wayfarer]

I thought it might be something like that - I'm a bit of a CSS newbie and it's a bit of trial and error at the moment (hence the duplicates, trying to get stuff to work). Looks like I have my work cut out, fixing up the parse errors  

Thanks for the link. By the way, what is a context parse error?

[donnoman]

Most likely missing a trailing semi-colon,  beginning, or ending brace.

Or in this case missing the selector type might cause it, notice tableh1faq isn't set as a class or id, and its not an intrinsic like html, body, img, etc.

Things that you refer to with class <p class="mynewclass"> should start with a period ".mynewclass"

Things that are an id, like <p id="mainpara">  should end up in css as #mainpara

Code Select Expand


.tableh1, .tableh1a, .tableh1_compact, .navmenu, .navmenu a, .sortorder_cell, .statlink, .statlink a, tableh1faq, { col


[wayfarer]

Hooray! My CSS is now Valid!!  Thankyou so much Donnoman! Those pesky extra commas were doing a world of damage in Netscape. Everything now looks great except for some of my tables.

Any clue where I might look to solve this problem, only in Netscape?