Indent parent elements only [Archive]

bigteejay

12-03-2007, 08:29 PM

I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know).

It looks like this initially...

http://img146.imageshack.us/img146/3121/noindentje2.jpg

...and I'm trying to indent the entire element below the header text like so...

http://img519.imageshack.us/img519/3973/indentdb2.jpg

...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe).

I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied).

What I've tried thus far is to use either of the following...

TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}

I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something?

I would really appreciate any assistance possible.

boogyman

12-03-2007, 09:30 PM

this looks like everything has shifted but the first "headers"

It would be better if we saw the code, not the output to tell you exactly which element(s) need to be adjusted, however its most likely that you will just need to apply the padding-left: 25px; to the table headers row, an example would be

<table>
<caption>Select 1 option in each row</caption>
<tr>
<th>Description</th>
<th>Never</th>
<th>Rarely</th>
<th>Occasionally</th>
<th>Fairly Often</th>
<th>Often</th>
</tr>
<tr>
<td>a. desc</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
</tr>
<tr>
<td>b. desc</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
</tr>
<tr>
<td>c. desc</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
</tr>
<tr>
<td>d. desc</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
<td>--radiobox--</td>
</tr>
</table>

<style type="text/css">
table td, table th {padding-left: 25px;}
</style>

oh as a note... if you cannot seem to figure it out and you post code... please wrap it with [code] tags without the dot

bigteejay

12-04-2007, 01:08 AM

Here is what I ended up using...

/* Handle indentation of Item questions */
body form div div span div span div table tbody tr td div table { margin-left: 25px; } /* matrix */
body form div div span div span div table tbody tr td div div table { margin-left: 25px; } /* all others */

...I copied the XPath expression produced by Firebug, and then replaced the "/" element seperators with spaces (descendents versus children). It's specific enough for both types that I needed to deal with that it affects only those.

I considered posting the html/css produced by the app (and even started creating a version to do so), but it was so ugly as to make it not even really worthwhile.

Thanks for your response!

boogyman

12-04-2007, 01:52 PM

Here is what I ended up using...

/* Handle indentation of Item questions */
body form div div span div span div table tbody tr td div table { margin-left: 25px; } /* matrix */
body form div div span div span div table tbody tr td div div table { margin-left: 25px; } /* all others */

WOW, just WOW.... not even looking at the code, I cant tell you have a lot of overused codes, highlighted in blue