Float Property Not Working (Specialization)

[bpopp]

I'm specializing DITA to allow for a multi-column task list. I'd like for the eventual output to look like:

Code: Select all

1) Motherboard                 Tech              Remove

                                L                 Store 



2) Power Supply                Tech                Test

In HTML I'd use CSS that looked something like this:

Code: Select all

div { clear: both;  }

span.first { display: block; width: 100px; float: left; }

span.second{ display: block; width: 100px; float: left;  text-align: center; }

span.third{ display: block; width: 75px; float: left;  text-align: right;}

In my Oxygen CSS file, however, the floats don't seem to be working. Here's what I currently have:

Code: Select all

*[class~="procedure/proccommand"] {

    font-weight: bold;

    display: block;

    font-family: Verdana;

    font-size: 1.1em;

    padding-left: 1em;

    color: green;

    float: left;



}



*[class~="procedure/proccrewmember"] {

    display: block;

    text-transform: uppercase;     

    font-weight: bold;

    font-family: Verdana;

    font-size: 1.1em;

    float: left;

    width: 50px;

}

*[class~="procedure/procresponse"] {

    display: block;

    font-weight: bold;

    font-family: Verdana;

    font-size: 1.1em;

    float: left;

    width: 100px;

    text-align: center;

}

In the output, each element is pushed to the next line (as if the float is being ignored). Do floats not work in the editor? If not, is there another way to get this output? I've also tried making the elements display inline, but I haven't found a way to make the columns line up correctly using this method.

Thanks for any help,

Brian

[sorin_ristache]

Hello,

I don't know how proccommand and proccrewmember are defined. Please send us your DITA task specialization DTD, a sample XML task document and your CSS in order to understand how your specialized XML task is structured and to see what you tried in your customized CSS.


Regards,
Sorin

[bpopp]

Done. Thanks for the help.

[sorin_ristache]

Thank you for the files. Basically you should display a procactions element as a table, procaction as a table row, and proccrewmember and procresponse as table cells, something like:

Code: Select all

*[class~="procedure/proccommand"] + *[class~="procedure/procactions"] {

    display: table;

    . . .



}





*[class~="procedure/proccommand"] + *[class~="procedure/procactions"] {

    display: table;

    border-top: thin solid black;

    . . .



}





*[class~="procedure/proccrewmember"],

*[class~="procedure/procresponse"] {

    display: table-cell;

    . . .



}

The DTD of your specialized DITA task allows independent action elements (not enclosed by an actions parent) and that creates a difficulty in rendering such an action as a table row. I suggest enforcing in the DTD the inclusion of any action in an actions parent so that an action can always be rendered as a table row in the CSS.

proccommand cannot be rendered inside the table because it resides outside the table element (actions). I suggest leaving it above the table, as a table caption, rendered as a CSS block.

I think the show-stopper might be the inability to force (in CSS) a procresponse to be rendered to the second column when it is not preceded by a proccrewmember sibling on the same table row (procaction). I suggest enforcing in the DTD both a proccrewmember and a procresponse inside a procaction even if it is an empty proccrewmember.


Regards,
Sorin