CSS background image help

[sonofslim]

if i'm using a background image in a div, how can i ensure the entire image displays, even if the container div isn't necessarily tall enough? i'm using this CSS to fake a drop cap (specifically, a Q&A-type setting). the images are approx. 36px square, so the padding leaves a nice margin for them to sit in.

div.q, div.a {
	background-image: url(/images/q.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 40px;}

div.a {
	background-image: url(/images/a.gif);}

the problem is, if the text in my divs isn't long enough, then it doesn't stretch vertically and i lose the bottoms of my drop-caps. i've tried overflow:visible with no luck, and min-height doesn't seem to be supported by many browsers...

any suggestions?

 

[Rower_CPU]

if i'm using a background image in a div, how can i ensure the entire image displays, even if the container div isn't necessarily tall enough? i'm using this CSS to fake a drop cap (specifically, a Q&A-type setting). the images are approx. 36px square, so the padding leaves a nice margin for them to sit in.

div.q, div.a {
	background-image: url(/images/q.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 40px;}

div.a {
	background-image: url(/images/a.gif);}

the problem is, if the text in my divs isn't long enough, then it doesn't stretch vertically and i lose the bottoms of my drop-caps. i've tried overflow:visible with no luck, and min-height doesn't seem to be supported by many browsers...

any suggestions?

The only thing I can really think of is to do a min-height, but like you said, it's not well supported.

I do have an accessibility concern with that method of displaying the "Q" and "A" - you shouldn't indicate whether the text is a question or answer solely by graphical means. I'd actually try something like this method to put the drop cap in there and still have it degrade gracefully if CSS or images are turned off or someone is using an alternative browsing device.

 

[sonofslim]

yeah, i'd been wondering about the accessibility of it myself, but then i got caught up in trying to fix the problem. so thanks, that method does the trick nicely. and validates, to boot.

but just for the sake of curiosity: does anyone know of a way to solve the original problem?

 

[jeremy.king]

use an inline image (aligned left) in a table cell would work since a cell shouldn't be smaller than its content (unless defined in a height attribute), but thats not the answer you are looking for I would imagine. Everyone and their CSS

 

[Rower_CPU]

use an inline image (aligned left) in a table cell would work since a cell shouldn't be smaller than its content (unless defined in a height attribute), but thats not the answer you are looking for I would imagine. Everyone and their CSS

Everyone and their layout tables.

That still wouldn't work because with a drop cap the text is supposed to flow around the letter.

 

[sonofslim]

That still wouldn't work because with a drop cap the text is supposed to flow around the letter.

actually, in my original non-accessible CSS, the text didn't flow around the letter either. i kind of liked it that way. there was 40px padding on the left side of the div, and a 36px background image that sat inside that padding. so it wasn't really a true drop-cap. i could still get the same effect with nested divs (or really, any number of ways) but there was something so elegant about using a single div tag to do all the work.

 

[Rower_CPU]

actually, in my original non-accessible CSS, the text didn't flow around the letter either. i kind of liked it that way. there was 40px padding on the left side of the div, and a 36px background image that sat inside that padding. so it wasn't really a true drop-cap. i could still get the same effect with nested divs (or really, any number of ways) but there was something so elegant about using a single div tag to do all the work.

True. Another way I've seen lists like this handled would be a dl, dt, dd combo - that'd be fairly semantic and should give your enough leeway to style the individual parts.