CSS: Decorating the First-letter

:first-letter is a pseudo class that applies to block level elements only.

http://www.w3.org/TR/REC-CSS2/selector.html#first-letter

Aren't headlines block-level elements?

I had it displaying once before, but at that time the page did not display properly in IE. Once I got it displaying in IE, the :first-letter thing stopped working.

the :first-letter psudo element doesn't work in IE (as far as I know)

Headlines are. Anchors are not. Support is spotty at best.

Quote: the :first-letter psudo element doesn't work in IE (as far as I know)

I wouldn't doubt it. I've never had it working in IE either nor am I too concerned about it showing in IE.

So I have the :first-letter thing on h4 tags, but by making them hyperlinks, they become anchors?

So... what's the difference between an anchor and a link?

er... in your CSS example you had a:first-letter, not h4:first-letter... ?!?

Mabye showing my XHTML will help...

'
That's part of it anyway. I know having the links wrap around the h4 tags doesn't validate, but it is the only way it will display the layout properly cross-browser.

The reason my example is a:first-letter is because, like I said before, that's what makes it work- except for where I want it to work- in the #content-box.

If I were to make it h4:first-letter then nothing would happen because the h4 tags are links and thus would be over-written by the link decoration/coloring stuff.

One would think that by putting #content-box a:first-letter the first-letter would work only within the content box. But since it does not work in to content-box even with nothing coming before a, I would have to assume something else is wrong here. Not just the :first-letter pseudo-class on it's own but some conflic it's having with something else.

That's where I'm stumped.

Actually, I'd probably use a list instead of the semantically meaningless headings, too. There has been a lot of work in this regard for navigation lists, so you should be able to find great results.

Thanks, I'll give it a wirl and let ya know if it works.

Quote:
Actually, I'd probably use a list instead of the semantically meaningless headings, too. There has been a lot of work in this regard for navigation lists, so you should be able to find great results.

I wouldn't say the headlines aren't meaningless, as they are the catagory titles to the primary content of my site. How would I accomplish that and maintain the wrapping effect I have now? Setting the li tags to float?

The headings are semantically meaningless because they don't head anything. The h4 headings, I'm speaking of. The h3 headings head a list of categories/links.

You don't need to float, you can control it all with margins and padding? Have you ever styled a list before? Do you have a screenshot of what you're seeing? I'm not sure what wrapping effect you're speaking of.

The h4 headlines may be semantically meaningless but they aren't meaningless in regards to the content.

But anyway, more on why that doesn't matter later.

I use float so that it is flexible amungst various monitor resolutions. If I designed it all to fit in 800x600 then there would be a bunch of blank space. By floating them, the content dynamicaly fills the space. It's a personal preference. I've never been fond of any site that fills in only a fraction of my monitor (esp. when it's not centered).

I've styled lists before (my main menu is a list) and I've tried the list option you mentioned but it only displays the content horizontally or vertically. Couldn't get it to do what I have it doing right now.

Here's a screenshot of what it looks like on Safari (expires 24hrs). If you open it up in Moz it looks about the same.

I tried the XHTML with the links within the h4 tags but I cannot get the rollovers to work that way. Having the XHTML the way I have it now is the only way those will display properly in any browser.

I did manage to get the :first-letter pseudo-class to work, but as soon as the mouse hovers over it, it dissapears and stays gone even when the mouse is no longer over it. You'll see what I mean in Moz.

I'll tinker with it more later. I have to move on in getting this site up. If I ever figure it out I'll post it here.

Thanks for all the help

Well, no? On any given page, the should be the title of the content of the page. There are no children for your

so they are not what you should have.

If you have a background in your anchor, you can control the background on hover in all browsers that support it. Move the text over with margins or padding (depending on whether you mind extra spans or not, you can do that as well to control the text).

i.e.

Set o' Links

Link Text

Where "span" is

or

or or whatever markup you choose.

Then in the CSS, you can set this:

#whatever a {
background-image: url(someimage.jpg);
width: 100%; /* so it's the same width as the containing element */
padding-left: 100px; /* to move the text off the background */
}

#whatever a:hover {
background-image: url(anotherimage.jpg);
width: 100%; /* so it's the same width as the containing element */
padding-left: 100px; /* to move the text off the background */
}

You're not doing anything earth-shattering here, it's been done quite a lot with much fooferah about it -- see alistapart.com for how they are handling it (the image replacement) and other ways of going about swapping images using anchors as well as other options.

Using :first-letter isn't really working (as you've said repeatedly), and trying to force it to comply with your ideas isn't going to happen. Look at what's been done before, there is quite a lot of precedent for this behaviour.