formatting image and text items in ranking question

Question

In a LS (9.8.0) study I have a ranking question with 4 items.

For each item I have a picture and 2 lines of text.

I want the picture to appear on the left, and the 2 lines of text to appear to the right of the image.

I want the 4 items to be aligned

I achieved this appearance when describing the items in an earlier text question by use of tables:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:30%" align="right"> <img src="[%GraphicsPath()%]9s6.jpg" alt="" border="0">  </td>
<td style="width:70%"align="left"> <b>item 1 line 1 <br> item 1 line 2
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:30%" align="right"> <img src="[%GraphicsPath()%]10s6.jpg" alt="" border="0"> 
</td>
<td style="width:70%"align="left"> <b> item 2 line 1 <br> item 2 line 2
</tr>
</table>

etc

This may not be elegant but it seems to work.

When I use this code - with each table as an item in the ranking question, the alignment goes awry.
The images are resized – even if I use the same image file the pictures are differently sized between items, the width assigned to the text column varies between items – end result the items are not neatly aligned /stacked up.

Any help to fix the ranking question would be much appreciated
Thanks, Dan

Comments

I haven't been able to observe the behavior you're describing on my end.  Would it be possible to share a .ssi demonstrating the problem to support@sawtoothsoftware.com?  Of course, sensitive or irrelevant information could be removed from the .ssi first.

---

Thanks Zachary, I'll email the file
Dan

Answer 1

Your table cell widths are being respected.  The problem is that the elements outside of the table aren't being constrained to have the same width.  Try adding this:

<style>
#[% QuestionName() %]_div .option_cell {
    width: 100%;
}
</style>

Comments

Thanks, that has fixed it.