CSS Colour Query

James_Hibbard · December 5, 2012, 10:23pm

Hi,

These rules target a element with the class of “four” and don’t have anything to do with styling the link.

p.four {color:#000000; font-size: 15px;font-weight:bold;}

The following rule will hit any <a> tag that doesn’t have more specific styling applied to it.

a:link {color:#000000;}

You only really need to do this once in your style sheet.

The way to style your link is like this

a.four:link{color:#000000;}

Edit: Paul seems to have beaten me to it!

PaulOB · December 5, 2012, 10:33pm

Sorry I saw you answered and thought you had just missed that last one

certificates · December 6, 2012, 5:42am

So are you both saying that I need a seperate line in the CSS because I thought that I had already done what you are sugeesting

p.four {color:#000000; font-size: 15px;font-weight:bold;}a:link {color:#000000;} my highlighting for this forum ?

Should the stylesheet be like this ?

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; font-size: 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;}
a.four:link{color:#000000;}

because that doesn’t work

I just can’t grasp this

Antony

James_Hibbard · December 6, 2012, 9:43am

Hi there,

No problem. Maybe if we take a step back and look at some of the underlying principles, that will help.

Imagine this:
Some interesting content
If you want to change the style of this, you would do p{color:red};
This will target every p element in the whole document.

Now suppose we have three elements and you just want to target the middle one. To do that you give it a class:

<p>Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>

p{color:red;} will change them all red
Then you would do .special{color:yellow;}
That will get the one in the middle with the class applied to it.

Now imagine this:

<p>Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>

If you use .special{color:yellow;} you will target the text in both the <div> and the 
If that’s not what you want to do, then you can get even more specific:

p{color:red;}
p.special{color:yellow;}
div.special{color:green;}

Now imagine you have this:

<p><a href="#">A link</a> Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>

What colour do you think the link will be?
That’s right, blue. It will inherit the default link colour, as there is currently no rule saying otherwise.

If we want to style it, we could of course go: a{color:gray} and that would hit all a tags in the document. Job done!

Now imagine this:

<p><a href="#">A link</a> Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
<a href="#">Another link</a>

If we want to target only the link in the p tag, we could do p a{color:yellow};

Last example:

<p><a href="#">A link</a>Some interesting content</p>
<p class="special"><a href="#">Link three</a>Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
<a href="#">Another link</a>

How can we target only the link in the tag with the class of “special”?
p.special a{color: cyan}

Hopefully you get the idea of drilling down to become more specific.

Here’s the whole example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <style>
      p{color:red;}
      p.special{color:yellow;}
      div.special{color:green;}
      a{color:gray}
      p.special a{color:cyan}
    </style>
  </head>
  
  <body>
    <p><a href="#">A link</a> Some interesting content</p>
    <p class="special"><a href="#">Link three</a> Some more interesting content</p>
    <p>Some even more interesting content</p>
    <div class="special">Nothing special here</div>
    <a href="#">Another link</a>
  </body>
</html>

So, to answer your question, this is a commented version of your style sheet.

/* Targets all h1 tags */
h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}

/* Targets all h2 tags */
h2 {color:#cd0000; font-size: 15px; text-decoration:underline;font-weight:bold;}

/* Targets all p tags with a class of two */
p.two {color:#cd0000; font-size: 15px;font-weight:bold;}

/* Targets all unvisited anchor tags (as above) */
a:link {color:#cd0000;} 

/* Targets all p tags with a class of three */
p.three {color:#000080; text-decoration:none;} 

/* Targets all unvisited anchor tags (overwrites the previous rule) */
a:link {color:#000080;}

/* Targets all p tags with a class of four*/
p.four {color:#000000; font-size: 15px;font-weight:bold;} 

/* Targets all unvisited anchor tags with a class of four */
a.four:link{color:#000000;}

If all of this doesn’t help you solve your problem, please just post a link to the page in question.
Tell me what you would like and how it is not working.

I’m sure we’ll get to the bottom of this soon!

PaulOB · December 6, 2012, 10:01am

Pullo has given a great explanation above which should put you on the right track.

I will make one observation though and it seems to me that you are thinking that this is one rule:


p.four {color:#000000; font-size: 15px;font-weight:bold;}a:link {color:#000000;}

It’s not. Its two separate rules and just because you put it on one line it makes no difference as it is still just this:


p.four {color:#000000; font-size: 15px;font-weight:bold;}

a:link {color:#000000;}

To target a descendant of the p element you would use:


p.four a:link {color:#000000; font-size: 15px;font-weight:bold;}

Which would assume html like so:


<p class="four"><a href="#">Linky</a></p>

But don’t forget about the :visited rule as a:link only defines links that are not visited. You could just use p.four a{styles etc…} as that will style all states of the a element unless you have previously defined specific link and visited states in which case you would need to say.


p.four a:link,p.four a:visited {color:#000000; font-size: 15px;font-weight:bold;}

ronpat · December 6, 2012, 11:03am

Antony,

Along the same lines as Pullo’s and Paul’s observations, please note that there are two (2) a:link rules in your d5dstyle.css sheet. The second rule, a:link {color:000080;} will override the first rule; therefore, the first rule will never be applied.

Also, there is an order in which anchors must be coded for the states to function that you may not be aware of:
a:link
a:visited
a:hover
a:active

Skipping or mixing the order of the pseudo-classes can have unexpected results. There’s plenty of documentation around that explains how to code and color anchors.

Finally, I looked at your censusentries.php page. You are correct when you said that the HTML on that page has no validation errors, BUT, that is misleading. The page that WE SEE also includes the menu.php include file and the HTML in the menu.php is incorrectly formed. ALL of the errors indicated by the validator are from the menu.php code. Most are duplicate id’s, BUT THE REST ARE STRAY TAGS. Those STRAY TAGS are the major cause of your menu problems; NOT THE CSS. I did not touch the CSS. I just matched the tags. Same thing I did with your previous page… cleaned up the tags in the include file. All the css in the world cannot make up for BROKEN HTML. Period.

Please look at the ENG & WALES menu items and see if the nested lists are working correctly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Certificates in 5 Days C5D Census Entries</title>
    <link rel="stylesheet" href="http://www.c5d.co.uk/clubscreen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5dstyle.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.c5d.co.uk/c5ddropdownmenu.css" type="text/css" media="screen" />
    <link rel='stylesheet' id='easy-fancybox.css-css' href='http://www.c5d.co.uk/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4' type='text/css' media='screen' />
    <script src="http://www.c5d.co.uk/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
    <script src="http://www.c5d.co.uk/MenuMatic_0.68.3.js" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>

<div id="wrapper">
    <div id="container" class="container">

<!-- BEGIN menu.php INCLUDE -->
        <div id="header" class="span-24" style="height:180px;">
            <div class="span-12">
                <img src="http://www.c5d.co.uk/c5dbackground.png" alt="my address" height="175" width="650" />
            </div>
            <div class="span-12 last" style="padding-top:30px; text-align:right;"></div>
        </div>
        <div class="span-24">
            <div id="navcontainer">
                <ul id="nav" class="menu">
                    <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="http://www.c5d.co.uk/homepage.php"><img src="http://www.c5d.co.uk/home.gif" alt ="home" /></a></li>
                    <li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">Eng &amp; Wales</a>
                        <ul class="sub-menu">
                            <li id="menu-item-64000" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">England&nbsp;&amp;&nbsp;Wales&nbsp;Certificates</a>
                                <ul>
                                    <li id="dummy1"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                                    <li id="dummy2"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                                    <li id="dummy3"><a href="http://www.c5d.co.uk/pre1858.php">Pre 1858 Probates</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://www.c5d.co.uk/groups.php">Family&nbsp;Groups</a></li>
                            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://www.c5d.co.uk/research.php">Research&nbsp;Service</a></li>
                            <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://www.c5d.co.uk/ninthfield.php">Large&nbsp;Orders</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://www.c5d.co.uk/course.php">Scotland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://www.c5d.co.uk/scotland.php">Scottish&nbsp;Certificates</a></li>
                            <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="https://secure.jotformeu.com/form/20562318766356">Scottish&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://www.c5d.co.uk/northernireland.php">N.Ireland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://www.c5d.co.uk/northernireland.php">Northern&nbsp;Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="https://secure.jotformeu.com/form/20562335218347">Northern&nbsp;Ireland&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://www.c5d.co.uk/ro1.php">Eire</a>
                        <ul class="sub-menu">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.c5d.co.uk/roi.php">Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://form.jotformeu.com/form/20560737900349">Irish&nbsp;Certificate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="dummy7"><a href="http://www.c5d.co.uk/parishrecords.php">P R Es</a>
                        <ul class="sub-menu">
                            <li id="dummy5"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                            <li id="dummy6"><a href="https://secure.jotformeu.com/form/20563263008345">Parish&nbsp;Register&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-222 current_page_item menu-item-227"><a href="http://www.c5d.co.uk/censusentries.php">Censuses</a>
                        <ul class="sub-menu">
                            <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"><a href="http://www.c5d.co.uk/censusentries.php">Census&nbsp;Entry&nbsp;Copies</a></li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20563312173343">Census&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/sterlingpayments.php">Payments in &#163;</a>
                        <ul class="sub-menu">
                            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://www.c5d.co.uk/sterlingpayments.php">Make&nbsp;Payments&nbsp;in&nbsp;&#163;</a></li>
                        <li id="menu-item-42000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20562220135338">Order Form</a></li></ul>
                    </li>
                    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://www.c5d.co.uk/nzcerts.php">NZ</a>
                        <ul class="sub-menu">
                            <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">New&nbsp;Zealand&nbsp;Certificates</a></li>
                            <li id="menu-item-122000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">Order Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/probates.php">Probates</a>
                        <ul class="sub-menu">
                            <li id="dummy8"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-420000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.c5d.co.uk/pre1858.php">Pre&nbsp;1858&nbsp;Probates</a></li>
                    <li id="menu-item-4200000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotform.com/form/20393244360"> Probate&nbsp;Order&nbsp;Form</a></li>
                </ul>
            </div>
        </div>
<!-- END menu.php INCLUDE -->
<a href="http://form.jotformeu.com/form/20563312173343" class="three">Secure Order Form Now Available</a>
<h1>A Personal Service not just a Certificate Supplier.</h1>
<br />
<br /><center><div align="center"><a href="http://www.jdoqocy.com/click-5433512-10520381" target="top">
<img src="http://www.awltovhc.com/image-5433512-10520381" width="264" height="60" alt="234x60 I am, your Nan" border="0" /></a>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--START MERCHANT:merchant name Find My Past from affiliatewindow.com.-->
            <a href="http://www.awin1.com/cread.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588"><img src="http://www.awin1.com/cshow.php?s=265538&amp;v=2114&amp;q=126749&amp;r=127588" width="264" height="60" alt="264x60" border="0" /></a>
            <!--END MERCHANT:merchant name Find My Past from affiliatewindow.com--></div></center>
            <br />
            <br />Censuses taken in England
&amp; Wales for the years 1841-1911 are generally all available on line
now although mostly on a Pay per View Basis.
<br />
<br />If you do not have access to the censuses, I
can provide copies of any entry at a fee of &#163;1 per name, plus &#163;1.35 for
postage &amp; packing.
Please complete this order form. <a href="http://form.jotformeu.com/form/20563312173343" class="three">Order Censuses</a>
<br />
<br />
<br />If you would rather not provide me with your card details, you can click on this <a href="http://form.jotformeu.com/form/20561782479361" class="three">Order Form</a> to go directly to the Secure Paypal Payment Page
<br />
<br />
For further details please email me at: <img src="http://www.c5d.co.uk/address.png" width="340" border="0" alt="e mail address" />
<br />
<br />
The dates of the censuses are
<p class="two">UK CENSUS DATES</p>
<br />
<br />1841 - Jun 6/7
1851 - Mar 30/31. 1861 - Apr 7/8. 1871 - Apr 2/3. 1881 - Apr 3/4. 1891 - Apr
5/6. 1901 - Mar 31/Apr 1. 1911 - Apr 1/2 <p class="copy">&copy;C5D-Certificates</p>
</div>
</div>
</body>
</html>

You can copy and paste the corrected menu code to your menu.php file, BUT BE AWARE that I changed the duplicate id names to bogus names. You can find and correct them if they matter. They are easy to spot.

certificates · December 6, 2012, 5:00pm

This has now worked fine thanks.

I have saved the simply laid out instructions for reference.

Now the next bit is to style the table which the html in in :;-))

You’ve all been a great help !
Antony

certificates · December 6, 2012, 6:53pm

Just a ouple of final queries if I may. I have sorted the table but there is an anomaly.

When I use this CSS p.four a:link,p.four a:visited {color:#000000; font-size: 15px;font-weight:bold;} and this in the html the p send the links down a line.

See http://www.c5d.co.uk/groups.php. The table is at the bottom.

Also why does this not center the date

p.copy:after
{
content:" 1999-2012"; text-align:center;
}

James_Hibbard · December 6, 2012, 7:49pm

Hi there,

Glad to hear you’re getting on.

This issue is not caused by the above CSS, rather by line 20 of the file clubscreen.css which reads:

table, td, th {vertical-align:middle;}

Remove this and everything will align.

James_Hibbard · December 6, 2012, 7:52pm

Probably because you need to apply it to p.copy, not p.copy:after (although I could be wrong).

certificates · December 6, 2012, 7:56pm

Thanks that’s great

ronpat · December 6, 2012, 8:16pm

Out of curiosity, how do you write your code? Do you use a text editor? If so, which one? Also, what browser and version do you use?

The menu.php code is a little mixed up again. Please copy and paste exactly this code into your menu.php file, including the space at the beginning of the first line and and the staircase of closing tags at the end.


        <div id="header" class="span-24" style="height:180px;">
            <div class="span-12">
                <img src="http://www.c5d.co.uk/c5dbackground.png" alt="my address" height="175" width="650" />
            </div>
            <div class="span-12 last" style="padding-top:30px; text-align:right;"></div>
        </div>
        <div class="span-24">
            <div id="navcontainer">
                <ul id="nav" class="menu">
                    <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="http://www.c5d.co.uk/homepage.php"><img src="http://www.c5d.co.uk/home.gif" alt ="home" /></a></li>
                    <li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">Eng &amp; Wales</a>
                        <ul class="sub-menu">
                            <li id="menu-item-64000" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78"><a href="http://www.c5d.co.uk/homepage.php">England&nbsp;&amp;&nbsp;Wales&nbsp;Certificates</a>
                                <ul>
                                    <li id="menu-item-89"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                                    <li id="menu-item-88"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                                    <li id="menu-item-87"><a href="http://www.c5d.co.uk/pre1858.php">Pre 1858 Probates</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://www.c5d.co.uk/groups.php">Family&nbsp;Groups</a></li>
                            <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://www.c5d.co.uk/research.php">Research&nbsp;Service</a></li>
                            <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://www.c5d.co.uk/ninthfield.php">Large&nbsp;Orders</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://www.c5d.co.uk/course.php">Scotland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://www.c5d.co.uk/scotland.php">Scottish&nbsp;Certificates</a></li>
                            <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="https://secure.jotformeu.com/form/20562318766356">Scottish&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://www.c5d.co.uk/northernireland.php">N.Ireland</a>
                        <ul class="sub-menu">
                            <li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://www.c5d.co.uk/northernireland.php">Northern&nbsp;Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="https://secure.jotformeu.com/form/20562335218347">Northern&nbsp;Ireland&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://www.c5d.co.uk/ro1.php">Eire</a>
                        <ul class="sub-menu">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://www.c5d.co.uk/roi.php">Irish&nbsp;Certificates</a></li>
                            <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://form.jotformeu.com/form/20560737900349">Irish&nbsp;Certificate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="dummy7"><a href="http://www.c5d.co.uk/parishrecords.php">P R Es</a>
                        <ul class="sub-menu">
                            <li id="menu-item-86"><a href="http://www.c5d.co.uk/parishrecords.php">Parish&nbsp;Register&nbsp;Entries</a></li>
                            <li id="menu-item-85"><a href="https://secure.jotformeu.com/form/20563263008345">Parish&nbsp;Register&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-222 current_page_item menu-item-227"><a href="http://www.c5d.co.uk/censusentries.php">Censuses</a>
                        <ul class="sub-menu">
                            <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"><a href="http://www.c5d.co.uk/censusentries.php">Census&nbsp;Entry&nbsp;Copies</a></li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20563312173343">Census&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/sterlingpayments.php">Payments in &#163;</a>
                        <ul class="sub-menu">
                            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://www.c5d.co.uk/sterlingpayments.php">Make&nbsp;Payments&nbsp;in&nbsp;&#163;</a></li>
                        <li id="menu-item-42000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotformeu.com/form/20562220135338">Order Form</a></li></ul>
                    </li>
                    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://www.c5d.co.uk/nzcerts.php">NZ</a>
                        <ul class="sub-menu">
                            <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">New&nbsp;Zealand&nbsp;Certificates</a></li>
                            <li id="menu-item-122000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.c5d.co.uk/nzcerts.php">Order Form</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-61000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.c5d.co.uk/probates.php">Probates</a>
                        <ul class="sub-menu">
                            <li id="84"><a href="http://www.c5d.co.uk/probates.php">Probates,&nbsp;Wills&nbsp;&amp;&nbsp;Admons</a></li>
                            <li id="menu-item-420000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.c5d.co.uk/pre1858.php">Pre&nbsp;1858&nbsp;Probates</a></li>
                            <li id="menu-item-4200000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://secure.jotform.com/form/20393244360"> Probate&nbsp;Order&nbsp;Form</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

Will look at the rest of the HTML in a few minutes.

certificates · December 6, 2012, 8:27pm

I have done that. I use coffee cup as the editor and use windows 7

I couldn’t do it exactly as you said first time because it gave me an error. There was an additional </ul>

Thanks for checking again though

certificates · December 6, 2012, 8:28pm

Yes and no.

If I remove the after from the css it centres but doesn’t include the 1999-2012

Thanks

James_Hibbard · December 6, 2012, 8:29pm

Any reason you’re not doing it in PHP like I suggested?

certificates · December 6, 2012, 8:31pm

Because there are about 450 pages on my site and to use PHP would me that I have to change all of them

If I can use the style sheet to which they are all linked, it would be so much easier

James_Hibbard · December 6, 2012, 8:34pm

Okay, totally fair comment.
Add the :after back and I’ll have a look.

certificates · December 6, 2012, 8:40pm

OK I have done that.

It has brought the dates back but aligned left

Thanks

ronpat · December 6, 2012, 8:42pm

In the menu.php file, one error has been introduced.

Near the bottom of the file, a list item has a numerical-only id. The line begins:


                            <li id="84"><a href="http://www.c5d.co.uk/probates.php">Probates, .....

Change the id name to something that begins with an alpha character. Most of your other ids being with “menu-item-”. Maybe that would work if it isn’t used elsewhere.

certificates · December 6, 2012, 8:46pm

OK, I have done that

Thanks