Why don’t table settings in the editor match the published article?

Return to top
Have more questions? Submit a request

7 Comments

  • Chuck Martin

    Brett, thanks for the article, but it is confusing to me. As far as I can tell, when I am making changes in the table settings, it looks like it is adding local CSS. For example this is the code that Guide wrote when I added a border and padding to the whole table: <table border="1" cellpadding="2px">

    By definition--the "C" in "CSS"--local style rules should always "win" over embedded (styles defined in the page) and referenced (external stylesheet referenced from the page) style rules. This article seems to be saying that local rules are superseded by Guide theme CSS. Can you clear up this confusion for me? Thanks!

    1
  • Stassa Miller

    I would like to know as well, please:  here is my code:

    0
  • Nicole Saunders
    Zendesk Community Team

    Chuck Martin and Stassa Miller

    I asked the Guide product manager about this, and here's what he said: 

    "CSS uses something called Specificity Weight to determine which classes and properties apply to an element. (See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more info.)  We don’t do anything special beyond what they’re able to see in the browser. So it could be that they need to make a particular rule more specific to override some existing styles."

    I hope that helps, but let me know if there are further questions. 

    -1
  • Chuck Martin

    I was going to point to the W3c specification, but this article summarizes the issue:

    "Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity."

    The article also goes on to describe the !important rule. In the CSS I developed for our documentation, I initially was using !important in places to try and force things that I could not get to work otherwise. But as this article also says, this is bad practice, and I managed to excise them and figured out the correct cascade to get the formatting I wanted in my outputs. 

    I hope that Zendesk isn't using !important in its CSS for Guide articles. 

    I would add that the PM seems to be wrong. They say "So it could be that they need to make a particular rule more specific to override some existing styles." But unless the selectors in the Zendesk CSS are using the !important rule, the inline CSS is more specific. And should override any other rules. Specifically (you see what I did there), inline styling should be overriding anything in style.css. The article is saying the exact opposite.

    1
  • Emily White

    Oh, this article made me so happy. After so much frustration trying to edit the tables in the articles, I did this and it worked.

    0
  • Nicole Saunders
    Zendesk Community Team

    Glad to hear it, Emily!

    0
  • Stephen A Kairys

    Hi,

    I'm struggling with table padding: there is NO whiitespace between the left-hand border and the content. And don't want to change the global CSS b/c it could affect articles.

    This is a total long-shot, but where can I find documentation for the table properties dialog box?

    And for the Cell Properties Dialog Box?

    And the Row Properties dialog box:

    For the life of me, I just don't understand why what we see in the editor does not match what renders in published content. Frustrating and time-consuming. Thanks.

    0

Please sign in to leave a comment.

Powered by Zendesk