Css P

[Richmilnix]

Still wrapping my noggin around CSS. In this page, I've got some CSS-P applied that's making three fixed-width columns, but the text formatting — which should make the columns appear in green, blue, and red text — is being overridden by the browser's standard treat-all-links-as-blue-underlined-text behavior. Can anybody tell me what errant code in the page is causing this behavior?

(For the purposes of this, I've moved the CSS from a separate file into the head of this html page. Once I've figured out what I'm doing wrong, I'll link back to a standalone CSS file.)

Thanks in advance.

Ian

[tommylogic]

HTML

 <div id="links1">
    <p><a href="http://www.kidskonnect.com/AlphabetizedList.html">Kids Konnect</a></p>
    <p><a href="http://www.kidlink.org/english/general/k/index.html">KidLinks</a></p>
    <p><a href="http://www.peanutbutter.com/games_home.asp">Peanut Butter Fun</a></p>
    <p><a href="http://www.farscapegames.co.uk/">Farscape Board Games</a></p>
    <p><a href="http://www.puzzleconnection.com/">Puzzle Connection</a></p>
      <p><a href="http://jigzone.com/">Jig Zone</a></p>
      <p><a href="http://www.dltk-kids.com/crafts/summer/puzzles/index.htm">Summer Puzzles</a></p>
      <p><a href="http://www.dltk-kids.com/puzzle.htm">More Puzzles</a></p>
      <p><a href="http://thinks.com/?500">Fun and Games for Playful Brains</a></p>
      <p><a href="http://thepuzzlefactory.com/">Puzzle Factory</a></p>
      <p><a href="http://www.rinkworks.com/brainfood/">Puzzles for the Brain to Gnaw On</a></p>
      <p><a href="http://www.iknowthat.com/com">I Know That!</a></p>
      <p></p>
  </div>
 
 <div id="links2">
  <p><a href="http://advicom.net/~e-media/kv/poetry1.html">Positively Poetry</a></p>
  <p><a href="http://rdz.stjohns.edu/kidopedia/">Kidopedia</a></p>
  <p><a href="http://www.sikids.com/">Sports Illustrated For Kids</a></p><p>  
  </p></div>  
  <div id="links3">
<p><a href="http://www.factmonster.com/">Fact Monster</a></p>
<p><a href="http://www.govspot.com/features/kids.htm">Government for Kids</a></p>
<p><a href="http://express.howstuffworks.com/">How Stuff Works Express</a></p>
<p><a href="http://www.infoplease.com">Infoplease</a></p>
<p><a href="http://www.m-w.com/">Merriam-Webster Online Dictionary and Thesaurus</a></p>
<p><a href="http://www.refdesk.com/index.html">RefDesk</a></p>
<p><a href="http://www.bls.gov/k12/">What Interests You?</a></p> <p><a href="http://www.worldalmanacforkids.com/">World Almanac for Kids Online</a></p>
  </div>

CSS

body, h1, h2, h3, h4, p, ul, li {
margin: 0px;
padding: 0px;
}
#links1 {
font-family: "Times New Roman", Times, serif;
font-size: 13px;
color: #009900;
text-align: left;
position: absolute;
left: 0px;
width: 25%;
top: 26px;
}
#links1 a:link {
color: #009900;
font-weight: bold;
text-decoration: none;
}
#links1 a:hover {
color: #003300;
font-weight: bold;
text-decoration: underline;
background-color: #FFFF99;
}
#links1 a:visited {
color: #009900;
font-weight: bold;
text-decoration: none;
}
 
#links2 {
font-family: "Courier New", Courier, monospace;
font-size: 13px;
text-align: center;
position: relative;
width: 25%;
left: 35%;
top: 26px;
color: #0033FF;
}
 
