CSS Lessons

I just finished re-skinning a website and came across a couple of CSS stumbling blocks that gave me a little trouble.  Hopefully these my save you some time in your future projects.

My first issue has to do with the position style.  Absolute positioning will place an element at the exact pixel location on the page.  However, if the parent element has a position style of "relative", then the absolutely positioned element will use the parent element to determine position, instead of the page itself.

My other issue revolved around the anchor pseudo classes.  If you assign them directly to the "a" element, they will be used by all the anchors on the page, whether you like it or not.  Consider the following CSS styles:

a:link { color: red; }
a:active { color: red; }
a:visited { color: red; }
a:hover { color: green; }

#mydiv a:link { color: blue; }
#mydiv a:active { color: blue; }
#mydiv a:visited { color: blue; }
#mydiv a:hover { color: yellow; }

In this scenario, all the links in mydiv will be red.  To get around this, you need to put identifiers in front of all the "a" styles.

I experienced this behavior in both IE and Firefox.