Hyperlink colors not working properly (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

kimssure -> Hyperlink colors not working properly (2/9/2008 22:19:12)

I have been messing with getting the hyperlink colors to work consistently on each page, but no luck.

I finally added a css today, and it changes the colors, but some of the pages still aren't working. I can't see anything the html that might be conflicting. Could someone please take a look?

TIA

http://www.zoneenergyweb.ca/home.htm



Tailslide -> RE: Hyperlink colors not working properly (2/10/2008 2:55:51)

Hi

There's two issues here really.

First is that it's best, as you're trying to do, to use CSS to style the links - makes it much easier to manage. But you've only got an active style and a visited style in there. Active style will style the link in the moment that they're clicked (not hovered over - but IE gets this wrong anyway) and visited styles will style a link once it's been visited.

What you need is to set up styles like this: 
a:link {color:whatever; }
a:visited {color:whatever; }
a:focus, a:hover, a:active {color:whatever; }


The first one will style all links on the site. The second one all links that have already been visited. The third row will style the links when hovered over with a mouse, when focused via keyboard or in the action of actually clicking them. They must be in this order.

Secondly - you've got styling in the HTML itself around the links (e.g. font tags and font-sizing) remove those to remove conflicts.



kimssure -> RE: Hyperlink colors not working properly (2/10/2008 13:37:05)

Thanks! I am making progress. I removed all the conflicting html, but am still working on having the links white before they are visited, and purple once they are visited.



swoosh -> RE: Hyperlink colors not working properly (2/10/2008 13:59:06)

You have conflicting code in your body tag as well. 

 <body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">



swoosh -> RE: Hyperlink colors not working properly (2/10/2008 14:03:50)

Your style sheet still has visited as being white 

a:link{ color: #FFFFFF }
a:active     { color: #FF00FF }
a:visited    { color: #FFFFFF}
:link



kimssure -> RE: Hyperlink colors not working properly (2/10/2008 14:23:51)

I have been playing back and forth, and it doesn't seem to make a difference. Have a look now, I've changed it. Still doesn't seem to work.....



swoosh -> RE: Hyperlink colors not working properly (2/10/2008 14:27:08)

According to your style sheet it's working exactly as your telling it. 

   a:link       { color: #FFFFFF }
a:active     { color: #FF00FF }
a:visited    { color: #FF00FF }



they are white prior to visiting and purple after visiting



coreybryant -> RE: Hyperlink colors not working properly (2/10/2008 14:54:45)

Also, make sure that you have them in the proper order (link, visited, hover, active) - just remember love-hate.

Take a look at Tailslide's post as well for the order



kimssure -> RE: Hyperlink colors not working properly (2/10/2008 16:41:26)

Thanks Corey
I knew about the Love Hate, but forgot to follow the rule when I added the active code.

As for this.....

quote:

<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">


I know it's conflicting... I don't understand why I need it if I have a css, but when I removed it, my side menu dissappeared. I thought the css would tell the browser how to display the links. Do I have to go through each page and make this consistent with the css?

I wonder if it's a pain because I have the menu as an Included page?



coreybryant -> RE: Hyperlink colors not working properly (2/10/2008 18:13:12)

You don't need it.. That's the "old" way - Frontpage puts it in there if you use its GUI. Delete it so there won't be anything over-riding your CSS



kimssure -> RE: Hyperlink colors not working properly (2/10/2008 22:52:41)

I did remove it, but when I did the page that Included (the side menu) didn't show up any longer and I had to add it in. Weird. So now I don't know what to do.



Tailslide -> RE: Hyperlink colors not working properly (2/11/2008 2:31:40)

Exactly which page? Removing the link colour formatting from the body tag won't remove the links themselves so there's something else going on there - did you link to the stylesheet from all pages?



caz -> RE: Hyperlink colors not working properly (2/11/2008 7:49:26)

Did you remove the formatting only and leave the <body> tag alone? The fact that you are including a page, in this case the menu won't affect anything but you do link to the external css file on the menu.htm and strictly speaking this is not necessary. Once a page is included it inherits the style of the page it's included on, maybe that was causing your problem. Try removing the stylesheet link on the menu page.

However you do have a lot of inline styling that will need to be removed if you are moving to using external stylesheets, in addition you will also need to use a Doc Type declaration so that you have some base reference point for checking your css validity (it makes things a whole lot easier [;)]) FP is quite capable of producing valid web pages, but you do have to learn some different ways of working with it.

Using Doc Types with FP

CSS and FP
A quick overview of using CSS in FP

Linking a Style Sheet to a Page in FP

In Page view, open the page that you want to link to the style sheet.

1. On the Format menu, click Style Sheet Links.
2. In the URL list, select the style sheets that you want to link to the page.
3. Click OK.
4. If you look at the code in HTML view, it will look like this:

<link rel="stylesheet" type="text/css" href="sitestyle.css">

Tips

* If the URL list does not contain any style sheets, click Add. In the Select Style Sheet dialog box, browse to the style sheet that you want to add to the list and then click OK.
* To link all the pages in your Web site to the selected style sheets in the URL list, select All Pages.
* To remove a style sheet from the URL list, select it and click Remove.
* To change the cascading order of the style sheets in the URL list, select the style sheet that you want to move and then click Move Up or Move Down.
Note The URL list is the order in which the style sheets will cascade, so be certain that the order you see is the order in which you want your style sheets to cascade.

Other MS references

http://tinyurl.com/2594u9
http://tinyurl.com/2f8adb
http://tinyurl.com/336834



kimssure -> RE: Hyperlink colors not working properly (2/11/2008 15:35:37)

Thank you so much. I was deleting the whole body tag, so I've corrected that. It seems to finally be working nicely now.

Thanks for the info on the css as well. I am finally starting to use them. I'm not sure how much I will use on the site I am working on now, but will definitely implement them into any future sites. Had I known how easy they are to use, I would've started using them long ago.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125