Making Progress but need a bit of help with a table

**certificates** · Dec 7, 2012 06:18

You have helped me loads and I managed to progress a bit with positoning of images etc, but have a problem with this table.

What I want is the left hand column to be in bold. The links column work fine, ie are normally black but turn white on hovering

What am I missing please ?

Antony

CSS

table.otherservices {font-weight:bold;color: #000000;}
table.otherservices a {color: #000000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }
table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }

HTML

<table class="otherservices">
<tr>
<td>Family Group Orders

/td>
<td><a href="http://www.c5d.co.uk/groups.php">Click here</a></td>
</tr>
<tr>
<td>Payments in Pounds

/td>
<td><a href="http://www.c5d.co.uk/sterlingpayments.php">Click here</a></td>
</tr>
<tr>
<td>Parish Register Entries

/td>
<td><a href="http://www.c5d.co.uk/parishrecords.php">Click here</a></td>
</tr>
<tr>
<td>Census Service

/td>
<td><a href="http://www.c5d.co.uk/censusentries.php">Click here</a></td>
</tr>

**RyanKing1809** · Dec 7, 2012 06:36

I think the styling is best applied directly to the <td> tags.

Code:

<table class="otherservices">
            <tr>
                <td class="bold">Family Group Orders:</td>
                <td><a href="http://www.c5d.co.uk/groups.php">Click here</a></td>
            </tr>
            <tr>
                <td class="bold">Payments in Pounds:</td>
                <td><a href="http://www.c5d.co.uk/sterlingpayments.php">Click here</a></td>
            </tr>
            <tr>
                <td class="bold">Parish Register Entries:</td>
                <td><a href="http://www.c5d.co.uk/parishrecords.php">Click here</a></td>
            </tr>
            <tr>
                <td class="bold">Census Service:</td>
                <td><a href="http://www.c5d.co.uk/censusentries.php">Click here</a></td>
            </tr>
</table>

Code:

.bold{font-weight:bold}

**certificates** · Dec 7, 2012 08:12

Thanks for the suggestion. I guess your experience gives your thought processes more width than mine.

However is there any reason why the CSS has to have it twice; IT only seems to work like this.

table.otherservices a {color: #000000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }
table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; .bold{font-weight:bold}

.bold{font-weight:bold}

It seems to meas though I am specifying bold twice

**ralph.m** · Dec 7, 2012 08:28

It isn't really clear what you are trying to achieve in your first post. Do you want everything bold? In that case, this is enough:

Code:

table.otherservices {font-weight: bold; }

You only need to mention the font weight there.

Is there a concern with the hover color of white? Because you've specified that in the CSS ...

**certificates** · Dec 7, 2012 08:43

what I am trying to do is to have bothe halves of this table in bold text and when you hover over the "click here" for that to turn white

Family Group Orders: Click here

Payments in Pounds: Click here

Parish Register Entries: Click here

Census Service: Click here

It does seem as though the CSS is needed as below

table.otherservices a {color: #000000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }
table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; font-weight: bold; .bold{font-weight:bold}

.bold{font-weight:bold}

Without the additional .bold{font-weight:bold}
it stays black all the time and without the additional hover specification it doesn't change colour

**ralph.m** · Dec 7, 2012 08:48

You can simplify your CSS to this:

Code:

.otherservices {font-weight:bold;color: #000000;}
.otherservices a {color: #000; text-decoration: none; font-style:italic; font-family:"New Century Schoolbook", Times, serif;}
.otherservices a:hover { color: #ffffff;}

and keep your HTML as it originally was.

I now see that your original CSS had an errant curly brace, which could cause problems:

Code:

table.otherservices a:hover { color: #ffffff; }text-decoration: none; font-style:italic; font-family:"New Century Schoolbook", Times, serif; font-weight: bold; }

**certificates** · Dec 7, 2012 09:04

I'm afraid that this just leaves the whole table not bold, though the links turn white

If I go back to styling the TD by using bold and adding .bold{font-weight:bold} then the left column turns bold but the link doesn't

This is all of the CSS

Code CSS:

body {background: #708090; font-weight: bold; font-style: italic; font-size: 15px; font-family: "New Century Schoolbook", Times, serif;}
 
 
 
     h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
     h2 {color:#cd0000; font-size: 15px; text-decoration:underline;font-weight:bold;}
     p.two {color:#cd0000; margin-bottom:0;15px;font-weight:bold;}a:link {color:#cd0000;} 
     p.three {color:#000080; text-decoration:none;} a:link  {color:#000080;}
     p.four {color:#000000; font-size: 15px;font-weight:bold;} 
     p.four a:link,p.four a:visited {color:#000000; font-size: 15px;font-weight:bold;}
     p.C5D a:link,p.C5D a:visited {color:#cd0000; font-size: 15px;font-weight:bold;}
a:hover {
	color: #ffffff;  /* Colour of Links when hovering */
    text-decoration: none;
	}
 
/* NAVIGATION MENUS */ 
 
#pagemenucontainer {  /* controls poition of top right hand boxes */
	height: 36px;
    float: right;
    padding: 0;
    margin-top: 12px;
    background:#ffffff;
   	}
 
 
 
#pagemenu, #pagemenu ul { /* controls top right hand boxes */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
    background-color:#708090;}
 
#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
 
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	background-color:#000000;}
 
#pagemenu li a, #pagemenu li a:link {     /* controls top right hand boxes */ 
	color: #000000;
	display: block;
    margin: 0 0 0 6px;
	padding: 8px 16px ;
	text-decoration: none;
	text-transform: uppercase;
    font-weight: bold;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
    border: 0px solid; 
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
 
#pagemenu li a:hover, #pagemenu li a:active {
	color: #ffffff;
	display: block;
    margin: 0 0 0 6px;
	padding: 8px 16px ;
	text-decoration: none;
	text-transform: uppercase;
    font-weight: bold;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
    border: 0px solid; 
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
 
#pagemenu  li.current_page_item a {
    background: #FFFFFF;
	color: #ffff00;
    text-decoration: none;
    border: 2px solid #E2F5FB;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	}
 
#pagemenu li:hover, #pagemenu li.sfhover { 
	position: static;
	}
 
 
 
#navcontainer {                            /* controls top sub menu boxes known as navigation bar */ 
	height: 45px;
	display: block;
 
    background: #000000;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
   	}
 
#navcontainer .current-cat a {
	color:#000000;
	background:#708090;
	}
 
/* CONTENT */
 
 
#content {
	width: 700px;
	padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    color: #ffff00;
	}
 
pre { overflow: auto; 
	width: 460px;
	}
 
 
.post {
	margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #AFC9D4;
	}
 
.post_thumbnail {
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid #DBE3E8;
    margin: 0 10px 10px 0;
}
 
 
.post p {
	margin-bottom: 10px;
	}
 
.title {
	margin: 0 0 8px 0;
	padding: 0px;
	line-height: 24px;
	font-size: 24px;
	font-family: Arial, Helvetica, Sans-serif;
	color: #ffff00;
    font-weight: bold;
	display: none;
	}
 
 
.title a {
	text-decoration: none;
	color: #708090;
	}
 
.title a:hover {
	color: #289DB8;
	}
 
.pagetitle {
	margin-bottom: 20px;
	line-height: 22px;
	font-family: Arial, Verdana;
	text-decoration: underline;
    color: #ffff00;
}
 
 
.readmorecontent {
	text-align: right;
	}
 
a.readmore {
	padding: 4px 15px;
	background: #708090;
	color: #000000;
	text-decoration: none;
    font-size: 12px;
	}
 
a.readmore:hover {
	background-color: #708090;
    color: #000;
	}
 
 
.postdate {
	font-size: 13px;
	font-family: Arial, Helvetica, Sans-serif;
    font-style: italic;
    color: #ffff00;
	}
 
 
.postmeta {
	font-size: 11px;
	padding: 2px 4px;
	font-family: Arial, Verdana;
    color: #ffff00;
	}
 
.postdate img, .postmeta img {
	border: none;
	vertical-align: middle;
	margin:2px;
	}
 
.entry {
	text-align: justify;
	line-height: 20px;
	padding-top: 8px;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 14px;
	}
.navigation {
	padding: 10px 0;
	}
 
blockquote {
	overflow: hidden;
	padding-left: 9px;
	font-style: italic;
	color: #666;
	border-left: 3px solid #CADAE7;
	}
 
.post img {
	max-width: 680px;
	}
 
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
	}
 
p.copy{text-align:center;}
      p.copy:after{content:" 1999-2012";}
 
 
.otherservices {font-weight:bold;color: #000000;}
.otherservices a {color: #000; text-decoration: none; font-style:italic; font-family:"New Century Schoolbook", Times, serif;}
.otherservices a:hover { color: #ffffff;}
.bold{font-weight:bold}
 
img.center {   display: block;   margin-left: auto;   margin-right: auto; }
 
#advert1 {float:left; display:inline-block; background:#000; width:250px;}
 
#advert2 {float:right; display:inline-block; background:#000; width:250px;}
 
hr {color: #708090; background-color: #f708090;}
 
.buttonHolder{ text-align: center; }

**ralph.m** · Dec 7, 2012 09:07

Originally Posted by certificates

I'm afraid that this just leaves the whole table not bold

I tested that code in four browsers. What browser are you using?

**certificates** · Dec 7, 2012 09:12

I have tried IE9 Chrome & Firefox

**ralph.m** · Dec 7, 2012 09:18

With this code, the whole lot is bold in every browser I have, including IE9, Chrome, FF, Safari and Opera:

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>table</title>
	
<style media="all">
.otherservices {font-weight:bold;color: #000000;}
.otherservices a {color: #000; text-decoration: none; font-style:italic;font-family:"New Century Schoolbook", Times, serif; }
.otherservices a:hover { color: #ffffff;}
</style>
	
</head>

<body>

<table class="otherservices">
            <tr>
                <td>Family Group Orders:</td>
                <td><a href="http://www.c5d.co.uk/groups.php">Click here</a></td>
            </tr>
            <tr>
                <td>Payments in Pounds:</td>
                <td><a href="http://www.c5d.co.uk/sterlingpayments.php">Click here</a></td>
            </tr>
            <tr>
                <td>Parish Register Entries:</td>
                <td><a href="http://www.c5d.co.uk/parishrecords.php">Click here</a></td>
            </tr>
            <tr>
                <td>Census Service:</td>
                <td><a href="http://www.c5d.co.uk/censusentries.php">Click here</a></td>
            </tr>
</table>

</body>

</html>

**certificates** · Dec 7, 2012 09:24

Well it won't for me.

Would you look at this web page please ?

http://www.c5d.co.uk/groups.php

**ralph.m** · Dec 7, 2012 09:46

Heh heh, on clubscreen.css, line 19, you have

Code:

caption, th, td {
text-align: left;
font-weight: normal;
}

This overrides your bold rule.

**TechnoBear** · Dec 7, 2012 09:48

Firebug shows that the font-weight is coming from clubscreen.css, where you have

Code:

caption, th, td {text-align:left;font-weight:normal;}

Edit:

Ninja'd by Ralph - again.

However, you have bigger problems with your page than that. I normally browse with JS disabled, which means that your page is totally unusable. Even if I enable JS, your menu spills over from the nav bar into the content area.

c5d.png

**ralph.m** · Dec 7, 2012 09:51

Yes, I also meant to mention that the red on gray is very hard to read.

Originally Posted by TechnoBear

Ninja'd by Ralph - again.

**certificates** · Dec 7, 2012 10:10

I have now renamed that CSS Sheet c5dscreen.css.

I have removed all references to the table as far as I can see.

The probates bit doesn't seem to stick out in my computer using IE C & FF

**certificates** · Dec 7, 2012 10:20

I'm sorry, I didn't spot that the caption you pointed out was in that sheet twice.

I have now removed the second one and the CSS works fine. Thanks very much for your efforts. I do appreciate them

I'm learning this lsowly, but it can prove troublesome at time

If you spot anything else in that sheet that is unnecesary, please point it out

Thanks Again

Antony

**ralph.m** · Dec 7, 2012 19:48

Cool, glad it's sorted. If you haven't already, check out the dev tools in your browser (use Firebug for Firefox, or the nature dev tools in Chrome, for example). You can highlight each element and see what styles are applying to it, including duplicates etc. Very handy. (I couldn't live without them, indeed.)

User Tag List

Thread: Making Progress but need a bit of help with a table

Thread Tools

Display

Making Progress but need a bit of help with a table

Bookmarks

Bookmarks

Posting Permissions