Bug 127652 – CSS bug -> h2:before { padding-right: 0.3em; }

• Component: CSS
• Status: RESOLVED WORKSFORME

[Kim Walisch]

Created attachment 222276 [details]
All <h2> are not properly aligned on first load

When my website (http://primesieve.org) is loaded for the first time all <h1>, <h2>, <h3>, … are not properly aligned. Now if I hit the refresh button the bug disappears i.e. all <h1>, <h2>, <h3> are properly aligned. Below is the CSS (from http://primesieve.org/stylesheets/stylesheet_mac.css) that causes the bug:

#main-content h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, serif; 
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #474747;
} 
#main-content h2:before {
  content: "//";
  color: #9ddcff;
  padding-right: 0.3em;
  margin-left: -1.33em;
}

It seems to me that 'padding-right: 0.3em;' and 'margin-left: -1.33em;' are causing the bug. The bug is not only present on my website but on all websites that use the Architect theme by Jason Long (generated by GitHub Pages).

The bug is present in both Safari and Google Chrome. The bug is not present in Firefox and Internet Explorer.

[Brent Fulgham]

We don't see an issue with this site at present, though it may have changed in the many years since you filed this. If you believe there is still an issue, could you please REOPEN this bug with a small test case illustrating the issue?