bluefacedpixie

...but if you jump over to planetdanika using Safari (on a Mac) then the header “planetdanika” has a nice shadow to it. This makes it stand out when the white header is on a bright photo background. A lovely touch brought about with this one line:

#header { text-shadow: #111111 0.1em 0.1em 0.2em }

There’s more though:

It took 2 minutes to add this, and it looked so nice I did the same up top to bluefacedpixie. However this story skips the part where I spent a good couple of hours wrestling with making a drop shadow that worked in browsers other than Safari – because IE and Firefox don’t support the CSS3 text-shadow.

Most googling brought me to some CSS that looked like this:

.shadowMe, .shadowMe span { position: relative; margin: 0; padding: 20px; text-align: right;}
span.shadow {position: absolute; text-align: right; padding: 0, 0, -20px, 0; }
span.shadow {
top: 1px;
left: 1px;
color: #777777;
}

and accompanying use of class and span in the markup where I wanted the shadow. I couldn’t get it to work and right adjust the header, mostly due to my lack of CSS-fu. As I didn’t want to flip all of the images in planetdanika’s header files to put her on the right I have currently abandoned this approach and left the sites Safari-only-friendly.

It annoys me when simple things are simple, and then don’t work, and the workarounds suck so much time and fiddling. Mmm.