Forum Moderators: not2easy
I wanted to make the links in my navigational menu not be underlined and be a smaller font than the rest of the page. I made these changes to the css and the html.
It worked on all the links except the .about.html link. If I put in any other word besides (about.html) the css applies. If I put in the word (abouts.html) or (about2.html) or any word under the sun it will apply. However it will not apply for the word (about.html) The (about.html) link is still underlined and still the bigger size font. The (about.html) link is following the style that is for the rest of the page.
Then if I view the page in IE browser, it also does not apply on the (self-care-books.html) link either. it does the same thing as the (about.html) but only in IE browser. It does apply in the Firefox browser.
Also in IE browser my images that separate each link do not display. They display fine in firefox, but not Ie. However when I'm viewing the page offline to make sure it looks okay before uploading the images display. Once online they don't display.
I'm still very much a newbie in regard to CSS, so perhaps I have used the wrong code. My son who knows a bit more than me gave me this code to use, but we can't figure out why it is doing this.
Would greatly appreciate some help.
Thanks
Cynthia
CSS
.nav a:link {
text-decoration: none;
font-size:12px;
}
a {
font-family:Arial;
font-size:13px;
font-weight: bold;
color:#000099;
}
******
HTML
<td width="150"><!-- menu below, copy and paste the menudivider.jpg code as necessary --><!-- the is code for a one letter space -->
<div class="nav">
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="index.html">Home</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="holistic-health.html">Holistic Health</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6" width="150"><br>
<a href="chronic-pain.html">Chronic Pain</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="holistic-nutrition.html">Holistic Nutrition</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="chronic-illness.html">Chronic Illness</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="holistic-health-care.html">Health Care</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="holistic-remedies.html">Holistic Remedies </a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="environmental-health.html">Environmental</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="colon-cleansing.html">Holistic Medicine</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="holistic-medicine.html">Colon Cleansing</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="sexual-health.html">Sexual Health</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="dental-health.html">Dental Health</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="spiritual-health.html">Spiritual Health</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="holistic-mental-health.html">Mental Health</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="candida.html">Candida</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6" width="150"><br>
<a href="fibromyalgia.html">Fibromyalgia</a><br><img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="multiple-chemical-sensitivity.html">Chemical Sensitivity</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="migraine-headaches.html">Migraines</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6" width="150"><br>
<a href="chronic-fatigue-syndrome.html">Chronic Fatigue</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="weight-loss-information.html">Weight Loss</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="menopause-symptoms.html">Menopause</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="effects-of-stress.html">Stress Effects</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6" width="150"><br>
<a href="counseling.html">Holistic Counseling</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="books.html">Self Care Books</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="inspirational-quotes.html">Inspiration</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="about.html">About</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br>
<a href="contact.html">Contact</a><br>
<img src="menudivider.jpg" alt="" border="0" height="6"
width="150"><br></div>
<!-- end menu --><br>
You need an a:visited declaration for the links:
a:visited /* or a.psuedoclass:visited if a class is assigned */ {
text-decoration: none;
}
You can also add a different color to visited links too:
a:visited {
text-decoration: none;
color: #900;
}
It is important though to remember the sequence in your CSS for link declarations:
a {} /* or a:link */
a:visited {}
a:hover {}
Marshal
Thank you so much Marshal.
I just realized that I should have posted the second part of my question about the images not displaying in a different category. Sorry about that. And I just figured out on my own the problem with the images. So I no longer need help on that aspect.
Thanks again Marshal. I really appreciate it.
:)
Marshall
