4 replies [Last post]
flathorse
Offline
newbie
Last seen: 18 years 18 weeks ago
Joined: 2004-07-29
Posts: 2
Points: 0

Hi,

This will be my first post here. I am just learning CSS and trying to get away from tables. I am working through some tutorials. One in particular relating to the creation of CSS Driven Drop Down Menus. The menu is working great. However, I can't get the link colors to appear properly. I have previewed the page in both IE and Netscape. Still the colors default to the browsers colors. Here is my page code, followed by my stylesheet code. I have tried defining the colors several different ways. All of which are recognized in Dreamweaver MX 2004 preview, but default to browser colors upon browser preview.

PAGE CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project 6</title>
<link rel="stylesheet" href="hos.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="nav">
<ul class="level1">
<li><a href="nav.htm">Home</a></li>
<li class="submenu"><a href="nav.htm">Boat Adventures</a>
<ul class="level2">
<li><a href="nav.htm">Snorkel Sail</a></li>
<li><a href="nav.htm">Sunset Sail</a></li>
<li><a href="nav.htm">Whale Watch</a></li>
<li><a href="nav.htm">Private Charter</a></li>
<li><a href="nav.htm">Diving</a></li>
<li><a href="nav.htm">Wedding Vows</a></li>
<li><a href="nav.htm">Glass Bottom Boat</a></li>
<li><a href="nav.htm">Testimonials</a></li>
</ul>
</li>
<li class="submenu"><a href="nav.htm">Beach Activities</a>
<ul class="level2">
<li><a href="nav.htm">Whale Center</a></li>
<li><a href="nav.htm">Glass Bottom Boat</a></li>
<li><a href="nav.htm">Wind Surfing</a></li>
<li><a href="nav.htm">Hydrobike</a></li>
<li><a href="nav.htm">Kayaking</a></li>
<li><a href="nav.htm">Snorkel Gear</a></li>
<li><a href="nav.htm">Boogie Boards</a></li>
</ul>
</li>
<li class="submenu"><a href="nav.htm">Whale Center</a>
<ul class="level2">
<li><a href="nav.htm">Center Info</a></li>
<li><a href="nav.htm">Whale Watch Sail</a></li>
</ul>
</li>
<li class="submenu"><a href="nav.htm">Exclusive Charters</a>
<ul class="level2">
<li><a href="nav.htm">Boat Charters</a></li>
<li><a href="nav.htm">Wedding Vows</a></li>
<li class="submenu"><a href="nav.htm">Our Fleet</a>
<ul class="level3">
<li ><a href="nav.htm">Seasmoke</a></li>
<li><a href="nav.htm">Alala</a></li>
<li><a href="nav.htm">Glass Bottom Boat</a></li>
</ul>
</li>
</ul>
</li>
<li class="submenu"><a href="nav.htm">About Us</a>
<ul class="level2">
<li><a href="nav.htm">Ocean Sports</a></li>
</ul>
</li>
<li class="submenu"><a href="nav.htm">Our Location</a>
<ul class="level2">
<li><a href="nav.htm">Map</a></li>
<li><a href="nav.htm">Text Directions</a></li>
<li><a href="nav.htm">Kawaihae Harbor</a></li>
</ul>
</li>
<li class="submenu"><a href="nav.htm">Contact Us</a>
<ul class="level2">
<li><a href="nav.htm">Contact Info</a></li>
<li><a href="nav.htm">Reservations</a></li>
<li><a href="nav.htm">Info Request</a></li>
<li><a href="nav.htm">Our Location</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

STYLESHEET CODE:

body {background: #FFF; color: #000; margin:0 5px; behavior: url("csshover.htc"); font-size: 11px; font-family: Verdana, Geneva, Arial, helvetica, sans-serif; } /* WinIE behaviour call */
a:link {color:016394;}
a:visited {color:016394;}
a:hover {color:016394;}
a:active {color:016394;}
div#nav {float: left; width: 12em; margin: -1px 0 0 -1px; background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 12em; line-height: 200%; background: white; border: 1px solid #AAA;}
div#nav ul ul {position:absolute; top: 0; left: 12em; display: none;}
div#nav ul.level1 li.submenu:hover ul.level2 {display:block;}
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav li {position:relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url("images/submenu.gif") 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display:block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 100%; voice-family: "\"}\" "; voice-family: inherit; width: 11.5em;}
div#nav>ul a {width: auto;}

I'd appreciate any and all help:>)
Barb

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Setting Link colors with CSS

Hi flathorse,

The anchor color declaration syntax is incorrect you have written colors correctly elsewhere, check the differences

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

flathorse
Offline
newbie
Last seen: 18 years 18 weeks ago
Joined: 2004-07-29
Posts: 2
Points: 0

Setting Link colors with CSS

Oh my gosh! Do I feel like a dodo bird! I was concentrating so hard on the new CSS I was learning that I totally blew it with the colors. Thank you so much for pointing out a most obvious mistake. They always say the best hiding place is right under your nose. So it is true.

Thank you for your time. It works beautifully now:>)
Barb

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Setting Link colors with CSS

Happens to me all the time, find myself staring at the problem for hours before acknowledging it's wrong Smile

One thing though the fact that DW was happy to let you think everything was kosher is another reason to trust to hand coding skills at the end of the day!!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

timware
Offline
Regular
Oakland CA
Last seen: 19 years 2 days ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

The script you're using for dropdowns

I've been using the same script, but I can't remember where I got it, and I want to give some attribution. Do you recall where you got that dropdown menu script? Thanks. Tim