Comments re. individual cell properties not overriding owner table Class setting

Last post 09-01-2007, 11:46 AM by fredd. 1 replies.
Sort Posts: Previous Next
  •  08-31-2007, 6:57 PM 33159

    Comments re. individual cell properties not overriding owner table Class setting

    Hi Adam,
     
    Because of so many problems with tables, we decided that we will default a table with certain settings for the <TABLE> and <TD> tags by using a style sheet and default settings for <TABLE> in constant.js.
     
    So, we have set constant.js so that tables default with this: <TABLE class=sample style="FONT-SIZE: 12px; FONT-FAMILY: Verdana" cellSpacing=0 cellPadding=0 width=500 border=0>
     
    The tag references class=sample, and that's contained in the <HEAD tag: <LINK href="class/qtable.css" type=text/css rel=stylesheet>
     
    qtable.css contains:
     
    table.sample td {
     padding-bottom: 0px;
     width: 150px;
     padding-top: 0px;
     text-align: left;
     vertical-align: top;
     align: left;
    }
    OK, so the theory is that the table will start with the defined structure and each <TD will take the default characteristics in the style sheet.
     
    That works well for us and overcomes a lot of the problems with CE tables.
     
    However, when the user tries to format an element within the table (like a specific cell), the overrides are ignored by CE.
     
    We have the below HTML code. Note the link to qtable.css and the <TD align=right>4</TD> in the content area. The align=right is being ignored by CE because there is a td style setting in qtable.css.
     
    <HTML>
        <HEAD>
            <LINK href="class/qtable.css" type=text/css rel=stylesheet>
        </HEAD>
        <BODY style="FONT-SIZE: 12px; FONT-FAMILY: Verdana" bottomMargin=50 leftMargin=75 topMargin=50 rightMargin=50>
            <DIV>&nbsp;</DIV>
            <DIV>&nbsp;</DIV>
            <DIV>
            <TABLE class=sample style="FONT-SIZE: 12px; FONT-FAMILY: Verdana" cellSpacing=0 cellPadding=0 width=500 border=0>
                <TBODY>
                    <TR>
                        <TD>1</TD>
                        <TD>2</TD>
                        <TD>3</TD>
                        <TD align=right>4</TD> <<This is being ignored by CE
                    </TR>
                    <TR>
                        <TD>5</TD>
                        <TD>6</TD>
                        <TD>7</TD>
                        <TD>8</TD>
                    </TR>
                </TBODY>
            </TABLE>
            </DIV>
            <DIV>&nbsp;</DIV>
            <DIV>&nbsp;</DIV>
        </BODY>
    </HTML>
     
    The problem is that <TD align=right>4</TD> is supposed to display right-aligned, but is being overridden by the class's td settings which aligns it left.
     
    What we need is the other way around. Is that possible? Could CE first apply the settings of the style sheet, then override any of those settings where the user has used the Table Wizard to change?
     
    If I remove the class=sample in the <TABLE tag, the cell correctly aligns right...
     
    That's not all. The class file sets the width at 150px for td, but when I select Table Properties and then try to set the cell's properties to another width - for example, 200, CE shows the width as 200, but ignores the setting when I return to the content. Again, CE is allowing the style to override the individual settings, instead of the other way around..
     
    How to fix these problems?
     
    FredD
     
     
  •  09-01-2007, 11:46 AM 33163 in reply to 33159

    Re: Urgent: table bug: setting cell properties doesn't override table Class setting

    Update on this issue:
     
    I read through the W3C guidelines on CSS and it appears that the author's style settings always take precedence over the reader's settings. In other words, in a situation like this:
     
    <style type="text/css">
    table.sample td {
    padding-bottom: 0px;
    width: 150px;
    padding-top: 0px;
    text-align: left;
    vertical-align: top;
    align: left;
    }
    </style>
     
    <table class="sample" style="font-size: 12px; font-family: Verdana" cellspacing="0" cellpadding="0" width="500" border="0">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td align="right">4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
        </tbody>
    </table>
     
    The table will always take the td specifications in the style settings.
     
    So in our problem we need a way to set the defaults of the <td> tag the same way we can set the defaults of the <table> tag in constants.js...
     
    Any thoughts on this?
    FredD
View as RSS news feed in XML