Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Rounded, even expansion of cells - can get 1 to expand but not the others

    I'm trying to have each cell have rounded images and expand the height but this is what I keep getting:



    Each rounded images is marked in orange. I've read many things before coming here for help and none have worked. As you can see, I can get the middle cell to expand to my subforums but I can't get the other 2 cells to expand with it.

    Any help would be kindly appreciated.
    Last edited by AzzidReign; 01-02-2008 at 10:07 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello AzzidReign,
    a picture doesn't help us much.
    We'll need to see the code. A link would be easiest.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    hook it up with a link or some code brotha!

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry guys, here it is. It's changed a little bit from that image now but it's essentially the same. Here's the new image:



    Here's the html code:
    Code:
    <tr align="center">
       <td>
    <div class="status_custom">
    <img style="float: left; vertical-align:top" src="images/se7ensins/misc/upper-left.png" alt="" border="0" />
    <img style="float: right; vertical-align:top" src="images/se7ensins/misc/upper-right.png" alt="" border="0" />
    </div>
    <img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
    
    <img style="float: left;" src="images/se7ensins/misc/lower-left.png" alt="" border="0" />
    <img style="float: right;" src="images/se7ensins/misc/lower-right.png" alt="" border="0" />
    
    </td>
       
    <td class="cornerscontent" align="$stylevar[left]" width="584" id="f$forum[forumid]">
    
    <div class="middlecontent">
    <div class="topcorners">
    <img style="float: left;" src="images/se7ensins/misc/upper-left.png" alt="" border="0" />
    <img style="float: right;" src="images/se7ensins/misc/upper-right.png" alt="" border="0" />
    </div>
    
    <div class="middlecontent">
    
    
    
    
           <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 class="topcorners">
    <img style="float: left;" src="images/se7ensins/misc/lower-left.png" alt="" border="0" />
    <img style="float: right;" src="images/se7ensins/misc/lower-right.png" alt="" border="0" />
    </div>
    
    </div>
       
    </td>
    
       <td class="cornerscontent" nowrap="nowrap">
    
    <img style="float: left;" src="images/se7ensins/misc/upper-left.png" alt="" border="0" />
    <img style="float: right;" src="images/se7ensins/misc/upper-right.png" alt="" border="0" />
    
    
    $forum[lastpostinfo]
    
    
    <img style="float: left;" src="images/se7ensins/misc/lower-left.png" alt="" border="0" />
    <img style="float: right;" src="images/se7ensins/misc/lower-right.png" alt="" border="0" />
    
       </td>
    </tr>
    $childforumbits
    Here's the css used:
    Code:
    .topcorners {
    background-color: #393939;
    }
    .middlecontent {
    background: #393939;
    }
    .cornerscontent {
    background: #393939;
    border-top: #2c2c2c 3px solid;
    border-right: #2c2c2c 3px solid;
    }
    .status_custom {
    	background-color: #393939;
    	border: 1px solid #2c2c2c;
    	vertical-align: top;
    }

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The following code is revolting and has only been tested in Mozilla Firefox.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>130579</title>
    		<style type="text/css">
    			tr, td {
    				height:100%;
    			}
    
    			td > div {
    				position: relative;
    				height: 100%;
    				z-index: 0;
    				min-width: 32px;
    			}
    			
    			td > div > div {
    				padding: 16px;
    			}
    			
    			div.cnr > img {
    				position: absolute;
    				z-index: -1;
    			}
    
    			img.tl {
    				top: 0;
    				left: 0;
    			}
    
    			img.tr {
    				top: 0;
    				right: 0;
    			}
    
    			img.bl {
    				bottom: 0;
    				left: 0;
    			}
    
    			img.br {
    				bottom: 0;
    				right: 0;
    			}
    		</style>
    	</head>
    
    	<body>
    		<table>
    			<tbody>
    				<tr>
    					<td>
    						<div class="cnr">
    							<img class="tl" src="130579/tl.png">
    							<img class="tr" src="130579/tr.png">
    							<img class="bl" src="130579/bl.png">
    							<img class="br" src="130579/br.png">
    						</div>
    					</td>
    				   
    					<td>
    						<div class="cnr">
    							<img class="tl" src="130579/tl.png">
    							<img class="tr" src="130579/tr.png">
    							<img class="bl" src="130579/bl.png">
    							<img class="br" src="130579/br.png">
    							
    							<div>
    								<div>Text in here</div>
    								<div>Text in here</div>
    								<div>Text in here</div>
    							</div>
    						</div>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • Users who have thanked hemebond for this post:

    AzzidReign (01-03-2008)

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a bunch man! I'll test it out and let you know how it goes. I greatly appreciate this.

    I just tried it and since it's on a forum, all my columns expanded really large and it would be a nightmare to go through all the templates and fix that. I guess I'll have to wait until they go table-less here in the next year (hopefully).

    Thanks for you help though!
    Last edited by AzzidReign; 01-03-2008 at 07:52 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •