Cell widths in layout

[Stereo Steve]

I' know I'm being a div here but I'm working on a new product layout for v9. I have an image which is 130x180 and some text. The main product window is 580 wide.

So, I've got

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>image</td>
<td>text</td>
</tr>
</table>

This creates the image in the left cell and the text in the right. Fine, but I want the left hand cell to be narrower as it's 290 (50%) and the image is only 130.

Changing to <td width="200"> or <td width="35%> doesn't seem to do anything, the cells stay equal which makes me think there is something over-riding the width command. My brain has stopped working so what's the deal here?

PS: I have searched the forum.

[TraceyHand]

I' know I'm being a div here

a 'div'?
lol

Actually, you're using a table

have you tried specifying the width of both <td> tags?

Don't suppose you have it uploaded, do you?

[Darren B]

a 'div'?
lol

that was poor tracey, mind you why dont you use divs instead of tables might suit your needs better <div style="width: 130px;"> obviously you will need to add a little more css to the layout

D

[Stereo Steve]

The div bit was a semi pun because they make no sense to me. Looks like it's off to do some reading up on css I spose.

I have tried specifying the widths of both tables and I can make them narrower but cannot seem to make either of them wider than 290 (50%).

It's not uploaded yet, I'm just playing with some ideas I've had for layouts and will probably go live with the first patch of v9.

[Stereo Steve]

I wanted to use tables because I want the text to be in a definite cell and not wrapping around anything. I'm putting the add to cart etc. underneath the image and text in a fixed format a bit like svp.co.uk do on their product pages so if I have more text or less text the add to carts will be driven down or just stay in place and not creep up to the right of the image if you know what I mean. The table has 2 cells in row 1 and 1 cell in row 2 to achieve this result.

Does that make any sense? I really have not looked into css yet but I guess I'm going to need to. We've always just partially modified the layouts as they were but now we want a bit more.

[Duncan Rounding]

What you have done should have worked.
Why not try the same thing on your v8 site and then we can see the underlying code - or at least on your v9 site you can view the source on the preview in firebug and check what's going on.

[Stereo Steve]

Nah, doesn't work in v8 either. Here's the code. I've been messing with this layout for a while so should maybe start again. It seems like there is a fixed line down the center of the first row and the right hand cell cannot enter it




<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">
<div class="product_list">
<div class="image_product">
<actinic:variable name="ProductImageLayout"/>
<br><actinic:variable name="ExtendedInformationLinks" />
</div>
<div>
</actinic:block>


<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" >
<div style="float: right;"><strong><span class="actrequired"><actinic:variable name="OutOfStock" /></span></strong></div>
</actinic:block>

</td>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
<div style="float: right;"><strong><span class="actrequired"><actinic:variable name="CatalogSuspended" /></span></strong></div>
</actinic:block>

</td>
<td width="350">
<actinic:variable formatting="font(Color|000000)" encoding="actinic" name="ProductDescription" />

</td>
</tr>

[TraceyHand]

Nah, doesn't work in v8 either. Here's the code. I've been messing with this layout for a while so should maybe start again. It seems like there is a fixed line down the center of the first row and the right hand cell cannot enter it




<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">
<div class="product_list">
<div class="image_product">
<actinic:variable name="ProductImageLayout"/>
<br><actinic:variable name="ExtendedInformationLinks" />
</div>
<div>
</actinic:block>


<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" >
<div style="float: right;"><strong><span class="actrequired"><actinic:variable name="OutOfStock" /></span></strong></div>
</actinic:block>

</td>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
<div style="float: right;"><strong><span class="actrequired"><actinic:variable name="CatalogSuspended" /></span></strong></div>
</actinic:block>

</td>
<td width="350">
<actinic:variable formatting="font(Color|000000)" encoding="actinic" name="ProductDescription" />

</td>
</tr>

Is the whole thing spanning the full width or not?
have you tried adding colspan="2" to this <td> tag?
Like Duncan says, it's hard to see why it isn't working when it's out of context.

[Stereo Steve]

Yep, it's the whole width of the middle section which is 580. If I set the image cell width to 150 then the image moves right over to the left as you would expect. But nothing seems to change the width of the text cell apart from making it narrower than 290.

I'm attempting to upload a test site now. See what happens.

[jont]

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">
<div class="product_list">
<div class="image_product">
<actinic:variable name="ProductImageLayout"/>
<br><actinic:variable name="ExtendedInformationLinks" />
</div>
<div>
</actinic:block>


<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" >
<div style="float: right;"><strong><span class="actrequired"><actinic:variable name="OutOfStock" /></span></strong></div>
</actinic:block>

</td>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
<div style="float: right;"><strong><span class="actrequired"><actinic:variable name="CatalogSuspended" /></span></strong></div>
</actinic:block>

</td>
<td width="350">
<actinic:variable formatting="font(Color|000000)" encoding="actinic" name="ProductDescription" />

</td>
</tr>

If that is the whole code you do not appear to have formed the table correctly .. or even closed the </table> ... there is an additional </td> in there and also a closing /block which has not been opened in that snippet.

[Stereo Steve]

OK, here's the test site. Please keep in mind this is just to test concepts and has no design work involved at all! It's based on the hotshot theme.

http://www.topdiscs.co.uk/acatalog/t...-dvp-2002.html

[jont]

there is an additional </td> in there

Using FF with Web Developer to show the table cells there is a table cell missing from the layout which will inevitably cause you issues.

[Stereo Steve]

Edit, will look into it, thanks.

[TraceyHand]

Actually Steve, aside from the points Jont has mentioned, from seeing it online, I think that it's the <td> in the next <tr> down that is pushing your image cell too wide.

Take a look at the cell holding your price/add to cart etc and change that to a colspan="2" (remove it from the productdescription one)

I think that might bring the width of your image cell in, visually.

[Stereo Steve]

Doh, spot on Tracy thanks. I was so busy looking at the top row I completely ignored the next one down! Sorted thanks. Sometimes you can't see for looking.