Hi, my first post here and I hope someone can help!!.

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.

Firstly, is there any way to fix this by editing something in the style sheet?.

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.

Only a biker understands why a dog sticks its head out of a car window!!.

HI

it would be useful to see the css - as your navigation uses white text it's most likely that the mailto it changing because as soon as it becomes a link it will be shown as white.

You could have a div tag wrapped around the navigation, then change the css so that only links within that div are white.

You can have several stylesheets and pick them up with different pages as needed.

Get the developers' toolbar for Firefox and you will be able to edit your css on the fly and see the effects, it's the best add-on I know <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

I've only just started out with CSS, so I will post what may be help explain further.

Here's the style.css file:-

<pre id=code><font face=courier size=2 id=code>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}
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-family: verdana;
font-size: 9px;
color: #433636;</font id=code></pre id=code>


And here's whats at the top of the "Contact Us" page that I am having hassles with the mailto problem:-


<pre id=code><font face=courier size=2 id=code>&lt;style type="text/css"&gt;
&lt;!--
.style1 {color: #FFFFFF}
.style2 {color: #FFFDFF}
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; }
--&gt;
&lt;/style&gt;</font id=code></pre id=code>

Only a biker understands why a dog sticks its head out of a car window!!.

Hi again,

the order that you declare your link selectors is important, they should be link, visited, hover, active

Also, you have a lot of duplicated declarations there, the body selector sets all the text to 11px verdana, so there is no need to respecify it, the body selector will work for everything that is within the body tags, that's how the cascade works.

You could just say . . .
<pre id=code><font face=courier size=2 id=code>
body { font-family: verdana; font-size: 11px}
a:link {color: #FFFFFF}
a:visited {color: #FFFFFF}
a:active {color: #000000}
td {font-size: 9px;
color: #433636;</font id=code></pre id=code>
You only need to say what you want different so all your links will keep the font, but now take <pre id=code><font face=courier size=2 id=code> color: #FFFFFF;</font id=code></pre id=code>

With fonts it's a good idea to give the browser a choice - you don't know that the client's machine will have the fonts you specify, so give it a choice, something like this is common . . .

<pre id=code><font face=courier size=2 id=code> body {font-face:Arial, Helvetica, sans-serif;</font id=code></pre id=code>

using that the browser can look for Arial if it doesn't find that it can use Helvetica and failing that fall back to sans-serif - it's useful to include Helvetica because that's what Macs use rather than Arial, if you don't do it the browser will resort to the default font whatever that is. DW has some standard lists of fonts like that built-in.

If you can post a link to your page I (and others too) can look at the code directly to play with them.

At the risk of everyone picking holes in my css here's 'one I did earlier' . . . a section off one of my pages, this affects only links within the div whose id is maincontent, that limits the effect of the selectors

<pre id=code><font face=courier size=2 id=code> #maincontent li {margin-top: 0.5em;}

#maincontent a:link {
font-family: arial, helvetica, sans-serif;
color: blue;
text-decoration: none;
}

#maincontent a:visited {
color: red;
text-decoration: none;
}

#maincontent a:hover {
color: blue;
font-weight: bold;
text-decoration: underline;
}
#maincontent a:active {
color: blue;
}
</font id=code></pre id=code>

Thanks for the reply, appreciate it.

To be honest, I'm still confused.

Best thing as you said, 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 "Pollock Somerville" 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.

<b>**EDIT**</b> Decided to use gif buttons for the links from the Legal Services page. So just that pesky email link to sort out in the right hand blue bar now!!!

Only a biker understands why a dog sticks its head out of a car window!!.

Edited by - fiery251 on 28 Jun 2007 15:34:39

Edited by - fiery251 on 28 Jun 2007 20:00:39

Gary,
thanks for posting that link - it's much easier to look at the page in context.

I can see what is happening. The a:link etc in your css are selecting all the links on the page. Try your css file like this:

<pre id=code><font face=courier size=2 id=code> body { font-family: verdana; font-size: 11px}
a:link { color: #FFFFFF}
a:visited { color: #FFFF00}
a:hover {color:green;}
active {colour:red;}

table { font-size: 11px}
td {
font-size: 9px;
color: #433636;
}</font id=code></pre id=code>

The colours are different but the rollovers work - you have to have the declarations in the order link, visited, hover, active. Otherwise they don't work. That will not solve the issue of the mailto link at the bottom right - you will need to have at least a div around either the menu or the mail link so that you can differentiate between them.

I have put together a quick and dirty demo page here alanchard.com/selectors it's not perfect as I hacked an existing page and didn't spend too long tidying it up <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> there is a little menu and a mailto link inside a div and to make it clear on the page I put a border on the div, then there is the same mailto link outside the div. That shows just how the css selectors work because one gets selected while the other does not.

The only difference between them is the css, the one inside the mainmenu div gets styled differently because of the selector

<pre id=code><font face=courier size=2 id=code> #mainmenu a:link {
font-size: 120%;
font-weight: bold;
color: green;
letter-spacing: 0.1em;
}</font id=code></pre id=code>

that picks up the links within the div mainmenu - Ah you will be saying, but why doesn't that also apply to the menu items? - because they are inside another nested div called mainlist - and that has a selector of its own
<pre id=code><font face=courier size=2 id=code> #mainlist a:link{}</font id=code></pre id=code> which styles the links differently - it over-rides the outer selector.

On your page you can't do it exactly like this because your menu is in a table. I think you will need to introduce at least another div to get this to work. Same applies to your other pages too. It helps to think of containers nested within each other, then you can apply selectors to style things within the inner containers.

Many thanks for that, appreciate the time you have taken to help me out.

As you can see from the newest version of the page ( from today ) I ended up using a .gif of exactly the same colour as the blue bar on the right and added text in Fireworks for the email address, then made it a link. Worked out ok, but I'll certainly have a go using your advice and see if I can get it working that way.

Once again, thank you for your help!!!.

Gary.

Only a biker understands why a dog sticks its head out of a car window!!.