#links2 a:link {
color: #003399;
font-weight: bold;
text-decoration: none;
}
#links2 a:hover {
color: #000000;
font-weight: bold;
text-decoration: underline;
background-color: #FFFF99;
}
.links2 a:visited {
color: #003399;
font-weight: bold;
text-decoration: none;
}
#links3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #CC0000;
position: absolute;
width: 25%;
right: 0px;
text-align: right;
top: 26px;
}
#links3 a:link {
color: #CC0000;
font-weight: bold;
text-decoration: none;
}
#links3 a:hover {
color: #990000;
font-weight: bold;
text-decoration: underline;
background-color: #FFFF99;
}
#links3 a:visited {
color: #CC0000;
font-weight: bold;
text-decoration: none;
}

[Richmilnix]

Hey, thanks!

So essentially, my page was using class tags and needed ID tags. Which is reflected in the CSS structure with a # versus a . . Do I have that right?

The check is in the mail.

[tommylogic]

I din't see a need for the class tags... your main problem was the syntax of your css..
you had a: link should have been a:link
your color was color: 003399; should have been color: #003399;

You should remove the errant css from your XHTML markup and include it in your external css file. Should be like this (notice the corrections I included that you should still make)

#header {
position:relative;
width:900px;
height:223px;
left: 50%;
margin-left: -450px; /* half the width of the div */
z-index:1;
top: 0px;
}
 
}  /*this line should be removed, the extra "}" is causing an error in CSS */
 
/*remove this section, its redundant as previously cleared in the opening line*/
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/*end remove*/
 
#page_body {
position:absolute;
width:700px;
height:700px;
left: 50%;
margin-left: -350px; /* half the width of the div */
z-index:2;
top: 238px;
}

Your completed and VALID css will look like this:

/**VALID CSS by Tommy Logic 2008**/
/*visit http://www.tommylogic.com*/
body, h1, h2, h3, h4, p, ul, li {
   margin: 0px;
   padding: 0px;
}
#header {
 position:relative;
 width:900px;
 height:223px;
 left: 50%;
 margin-left: -450px; /* half the width of the div */
 z-index:1;
 top: 0px;
}
#page_body {
 position:absolute;
 width:700px;
 height:700px;
 left: 50%;
 margin-left: -350px; /* half the width of the div */
 z-index:2;
 top: 238px;
}
#links1 {
   font-family: "Times New Roman", Times, serif;
   font-size: 13px;
   color: #009900;
   text-align: left;
   position: absolute;
   left: 0px;
   width: 25%;
   top: 26px;
}
#links1 a:link {
   color: #009900;
   font-weight: bold;
   text-decoration: none;
}
#links1 a:hover {
   color: #003300;
   font-weight: bold;
   text-decoration: underline;
   background-color: #FFFF99;
}
#links1 a:visited {
   color: #009900;
   font-weight: bold;
   text-decoration: none;
}
 
#links2 {
   font-family: "Courier New", Courier, monospace;
   font-size: 13px;
   text-align: center;
   position: relative;
   width: 25%;
   left: 35%;
   top: 26px;
   color: #0033FF;
}
 
#links2 a:link {
   color: #003399;
   font-weight: bold;
   text-decoration: none;
}
#links2 a:hover {
   color: #000000;
   font-weight: bold;
   text-decoration: underline;
   background-color: #FFFF99;
}
#links3 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #CC0000;
   position: absolute;
   width: 25%;
   right: 0px;
   text-align: right;
   top: 26px;
}
#links3 a:link {
   color: #CC0000;
   font-weight: bold;
   text-decoration: none;
}
#links3 a:hover {
   color: #990000;
   font-weight: bold;
   text-decoration: underline;
   background-color: #FFFF99;
}
#links3 a:visited {
   color: #CC0000;
   font-weight: bold;
   text-decoration: none;
}

There is quite a bit of redudndant styling. It will validate, just not necessary. Also of note, you should go back in your Markup and set all your alt tags on your images in order to get it to validate. Dont forget to remove your css in the markup.. link to your new file.

Markup Validation: FAILED 13 Errors
CSS Validation: FAILED 1 Error