Firefox – code not aligned with row numbers

Viewing 1 replies (of 1 total)
  • codefan

    (@codefan)

    9 years, 6 months ago

    Hi Randomizer71,

    I encountered the same issue. Misalignment in Firefox, looking good in Chrome. So, what’s going on?

    In my case it turned out that an interference occurred between a Bootstrap-based theme and the SyntaxHighlighter plugin. Both use a CSS element named container thus mixing their CSS attributes, unintentionally I think.

    With Bootstrap a Micro clearfix hack comes in and that causes the problem in combination with a vertical-align:baseline attribute delivered by SyntaxHighlighter. This leads to the Firefox issue.

    As a workaround put the following CSS in a style sheet that is used by your theme:

    .syntaxhighlighter .code .container:before {
    display: block;
}

    That could be the style.css file in your theme’s root directory. Ensure that the CSS really gets applied.

    More details including examples can be found in this article: Clearfix interfering with vertical-align.

Viewing 1 replies (of 1 total)
  • The topic ‘Firefox – code not aligned with row numbers’ is closed to new replies.