Indenting TABLE DIV element

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • bigteejay
    New Member
    • Dec 2007
    • 2
    #1

    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.dt d">")... 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...
    Code:
    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 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.
    Tags: indent div
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      I don't think you can get it to work the way you want to without access to the XHTML document.

      - Death

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          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.

            Comment

            • bigteejay
              New Member
              • Dec 2007
              • 2
              #4
              Here is what I ended up using...

              Code:
              /* 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, 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!

                Comment

                Previous template Next
                Working...