CSS styles not working

[Yesideez]

I've just spent practically all night making my Amiga site from scratch. The code was old and I felt this was the best thing to do.

 

Problem is, for some reason the styles don't want to work when I use them inside a table which is inside a table. I've never had this problem before and it seems to have started since I started using "em" instead of "px" for font sizes and I'm pretty sure that isn't the cause. Here is my CSS:

a.urlmenu:link {font: 1em verdana; color: #e0ffe0; text-decoration: none}
a.urlmenu:active {font: 1em verdana; color: #80ff80; text-decoration: none}
a.urlmenu:visited {font: 1em verdana; color: #e0ffe0; text-decoration: none}
a.urlmenu:hover {font: 1em verdana; color: #40ff40; text-decoration: none; cursor: pointer}
a.link:link {font: 1em arial; color: #abab31; font-weight: bold; text-decoration: none}
a.link:active {font: 1em arial; color: #cdcd53; font-weight: bold; text-decoration: none}
a.link:visited {font: 1em arial; color: #abab31; font-weight: bold; text-decoration: none}
a.link:hover {font: 1em arial; color: #cdcd53; font-weight: bold; text-decoration: none; cursor: pointer}
body {font: 0.8em verdana; color: #ffffff; background-color: #000000; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; cursor: default}
table.tblmenu {background-color: #000000; border: 1px solid #ff0000}
table.tblmenu th {font: 0.7em verdana; color: #ffffff; text-align: center; font-weight: bold; background-image: url("../gfx/bgstrip1.gif")}
table.tblmenu td {font: 0.7em verdana; color: #ffffff; background-color: #440000; padding: 0px 1px 0px 1px}
table.tblmain {background-color: #000000; border: 1px solid #ffff00}
table.tblmain th {font: 0.9em arial; color: #ffffff; text-align: center; font-weight: bold; background-image: url("../gfx/bgstrip2.gif")}
table.tblmain td {font: 0.9em arial; color: #ffffff; background-color: #444400; padding: 0px 1px 0px 1px}
table.tblsub {background-color: #000000; border: 1px solid #888800}
table.tblsub th {font: 0.9em arial; color: #ffffff; text-align: center; font-weight: bold; background-image: url("../gfx/bgstrip1.gif")}
table.tblsub td {font: 0.9em arial; color: #ffffff; background-color: #444400; padding: 0px 1px 0px 1px}
table.tblend {background-color: #000000; border: 1px solid #cccccc}
table.tblend th {font: 0.7em verdana; color: #ffffff; text-align: center; font-weight: bold; background-image: url("../gfx/bgstrip.gif")}
table.tblend td {font: 0.7em verdana; color: #ffffff; text-align: center; background-color: #707070; padding: 0px 1px 0px 1px}
.err {color: #ff0000; font-weight: bold}
.gadtext {font: 0.9em verdana; color: #0000ff; background-color: #ffffff; border: 1px #ffff00 solid; padding: 0px 2px 0px 2px}
.gaddrop {font: 0.9em verdana; color: #0000ff; background-color: #ffffff; border: 1px #ffff00 solid; padding: 0px 0px 0px 2px}
.gadbutton {font: 0.9em verdana; color: #ff0000; background-color: #ffff44; border: 1px #cccccc solid; padding: 0px 2px 0px 2px; font-weight: bold}
.sideltop {color: #000000; width: 33%; font: 12px arial; text-align: left; padding-bottom: 3px}
.sidemtop {color: #000000; width: 33%; font: 12px arial; text-align: center; padding-bottom: 3px}
.sidertop {color: #000000; width: 33%; font: 12px arial; text-align: right; padding-bottom: 3px}
.sidelbot {color: #000000; width: 33%; font: 12px arial; text-align: left; padding-top: 3px}
.sidembot {color: #000000; width: 33%; font: 12px arial; text-align: center; padding-top: 3px}
.siderbot {color: #000000; width: 33%; font: 12px arial; text-align: right; padding-top: 3px}
.cell0 {background-color: #fbf9e7; color: #000000; padding-left: 3px; padding-right: 3px; font: 12px arial; border: 1px #aba695 solid}
.cell1 {background-color: #eae8d6; color: #000000; padding-left: 3px; padding-right: 3px; font: 12px arial; border: 1px #787362 solid}

 

Here is a chunk of the script to show where the styles are being used:

    $query=mysql_query("SELECT * FROM guestbook ORDER BY `guestbookid` DESC LIMIT ".$startindex.",".INT_GBSIZE);
    while ($fetch=mysql_fetch_array($query)) {
      $cellid=$counter%2;
      if ($fetch['private']) {
        $gbhtml.='    <tr>
      <td style="cell'.$cellid.'">
        <table cellspacing="0" cellpadding="1" width="100%">
          <tr><td class="pltextc'.$cellid.'">This signature is private</td></tr>
        </table>
      </td>
    </tr>
';
      } else {
        $sigdt=date("j F, Y",$fetch['added']);
        $gbhtml.='    <tr>
      <td class="cell'.$cellid.'">
        <table cellspacing="0" cellpadding="1">
          <tr><td class="pltext'.$cellid.'">'.stripslashes($fetch['name']).' from '.stripslashes($fetch['from']).' on '.$sigdt.'...</td></tr>
          <tr><td class="pltext'.$cellid.'"><br />'.nl2br(stripslashes($fetch['message'])).'</td></tr>
        </table>
      </td>
    </tr>
';
      }
      $counter++;
    }

 

And later in the script we have some more:

        <table width="870" cellspacing="1" cellpadding="0" class="tblmain">
          <tr><th colspan="8"><img src="gfx/hdr_guestbook.gif" alt="guestbook" width="150" height="16" border="0" /></th></tr>
          <tr>
            <td align="center" style="padding: 5px 20px 5px 20px">
<?php if ($sigcount>0) { ?>
              <table width="640" cellspacing="0" cellpadding="3" border="0">
                <tr>
                  <td class="sideltop"><?php if ($pagecount>1) {echo "Page $showpage of $pagecount";} else {echo " ";} ?></td>
                  <td class="sidemtop"><input type="submit" name="subsign" value="Sign The Guestbook" class="gadbutton" /></td>
                  <td class="sidertop"><?php if ($pagecount>1) {echo 'Go to page <select name="intpage" class="blubutton" onChange="changepage()">'.$pageselhtml.'</select>';} else {echo " ";} ?></td>
                </tr>
              </table>
<?php } ?>
              <table cellspacing="1" cellpadding="3" class="tbl" border="1">
<?php if ($sigcount==0) { ?>
                <tr>
                  <td class="cell0">
                    <table cellspacing="0" cellpadding="1" width="100%">
                      <tr><td class="pltextc"><?=$vericode?> <?=time()?> The guestbook is empty, why not be the first to sign it?<br /><br /><input type="submit" name="subsign" value="Sign The Guestbook" class="blubutton" /></td></tr>
                    </table>
                  </td>
                </tr>
<?php } else {echo $gbhtml;} ?>
              </table>
<?php if ($sigcount>0) { ?>
              <table width="640" cellspacing="0" cellpadding="0" border="1">
                <tr>
                  <td class="sidelbot"><?php if ($pagecount>1) {if ($showpage>1) {echo '<a href="viewgb.php?page=1"><<< Page 1</a>';} else {echo ' ';}} else {echo ' ';} ?></td>
                  <td class="sidembot">Total Signatures: <?=$sigcount?></td>
                  <td class="siderbot"><?php if ($pagecount>1) {if ($showpage<$pagecount) {echo '<a href="viewgb.php?page='.($showpage+1).'">Page '.($showpage+1).' >>></a>';} else {echo ' ';}} else {echo ' ';} ?></td>
                </tr>
              </table>
<?php } ?>

 

If anyone is able to shed some light on this I'd be most grateful. It's probably somethign really silly I've missed due to lack of sleep!

 

This is where the scripts are living at the moment:

http://pictureinthesky.net/newamiga/

 

The above script extracts are from the guestbook. I know some styles are being references that don't exist, they're not the ones I'm worried about - it's the ones that do exist and aren't being used.

[dbrimlow]

Well, one thing I see right off the bat is the improper link style order. It should ALWAYS be:

 

a:link

a:visited

a:hover

a:active.

 

When you start jumbling them up for different elements it throws a lot off.

[ToonMariner]

???

 

never heard of such requirements in css - css doesn't care where you put things - the browser will simply apply the last rule that would apply to the current element.

[dbrimlow]

Ahhh, TM, you never got nailed by this one yet, I see.

 

I've been destroyed by this in the past (particularly in IE). I spent hours and hours trying to find why my links within nested lists were defaulting to the visited color and not changing on hover. Everything looked right in the css and the markup ... there were no bugs and it was validating just fine.

 

So I googled links in css and found the old standby w3c tutorial and figured why not. I was amazed when I discovered that the order mattered. Below is a link to the tutorial, AND the relevant portion in question - note the use of "MUST":

 

http://www.w3schools.com/css/css_pseudo_classes.asp

Anchor Pseudo-classes

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

 

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.

 

Dave

[ToonMariner]

I think by chance I have always applied :hover last anyway - but still that is very useful to know...

[AndyB]

The easy way to remember the order in which they're specified is LoVe HAte

[dbrimlow]

The easy way to remember the order in which they're specified is LoVe HAte

 

That will be easy to remember ... exactly like my relationship with css!