Making Progress but need a bit of help with a table

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>

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


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


.bold{font-weight:bold}

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

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:

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 …

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

You can simplify your CSS to this:

.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:

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

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

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; }

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

I have tried IE9 Chrome & Firefox

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

<!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>

Well it won’t for me.

Would you look at this web page please ?

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

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

caption, th, td {
text-align: left;
[B]font-weight: normal;[/B]
}

This overrides your bold rule. :slight_smile:

[FONT=Verdana]Firebug shows that the font-weight is coming from clubscreen.css, where you have

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

Ninja’d by Ralph - again. :slight_smile:

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.

[/FONT]

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

:stuck_out_tongue:

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

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

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.)