Can someone plz take a look at my code and tell me why this is happening?

[RSVEcosse]

This is driving me absolutely NUTZ!!!!!

I'm creating a website hosting from a template for my Fire Service USAR ( Urban Search & Rescue ) team.

We are entering a team to compete in the World Rescue Orginisation 2008 Challenge in Cardiff, Wales in July this year.

I've used a free template to base the web site hosting on and it's coming along nicely, but there is one thing that is seriously driving me up the wall.

I've put it up on a spare domain I have just now at:-

www.sandy-shores.co.uk

The issues I am having with it is that the first time ever that you go to the url and browse it, the nav buttons on the left of the page are behaving strangely.

If you look at it, upon hovering your mouse over the nav buttons, they all initially change to white each time before clicking on them.

The text position within the nav buttons appears shifted out and not inline and the text font size also appears as it should not be.

However..........once all buttons have been clicked on and all pages visited, upon returning to the Home page, all font/text sizes are as they should be and they no longer are highlighted in white during "mouse over".

I'm coding this within Dreamweaver CS3 and within that, if I go to "Preview in IE" everything looks fine and works as it should.

It's only once I upload the files to my web space that this "white/wrong text size" issue appears, but only initially, once all nav buttons have been "clicked" on, they all work as they should.

Any ideas as to wht this is happening???!!!.

I'm getting driven up the wall trying to work this one out!!!

Any assistance is truly appreciated!!!

[WelshTom]

a.menu
{
text-decoration: none;
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
}
a.menu:hover
{
text-decoration: underline;
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
a.menu:visited
{
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #000000;
}

That's what's causing it

[RSVEcosse]

Thanks m8, I'm not sure what to change within that code to eliminate the problem though?.

Can you point me in the right direction?.

Ta.

[WelshTom]

Change it to:

a.menu
{
text-decoration: none;
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
}
a.menu:hover
{
color: #FFFFFF;
text-decoration: underline;
}
a.menu:visited
{
text-decoration: none;
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #000000;
}

[RSVEcosse]

Cool, thanks!!!

I will give that a go and report back mate!!!

[RSVEcosse]

Hmmm.

Just tried that change of code in the stylesheet, but it's not solved the problem for some unknown reason?. Not at my end anyway, although it could be that I need to clear my browser cache.

I will try it on my laptop that has not been used to view the web site hosting as it stands at the moment to eliminate the possibility of browser cache issues.

[DavidAllen]

Had a quick look and it looks ok to me.
Just a small point - when doing style sheets you should put the code for the a:hover after the a:visited due to some browsers quirks (I believe the order should be a:link a:visited a:hover a:active - LoVe HAte is how I remeber it). Don't know which browsers reqire that order but since finding it out I always do it in that order.

[RSVEcosse]

Originally Posted by DavidAllen

Had a quick look and it looks ok to me.

So the web site hosting is actually displaying ok for you without the faults I previously mentioned?.

Can you tell me what it looks like when you hover over the menu buttons mate?. No white text on hover?. Do each of the buttons have text that underlines during the hover and does the text look lined up correctly within each of the buttons?.

Thanks, and thanks for the pointers on the stylesheet ordering, will keep that in mind.

[DavidAllen]

They go white and underline on mouse over due to a.menu:hover{color:#FFFFFF;text-decoration:underline}. If you don't want them to go white - just change the #FFFFFF to whatever colour you want.
As for the lining up - they line up centrally OK - the vertical align isn't quite right, but fixing that will involve changing the stles in the inline code - the padding-top amounts on each div.
Btw it would be better to have button images as a background for each div rather than as a repeating background for the table cell. EDIT - just looked more at the images and i see the button images are all one picture rather than repeating images. Still better to have them as one image for each button because then you can use the same style of button elsewhere or add menu items easily without having to recreate the large image

[RSVEcosse]

Cheers David, appreciate your input and help on this, many thanks.

I've adjusted a few things in the style sheet for the site. It appears to be working as expected now, text is now lined up/adjusted within the buttons as far as I can see, if you could check that for me from your end that would be great.

I can't work out the text changing to white on the "hover" issue though, I've left it out for now until I work out the problem. If I have the hover attribute set to white text for some reason it only does it for the first time you visit the page and click on all the buttons. After that, the white hover text is replaced with black.

Not sure why it does that?.

I take onboard what you say about the nav buttons but it's a template I'm using so unless I knock up individual buttons for the nav and replace the one image there at the moment, I'm stuck with it.

[DavidAllen]

looks better now.
For the 'white' issue - see my reply earlier about the LoVeHAte. Think because the visited style is after the :hover it sort of overrides it. Change the order an it should work as far as i can see (athough it's set to black at the moment)

[RSVEcosse]

Thanks m8,

I've just updated the web site hosting with a bit more content.

Nav bar appears to be working fine now, although I will try and get the white "hover" text to work in a bit.