WordPress.org

1. mattshepherd
   Member
   Posted 5 years ago #
   

   I'm still learning, and I can't for the LIFE of me figure out why, on this site I'm working on (venerable-bede.com), the style for ALL a:link and a:visited is being called from the .sidebar section of the CSS.

2. Ivovic
   Member
   Posted 5 years ago #
   

   mind pasting the definition?

3. mattshepherd
   Member
   Posted 5 years ago #
   

   I'm not sure what you mean by definition, but here's the bulk of the style.css. It's the "visited" that seems to be the problem: I set the sitebar to a unique shade of grey so it would be easy to tell from the brown I want. When I click on any link and reload the main page, all visited links are turning up that weird grey instead of the brown that I THINK I've defined further up in the a:visited section.

   body, h1, h2, h3, h4, h5, h6, blockquote, p{
   margin: 0;
   padding: 0;
   }

   body{
   margin: 0;
   font-family: Arial, Helvetica, Georgia, Sans-serif;
   font-size: 12px;
   text-align: center;
   vertical-align: top;
   background: #ffffff;
   color: #000000;
   }

   h1{
   font-family: Georgia, Sans-serif;
   font-size: 24px;
   padding: 0 0 10px 0;
   }

   img{
   border-style: hidden;
   }

   a:link, a:visited{
   text-decoration: none;
   color: #5A3D1B;
   }

   a:hover{
   text-decoration: underline;
   }

   p{
   padding: 10px 0 0 0;
   }

   #wrapper{
   margin: 0 auto 0 auto;
   width: 750px;
   text-align: left;
   }

   #header{
   float: left;
   width: 750px;
   height: 170px;
   background: url("http://venerable-bede.com/images/bedeheader.jpg")
   no-repeat top center;
   }

   #headerimg {
   height: 140px;
   width: 740px;
   }

   #header a:link, a:visited, a:active{
   text-decoration: none;
   color: #5A3D1B;
   }

   #header a:hover{
   text-decoration: underline;
   }

   #header p{
   font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
   font-size: 18px;
   font-weight: bold;
   text-align: center;
   position: absolute; top: 130px;
   letter-spacing: 2px;
   color: #5A3D1B;
   }

   #container{
   float: left;
   width: 580px;
   }

   .post{
   padding: 10px 0 10px 0;
   }

   .post h2{
   font-family: Georgia, Sans-serif;
   font-size: 18px;
   }

   .entry{
   line-height: 18px;
   }

   p.postmetadata{
   border-top: 1px solid #ccc;
   margin: 10px 0 0 0;
   padding: 0 0 0 2px;
   }

   .sidebar{
   float: left;
   width: 160px;
   background: #5A3D1B;
   margin: 0 0 0 10px;
   display: inline;
   color: #FFC468;
   }

   .sidebar a:link, a:visited{
   text-decoration: underline;
   color: #555555;
   }

   .sidebar a:hover{
   color: #FFF3A4
   }

   .sidebar ul{
   list-style-type: none;
   margin: 0;
   padding: 0 10px 0 10px;
   }

   .sidebar ul li{
   padding: 10px 0 10px 0;
   }

   .sidebar ul li h2{
   font-family: Georgia, Sans-serif;
   font-size: 14px;
   color: #FFC468;
   }

   .sidebar ul ul li{
   padding: 0;
   line-height: 18px;

4. Ivovic
   Member
   Posted 5 years ago #
   

   "the definition" refers to the place where the style is defined... that is, the bit you're trying to change.

   whoever wrote this css is a nuffy.

   .sidebar a:link, a:visited

   is NOT the same as

   .sidebar a:link, .sidebar a:visited

   in the first example only a:link in the sidebar is affected by what follows, but a:visited everywhere is affected.

   this broken notation is dotted throughout your css.

5. mattshepherd
   Member
   Posted 5 years ago #
   

   I think I'm the nuffy (I did say it was a stupid question!)

   Gotcha. I was following some css from a tutorial and trying to build off it, and I obviously didn't understand how to add onto a definition correctly.

   Back to work! Thanks a million!

   (EDIT: It worked! This is EXACTLY the sort of thing that seems really dumb in retrospect but I never would have figured out on my own.)

6. Ivovic
   Member
   Posted 5 years ago #
   

   hehe, I assumed it wasn't you, because I thought you might try something different, if at first you didn't succeed ;)

   if I may add a small suggestion for notation purposes... and maybe ease of editing down the line...

   instead of doing:

   .sidebar a:link, .sidebar a:visited {
     text-decoration: underline;
   }

   lay it out like this:

   .sidebar a:link,
   .sidebar a:visited {
     text-decoration: underline;
   }

   that way, when you end up with something like:

   blockquote,
   .sidebar ul ul ul,
   .entry table td {
     margin: 0;
     border-left: 1px solid blue;
   }

   it's more obvious that they're unrelated, and you save on horizontal scrolling.

7. mattshepherd
   Member
   Posted 5 years ago #
   

   I'll do that! Thanks for the tip!

Topic Closed

This topic has been closed to new replies.