[Gadifae]

For an image gallery I'm designing, I am trying to set the background color of variable-length strings contained inside <p> tags. Setting the background color of <p> is not the problem, the problem is I have been unable to have the color extend to only the length of the string, not to the length of the paragraph tag.

That is, if I have a string 50 pixels wide contained within a paragraph tag contained within a block that is 150 pixels wide, the background color stretches the full 150 pixels instead of limiting itself to only the 50 pixels of text.

Now, my understanding is the width of a paragraph is determined by the width of its containing element. I am also under the (perhaps incorrect?) impression that by setting the width of a container element to "auto" will make the width of the container equal to the width of whatever it contains.

One partially successful solution was to use the span tag...

Code:
<p><span class="black">the background is black here</span</p>

...which gave me the black background I sought but, unfortunately, when used with the JavaScript that controls the display of images and captions on my page, that approach fails. Modifying that code to...

Code:
<p><span class="black" id="desc">placeholder</span></p>

...lets the JavaScript run and sets the background to black, but unfortunately it extends only to the width of the word "placeholder" instead of expanding for wide strings and shrinking for short ones.

What I am working with can be found here...

http://www.diagram32.com/example/example.html

...where I am trying to get the text beneath the image to display in a black bar with 10 pixels of of padding on both ends and 4 pixels on the top and bottom. The span class for that block is...

Code:
span.black
{
	background: black;
	color: #ffffff;
	padding: 4px 10px 4px 10px;
}

Anyone care to take a crack at helping me figure out how to get this to work?

Regards,

G.

[Synotic]

It seems to be that Safari doesn't recalculate the width when the text data changes... if you check in Firefox.. it should work. I've had this problem before so I'd also be interested in any solution.

For what it's worth, you don't have to give the id to the span... you can stick with:

<p id="desc"><span>caption</span></p>

and simply modify the javascript block:

Code:
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}

to

Code:
if (whichpic.title) {
document.getElementById('desc').childNodes[0].childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}

Note the addition of the second "childNodes[0]" in each line. This simply makes it go one level deeper and reach your span. Although in this case it doesn't really matter, I suppose it can still be useful.

[Gadifae]

Originally posted by Synotic:
It seems to be that Safari doesn't recalculate the width when the text data changes... if you check in Firefox.. it should work. I've had this problem before so I'd also be interested in any solution.

Thinking off the top of my head here, but might using a PHP inclulde solve the problem with Safari not recalculating the width? It seems like it might since the PHP include, as I understand its function, impacts what the server will send down to the browser? That is, the include statement itself won't appear in the HTML the viewer sees, only the text that was included? Correct?

I tried a quick modification of the JavaScript to see if I could test such a theory by having each link send a different PHP script but without success.

I must admit a certain ignorance about what nodes and such are in JavaScript. Pointers to explanatory documents about such things would be appreciated, as would any tips on how to modify the script so it would work with .php, .html or .txt documents.

Thanks for the suggestion on how to modify my the JavaScript so for the Desc variable.

B.