Update

I was able to tinker more with the webpage and fixed some of the margin and placement issues. My page happens to look totally different (and a lot worse in IE).

I still could not figure out how to vertically align text to a div, but I adjusted the line-height in my title div to be very small and for some reason this moved the text up. Using vertical-align does not work.

I am still unable to center my page in the browser. I have no idea why this doesn't work, especially since I copied it over from an in-class assignment!

Notes from this week's reading:

• selector:pseudo-class {property: value}

• Use a before or after pseudo-element when you want something repeated multiple times
• The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

  The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

• The @media rule allows different style rules for different media in the same style sheet.

• @media screen
  {
  p.test {font-family:verdana,sans-serif; font-size:14px}
  }
  
  @media print
  {
  p.test {font-family:times,serif; font-size:10px}
  }

  @media screen,print
  {
  p.test {font-weight:bold}
  }

Some of the items that confuse me from this week's reading:

- first child: the structure of the selector

• p < em:first-child
  {
  font-weight:bold
  }
• p:first-child em
  {
  font-weight:bold
  }
• img
  {
  opacity:0.4; /* Firefox */
  filter:alpha(opacity=40) /* IE */
  }

- The difference between focus and active for links.