471,627 Members | 1,912 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,627 software developers and data experts.

Indenting TABLE DIV element

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...

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

...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...
Expand|Select|Wrap|Line Numbers
  1. TABLE DIV {position: relative; left: 25px;}
  2. TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox, is there a way to make the CSS code by 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.
Dec 3 '07 #1
3 6100
Death Slaught
1,137 1GB
I don't think you can get it to work the way you want to without access to the XHTML document.

- Death
Dec 3 '07 #2
7,435 Expert 4TB
Look into CSS Selectors, particularly the table which shows the various options about half way down. Look at the pseudo classes and pseudo elements in particular.
Dec 3 '07 #3
Here is what I ended up using...

Expand|Select|Wrap|Line Numbers
  1. /* Handle indentation of Item questions */
  2. body form div div span div span div table tbody tr td div table { margin-left: 25px; } /* matrix */
  3. 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, IE didn't seem to like the "children" syntax/selectors). 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!
Dec 4 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by bob | last post: by
4 posts views Thread by Simone Battagliero | last post: by
7 posts views Thread by slitvinov | last post: by
7 posts views Thread by Harrie | last post: by
reply views Thread by D. Shane Fowlkes | last post: by
3 posts views Thread by David Veeneman | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.