alt1 and alt2 help - using images

[AzzidReign]

I'm trying to have each cell have rounded expandable images but this is what I keep getting:



I have the rounded images shown in red to see what the problem is exactly. When the middle column of the row expands in height, the other 2 columns in the row do not.

This is my code:

<tr align="center">
	<td class="alt2">
<div class="bl3"><div class="br"><div class="tl"><div class="tr2">
<img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
</div></div></div></div>
</td>
	<td class="cell_bg" align="$stylevar[left]" width="584" id="f$forum[forumid]">

<div class="bl3"><div class="br"><div class="tl"><div class="tr2">

		<div style="padding-left:10px">
			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]" style="font-size:16px; font-family:Arial, Helvetica, sans-serif"><strong>$forum[title]</strong></a>
			<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
		</div>
		<if condition="$show['forumdescription']"><div class="smallfont" style="padding-left:10px">$forum[description]</div></if>
		<if condition="$show['forumsubscription']"><div fround="smallfont" style="padding-left:10px"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
		<if condition="$show['subforums']"><div class="smallfont" style="margin-top:3px; padding-left:10px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

</div></div></div></div>

	</td>

	<td class="cell_bg" nowrap="nowrap">
<div class="bl3"><div class="br"><div class="tl"><div class="tr2">
$forum[lastpostinfo]
</div></div></div></div>
        </td>

</tr>
$childforumbits

This is the css to go with it:

.cell_bg { background: #2c2c2c; }
.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939; }
.bl2 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939;  padding:10px}
.bl {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat; }
.br {background:url(http://www.sitepoint.com/examples/roundcorners/br.gif) 100% 100% no-repeat;  }
.tl {background:url(http://www.sitepoint.com/examples/roundcorners/tl.gif) 0 0 no-repeat}
.tr {background:url(http://www.sitepoint.com/examples/roundcorners/tr.gif) 100% 0 no-repeat}
.tr2 {background:url(http://www.sitepoint.com/examples/roundcorners/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

Does anyone know a solution to this problem? I would greatly appreciate it since I've been trying various things for the past week now to get it to work.

Thank you

[5th-Level]

Looks like all you need is a color to fill in or an image to make it a glossy feel such as

url(images/blah/blha.gif) repeat-x top
url(images/blah/blah.gif) repeat-x bottom

[AzzidReign]

No, I don't need a glossy feel. I dont think you understand what I'm asking. I want all of my cells to have the rounded images. I've only been able to do it with a fixed image but when I start to add sub-forums, the subforums break the plane of the image and it looks really bad.

I need each of the cells to expand according to the largest (biggest in height) cell in the row. As you can see, each cell is doing it's own thing. I have 4 images per cell, which is why there are those orange rounded images in each corner, just to show you exactly where the images are being placed.

[5th-Level]

add the positions such as

.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939 top left; }

that will make the corners fixed in the cell

[Aken]

Originally Posted by 5th-Level

add the positions such as

.bl3 {background:url(http://www.sitepoint.com/examples/roundcorners/bl.gif) 0 100% no-repeat #393939 top left; }

that will make the corners fixed in the cell

This will not help for two reasons:

1) The position of the background is already defined with "0 100%".
2) The background position is not what is causing the problem.

AzzidReign: Your problem is that the content for each section is now residing in a <div> element. Unfortunately for you, a <div> element does not automatically assume the dimensions (specifically height) of its parent element (in this case, the table cell) unless given the appropriate CSS attributes.

You will have to define a height for the table cells on your homepage, and then add a height: 100%; attribute to each of your CSS classes. The reason you have to define a height for the table cells is because the CSS height: 100%; doesn't work if it doesn't know what the total height is. It will take away some of the effectiveness of dynamic content since everything will have to be the same height, but it will add some uniformity and it will make your style work properly.

[AzzidReign]

Yeah, I was able to get it to fit to "one" size but I needed it to be able to expand to the subforums I have Oh well, I guess I'll be like Wendy's and go square. :P

Thanks for the help guys.