n00b CSS problem:changing colour of mailto link changes navbar colour?

[Fiery251]

I'm using DW 8. Building a site from a template, it consists of around 10 pages.

On the "Contact Us" page, I have phone and fax contact numbers and an email address which have tried making the link a "mailto:" in the property inspector. However, as soon as I do this, the black text, verdana font size 10 bold that I have the email address as, changes to white text which is not handy as its on a white background!!!.

I'm thinking this might be connected with the style sheet as the text in my Nav bar is white. However, the navbar text is "Style1" and the email link text is showing in the property inspector as "none" for style. If I change it to another style, anything apart from the same style as the white text in the nav bar, it still does the same, changes to white text on a white background.
I'm just learning about CSS so this has got me stuck now.

I tried "New CSS rule" , "In this document only" and changed the colour of the highlighted email link to black, but this changed the nav bar text to black as well, which I kinda expected.

Firstly, is there any way to fix this by editing something in the style sheet?. Can you seperate certain elements on the same page from the style sheet so they are not affected by changing font size, colour etc?.

Secondly, is there a way to add a different style sheet or something along those lines, to one particular page of a site, so the other pages obey the rules of the main style.css but one particular page follows a different set of rules?.

After I have worked out how to overcome this problem, I would like to have the email link have a different colour for hover and visited as well as change colour while you roll over it. But just now this thing where its changing all the text in my nav bar is driving me nutz!!!.

I can post details of the style sheet or any other of the page code if needed.

Thank you in advance for any help.

[Paul Komski]

There are at least four ways of referencing CSS: global, @import, page and in-line are the most common with each succeeding one taking preference over the former as appropriate and as the various elements cascade.

The mailto link is just one of the various "A" tag elements and is no different than other text-based normal html or anchor links (A, A:link, A:visited and A:active). Such A values are typically set globally or per page but a common customisation is to define them under a unique id for a DIV or TABLE element.

Let us say that all the links you want to customise in one particular way in one area of a page are all contained in a DIV container with an ID called say linkbar then the DIV tag pair would read <DIV id="linkbar"> and </DIV> and the corresponding CSS for the urls in that specified container area could be:
#linkbar a {
background-color: yellow;
color: black;
}
#linkbar a:visited {
background-color: white;
color: red;
}

#linkbar a:hover {
background-color: yellow;
color: red;
}

You could override all other elements with an in line format:
<a href="mailto:name@example.com"><span
style="color: rgb(255, 255, 255); background-color: rgb(255, 0, 0);">name@example.com</span></a>

Or you could define that individual A tag (and any others you want so formatted) with a class id and give the class id the CSS values that you desire.

The CSS might read

.greenit {
color:#669900;
background-color: #ffffff;
}

And the elements that you want green on white would be given that class id

<a class="greenit" href="mailto:name@example.com">name@example.com</a>

Many ways to skin cats and I'm moving this to the programming forum.

[Fiery251]

Thanks for the reply, appreciate it.

To be honest, I'm still confused.

Best thing perhaps, would probably be for me to upload the website and you can take a look at the code within.

I've put it up in my public_html section on my hosting. It can be viewed by clicking below and the clicking on the "GWLogic" folder:-

www.gwlogic.com

The email address that I'm having problems with is the one on the right of the page, in the blue bar at the bottom. Changing the properties of it within DW causes the text you can see in white in the navbar to change as I already mentioned.

On the "Contact Us" page, I somehow managed to get the email address below the phone numbers to change ok and after looking at the code in split mode in DW, I am slowly sort of able to understand how, but not quite!!!.

If you click on the "Legal Services" link in the nav bar, on that page, below the black text in the center there are links to other pages describing each legal service. As you can see, I'm also having the same problem with them. You cant see them as they are white, trying to change them to black causes the same problem as the email address change - the nav bar also changes to black. If you hover your mouse around that area you will see the links.

I would appreciate it if anyone gets the time, if they could tell me what I need to add to my code within DW to get this working properly and perhaps explain how and why so I can do it properly the next time!!!.

To begin with, I'm happy with just getting the email address to become a mailto link in black text without changing the nav bar colour and text and also the links on the "Legal Services" page to do the same, but at a later date I would like to be able to have the links in the services page exhibit changes as far as colour goes for hover, visited etc so they become more obvious as links to any site visitors.

But just now I would be over the moon if they all could be just visible on the page!!!.

Many thanks in advance for any advice.

Regards,

Gary.

[Paul Komski]

a:active { font-family: verdana; font-size: 11px; color: #000000}
a:link { font-family: verdana; font-size: 11px; color: #FFFFFF}
a:visited { font-family: verdana; font-size: 11px; color: #FFFFFF}

The links in white text are taking the value from color: #FFFFFF; in the style.css file as outlined above.

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
.style8 {color: #3B3535}
.style9 {color: #000000; font-size: 10px;}
.style10 {color: #000000; font-size: 10px; font-weight: bold;}

The email link is showing with no text-decoration (underline) because of the css at the top of its page as above and all black because the text is enclosed in a span tag with a class id called style10 eg <span class="style10"> and because that class id is given as .style10 {color: #000000; font-size: 10px; font-weight: bold; } at the top of that page included in the code above. This element being inline will override all other css declarations that you would expect to format the link the way you might have anticipated.

I note that on another page the same style10 class id has a different css format viz: .style10 {font-size: 10px} and this is bad and confusing practice. Better to put all the various style elements on your main style.css file and you will get a more consistent effect throughout the web as well as making the editing and debugging of the code much easier. Only customise individual pages for special reasons and the same goes for inline styles such as the span and class id for the email link.

When defining colors always always define a background-color for the same tag at the same time. To not do so is deprecated when validating code to w3c standards. It also has the benefit of helping to show up exactly what errors are what. Setting a color or background-color temporarily to some bizarre color can help identify what is going on. Note that color is always spelt the American way for css and other html.

You can publish real email links if you like but this leaves them open to being harvested easily by spambots. Better to create a graphic of the email address and then munge its url link with a javascript or similar.

[Paul Komski]

Suggest you remove all the individual page elements in the head area and then use the CSS below as your single style.css file. Then edit just that file to your liking and amend any inline features to suit you.
a:active { font-family: verdana; font-size: 11px; color: #FF0000; background-colour: #33CC00;}
a:link { font-family: verdana; font-size: 11px; color: #000000; background-colour: #FFFFFF;}
a:visited { font-family: verdana; font-size: 11px; color: #993399; background-colour: #FFFFFF;}
a:hover { font-family: verdana; font-size: 11px; color: #993399; background-colour: #FFFFFF; text-decoration: none;}
body { font-family: verdana; font-size: 11px;}
li { font-family: verdana; font-size: 11px;}
ol { font-family: verdana; font-size: 11px;}
table { font-family: verdana; font-size: 11px;}
td { font-size: 9px; color: #433636; background-color: white;}

.style1 {color: #FFFFFF; background-colour: #000000;}
.style2 {color: #FFFDFF; background-colour: #000000;}
.style8 {color: #3B3535; background-colour: #000000;}
.style9 {color: #000000; background-colour: #FFFFFF; font-size: 10px;}
.style10 {color: #000000; background-colour: #FFFFFF; font-size: 10px; font-weight: bold;}
.style11 {font-size: 10px}

The body, li, ol and table CSS are probably redundant just at the moment since the body values are identical and should be inherited by them unless the browser defaults to something else. But no harm to leave them as is.