WordPress.org

1. bcinelli
   Member
   Posted 3 years ago #

   my site : http://zooyorkfreak.com (totally safe for work)

   If you view my site in firefox everything looks beautiful. When you look at it in IE it turns to trash.

   When ever you roll over any link on the page it automatically creates a break and screws up the page. Roll over a sidebar link and it adds a phantom break between the links.

   I have been cleaning up my CSS .. and now it just looks horrible becuase of this issue.

   Please someone help me.

2. Otto
   Tech Ninja
   Posted 3 years ago #

   In your CSS:

   .commentmetadata a, a:hover, a:visted {
   	font-weight: normal;
            color: #FF6600;
   	margin: 0px;
   	display: block;
   	}

   The "display:block" is your issue here. You're changing the link from inline to block style on hover (a:hover), which means it should have a line break after it.

   Also, "visited" is misspelled. Might want to consider running things through a validator or three.

3. bcinelli
   Member
   Posted 3 years ago #

   I'm sorry. I been teaching myself CSS throught the WROX book and going back on a pre-made theme that someone had made before. I should of run it through a validator before posting you are right.

   I just have one question after I implemented what you said.

   What does the .commentmetadata have to do with post titles and sidebar stuff?

4. Otto
   Tech Ninja
   Posted 3 years ago #

   What does the .commentmetadata have to do with post titles and sidebar stuff?

   Nothing at all. But you're not applying that to just the links in the commentmetadata. The comma starts a whole new type definition, so that's three different definitions in one right there. "a:hover" is *every* link on the whole page.

5. bcinelli
   Member
   Posted 3 years ago #

   I think I now know what your getting at once you place that , it starts a new definition .. in this case a:hover doesn't have to be releated to .commentmetadata at all but instead the whole pages a:hover.

   I think I now know my problem.

   So its best to write the css as follows?

   .commentmetadata a {
   font-weight: normal;
   color: #ff6600;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   }

   .commentmetadata a:hover {
   'its own properties'
   }

   .commentmetadata a:visited {
   'its own properties'
   }

6. Otto
   Tech Ninja
   Posted 3 years ago #

   Well, there's nothing wrong with comma separation like that, just be explicit about what you're referring to. Use .commentmetadata a:hover instead of just a:hover.

Topic Closed

This topic has been closed to new replies.