CSS sprites, display: inline, and WordPress problems…?

[nickpelling]

Hi everyone,

Though my attempts to convert my WordPress blog over to use CSS sprites have been reasonably successful (i.e. everything shows up in the right place), I’m having trouble cracking the last three techy CSS issues. Any suggestions from all you clever CSS people would be a big help! :-)

As normal, here’s a link to my http://www.ciphermysteries.com/ blog where you can see all the problems in action. :-(

The first two problems are to do with the list of "controls" (category links and comments) that appears at the bottom of each post ("li.readmore" and "li.comment" in the CSS). So that these li objects appear as a left-to-right sequence, the CSS defines them as "display: inline", and this works fine… for short lists that don’t wrap into two lines (and it’s a three-column variable-width layout, so the lines can end anywhere).

Problem #1 occurs when one of these controls (most noticeably those with spaces in, such as "Roger Bacon") wraps over the end of the line. What happens there is that IE7 (but not FireFox) draws the CSS image as if it was at the start of the overall bounding box containing both sections of the text block split across the line – i.e. in completely the wrong place… yuk. Is there a way of preventing a block of text from wrapping? I’ve tried "white-space: no-wrap;" but that didn’t work in IE7. It seems as though there ought to be some kind of hasLayout CSS trick to keep the CSS sprite and the text all in a single non-wrapping block, but I can’t find it. Any ideas?

Problem #2 occurs when there is more than one row of controls beneath a post. Try as I might, I haven’t been able to find a way of influencing how much space gets inserted between rows in a series of "display: inline;" elements – neither padding nor margin properties seem to affect this, for both IE7 and FireFox.

Problem #3 occurs with the contenttitle class: this has a CSS sprite that is supposed to go before the title of a post in lists of posts (the graphic is an ornate star). This works fine on IE7, but has apparently stopped working on FireFox since I converted it to a CSS sprite.

Any suggestions? Failing that, has anyone seen a definitive guide to adding CSS sprites to WordPress blogs? It seems like one of those sensible things that someone should have written (but I can’t find it).

Thanks!, ….Nick Pelling….

[Rob MacKay]

first thing that you have to understand is its not wordpress – its you. :)

What are you actually trying to do? Do you have a photoshop mock up of what its ment to look like?

All I can say for sprites is remeber they are classed as a background image, so you will have to format your text around them, as your text will just roll right over them otherwise. You can move your text around with the text-indent attribute or even adding padding to the container.

Sorry, your post above just kinda confused me…

[nickpelling]

All I’m trying to do is (a) produce a list of categories below each post (or summary of each post) that doesn’t mess up in different browsers, (b) use CSS sprites creatively so that I can substantially improve the look and functionality of the site without doubling the number of HTTP requests needed to load it. :-) Unfortunately, the two seem to be at odds with each other. :-(

As far as the first problem I mentioned, the CSS fix (in a standards-compliant browser) would probably be to use "display: table-row" (i.e. display all the text in a category link like a non-wrapping HTML table row). But as I don’t think IE6 can do this, I’m guessing I would have to drop back to inserting a load of redundant tables. Oh well!

As I understand it, CSS sprites work beautifully if you are putting them in well-defined places: but if not, then the kind of wobbly browser-specific issues I describe seem to creep into play. And yes, I do realize it’s my site (not WordPress’s): but when you have a variable list of WordPress category links to be placed horizontally across a variable-width CSS column, basic fixed-layout ideas stop working. Hope this is a help!

Cheers, ….Nick Pelling….

[nickpelling]

I now (after an embarrassingly long period of CSS twiddling) have a fix for problem #3. This was a class that used padding-left to offset the text so that it didn’t sit on top of a 24-pixel-wide CSS image: while IE7 renders it OK, FireFox unfortunately does not.

However… by using both "padding-left: 0px;" and "text-indent:24px", it now works fine. Whyever padding-left wouldn’t pad to the left in FireFox I don’t know. Perhaps this is a known CSS issue?

One problem down, two more to go! :-o

[ulrike]

Hello.
I think your problem is that you apply a background-image to an inline element. The "height" of that element is not affected by vertical padding (or margin or border). The only way to increase the space between your lines of text is to use the line-height property. e.g. "line-height: 2;" on the A element should be enough to show the arrow-icons.
I don’t quite understand why all your links are in one LI element. Could you not use a LI for each link and then set that to display: block and float it? Just a proposal.

[nickpelling]

Hi Ulrike,

Thanks! That’s the CSS I was missing for problem #2 – I thought (wrongly) that you would use padding-top and padding-bottom to control the overall height of a line, but line-height does the trick!

I’m now down to the last problem…

Thanks, ….Nick Pelling….

[ulrike]

Hi Nick, I don’t have an IE here at the moment, but from your description it seems that this might be your problem #1: http://www.satzansatz.de/cssd/wrappinglinkbg.html

Hope That Helps

[nickpelling]

Hi Ulrike,

Yes, that would be it – so, what I’m actually looking at is the problem that CSS3 solves with the (new) "background-break" property – effectively, IE6 currently defaults to "background-break: bounding-box;" while other browsers default to "background-break: continuous;"

So, in future there would be a foolproof CSS way to make other browsers work as badly as IE – neat! ;-)

I’ll keep looking… but thanks! :-)

Cheers, ….Nick Pelling….

[Author]

Posts