Text overlay issues

HTML & CSS
1

What I am trying to do is place an image inside a div and then use CSS to write over the image.

This is the page:

http://www.gameguidecentral.com/2010/08/21/kane-lynch-2-dog-days-2/

It works on my other site swearingatvideogames.com but on gameguidecentral.com the text is left aligned and only the size of the text.

It should be centered and 100% width. I’ve also tried changing things like font color and height and it doesn’t do anything. I don’t know if it’s getting overwritted by something else.

I can change the boxgrid attributes but I can’t seem to do anything to boxcaption

I want the text on the bottom of the images to be centered, the opaque background to 100% wide and the text color to be white.

div.boxgrid{
	width: 228px;
	height: 115px;
	margin: 1px;
	float:left;
	background:#161613;
	border: solid 2px #666;
	overflow: hidden;
	position: relative;
	text-align: center;
}

div.boxgrid img{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

div.boxcaption{
	float: left;
	position: absolute;
	background: #000;
	height: 20px;
        font-size: 9pt;
       *width: 100%;
	opacity: .8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.captionfull .boxcaption {
	top: 20px;
	left: 0;
}

.caption .boxcaption {
	top: 98px;
	left: 0;
}
2

I think I had a space or something weird on the width because deleting it and re-writing it it works now.

Where would I put text coloring in this? I put color: #FFFFFF; in .boxcaption and nothing changes.

3

I don’t know how the * got on the code part but it’s not my site.

Do you mean for me to take out the position:absolute? I did that and then it throws the text way up to the top.

Unless I misunderstood what you think I should do neither of these two changes help.

It’s weird because it works on my other site perfectly. So I don’t know what is going on.

4

Hi,
Remove the star from your width:100%; so good browsers can have the width.
There is no need to float an AP element either, the AP wins out and the float is ignored. An AP element will shrinkwrap like a float does when no width is set, that’s why your BG does not extend the full width.


div.boxcaption{
    [COLOR=Red]/*float: left;*/[/COLOR]
    [COLOR=Blue]position: absolute;[/COLOR]
    background: #000;
    height: 20px;
    font-size: 9pt;
   [COLOR=Blue] width: 100%;[/COLOR]
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

You got your top and left positions here so that positions them as you intended.


.caption .boxcaption {
    top: 98px;
    left: 0;
}
5

Yep. I figured it out right after I posted. Thank you so much for your help. :slight_smile:

6

No, I said to remove the Float not the position:absolute;

I highlighted what you needed in Blue and commented out the float in Red. :wink: