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
ralphm
December 7, 2012, 2:28pm
4
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
ralphm
December 7, 2012, 2:48pm
6
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; }
ralphm
December 7, 2012, 3:07pm
8
I tested that code in four browsers. What browser are you using?
I have tried IE9 Chrome & Firefox
ralphm
December 7, 2012, 3:18pm
10
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
ralphm
December 7, 2012, 3:46pm
12
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.
[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.
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]
ralphm
December 7, 2012, 3:51pm
14
Yes, I also meant to mention that the red on gray is very hard to read.
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
ralphm
December 8, 2012, 1:48am
17
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.)