Well I do like the fact that you have moved to a pure CSS based layout over tables, semantically correct and a definatly an advancement in your skill set.
Coding ~
However there a few coding niggles starting with, what the hell is this:
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
I know you know how to fix that and why that is bad.
This one is new though:
<p class="style9">---------------------------------</p>
Refernace the above element and give it an id, that being ~
<p id="example" class="style9">Tel: 01444 248931<br />
Fax: 01444 246392</p>
Then in you CSS give it a dashed bottom border to pull the same effect off then add some padding as you have removed a paragraph tag so ~
#example{border-bottom:1px dashed;padding-bottom:15px}
Same effect but to better coding practise and reduces your HTML code bloat.
Like the use of lists, right context.
However what is wrong with these?
1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <h2 align="center" class="style14">New Loco Named 'Institution of Railway Operators </h2>
3. <p><img src="media/IRO-naming.jpg" alt="" height="252" width="360" align="left" border="0">
4. <tr>
<td colspan="2" valign="top" bgcolor="white"><div id="txt"></div>
Your h1 does not need a class it can just be refernaced as
h1,.style1 in your css this reduces your bloat in your HTML file.
This section is an address ~
PO Box 128<br />
Burgess Hill<br />
RH15 0UZ<br />
United Kingdom</p>
So should go in what kind of a tag to be semanitically correct?
I'm not trying to be funny but I know you know the answers to most of those and I know you want to learn so questions are the better approach IMO.
Design wise
I would add the gap where the roll over navigation goes from the start as this helps to stop the whole design moving down on hover.
The main content area needs more padding at the top as the heading, which is semantically correct I may add, is too flush against the top of the page.
The tabs should have a different background colour and change to white on hover this helps the user know where they are within the site. However the only exception should be the page you are on that should be white to tell the user that this is the page they are on, however what should it not do, that it currently does?
Or you can do the opposite have the tab you are on a different background colour and the rest white, however to be truely effective the drop down navigation would then have to have the same background colour as well and not be white to give the illuision of a tab menu more effectivly.
I would say the roll over navigation also needs about 3-5pixels of padding both above and below the links to make it more readable.
In IE7 there is a massive drop at the bottom of the page you may want to fix.
To follow convention your name and the link to your site should be in the footer.
The main content looks to far over to me try moving it left say 30 pixels as it doesn't look like it aligns properly.
The latest news does not need to be centred
Again with the tabs in the roll over state at the bottom the current tab should be the same colour as the background, IE #FFF, so as to give the illusion of a tab menu.
Never have a link that says here, it does nothing for you in the search egnines nor for the site visitor. For example here you have this ~
Our site has had a recent makeover! If you want to submit photos for banner art for the regional site, click here and fill in the form.
What would be better from an SEO and useability point of view would be this ~
Our site has had a recent makeover!
You can now submit photos for banner art for the regional site.
I didn't check the concralization issues, ie redirecting www. and non
www., as I presume you have fixed them with the .htaccess file.
Hope it has helped and has given you some pointers.
Jaz
Key:
Purple ~ XHTML
Green ~ CSS
Brown ~ Example text