little. yellow. different. A weblog by Ernie Hsiung

css (and sunflowers and a drag queen or two)

My life has been taken over by the following in the past couple of days: HTML. Long commutes. Discussions about Layered semantic markup versus the TABLEs. Javascript pre-loading. Cascading style sheets. Non-web standard methods for Internet Explorer for the sheer sake of it “looking cool.” And most of all, sunflower fields. Endless sunflower fields. Don’t get me wrong, I’m loving the job, but If I dream about a sunflower field one more time, god help me, I’m going to scratch my goddamn eyes out and then I’ll have to use layered semantic markup to make this text-to-speech reader work.

(For those baffled about the reference to sunflowers, it will all make sense in a couple of weeks. Trust me.)

In the mean time, maybe one of you CSS gurus can help me out, yeah?

Let’s say I am currently working on a page that uses a table layout to
make a simple drop shadow. But why use tables when you can compact
the code into CSS?

My thought exactly.

But now I’m running into a little issue - I want to use the same
classes for any image I want to apply a shadow to, and I don’t know
the dimensions of that image all the time. How do I do this (that
will work for both IE and Moz)?

This page should illustrate my situation nicely.

As you can see, if I set my shadow/container DIV to be an inline
element, it won’t work in Mozilla. If I set it as a block, the
width automatically becomes width:100% - that doesn’t work. I had
some minimum success floating the element left - it seemed to pick
the width up that way - but I can’t have the element floating left
since I’m using this inside tables.

Any help would be appreciated.

Update: Thanks, Leon!

Quick links which may or may not help, since I just realized I’m half an hour late being somewhere:

http://nontroppo.org/test/shadow.html (the most promising one, it seems)
http://www.saila.com/usage/shadow/ (with the same on evolt at http://www.evolt.org/article/Simple_CSS_drop_shadows/17/18583/)
http://www.mikezilla.com/exp0029.html

I’ll take a better look at what’s out there later.

Good URLs, all of them, but they all use fixed widths, something I can’t really use.

I know this is off-topic but why isn’t there a simple right-click “Go to address” command in IE for web addresses without embedded links (e.g. Jason’s comments above)? I realize I am incredibly lazy but the whole process of select text, right-click, copy, click on address bar, right-click, paste, click on “Go” or hit enter seems like waaaay too many steps. I just wish I could right-click, go to address.

display:table is your friend
To make it work nicely in IE, you’ll need to put a width:0px in there.

FYI: test2 looks fine in Safari. Leon’s suggestion is just barely there for Safari (smaller shadow). Same thing happens here, but I did this once by stealing Ben Brown’s code on his now defunct site:

http://brandbenbrown.com/section.html/products

it’s layered div tags, maybe more complex, but should work with images as well. That’s all I got.

instead of a drop shadow, consider a big fat 12pt border around your images. Perhaps coloured 0f0?

i know, i know…

i’m not helping. at least i didn’t mention sunflowers. more than once.

Howsabout this?

#content {
background-color: white; /* Keeps the shadow from showing through */
position: relative;
z-index: 1;
}

.shadow {
border : 2px solid black;
background-color: black;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 10px;
left: 10px;
}

[off-topic] I don’t know about IE, but you can right-click a non-link url in Opera and select go.