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

Return to top
Have more questions? Submit a request

6 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
    Community Moderator

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

    0
  • Nicole S. - Community Manager
    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 S. - Community Manager
    Zendesk Community Team

    Glad to hear it, Emily!

    0

Please sign in to leave a comment.

Powered by Zendesk