7

I don't know if this is how it has been but I just want to ask. I went to Drupal today (for the first time) and noticed something in their privileges page. The privilege excerpt of some of the privileges were below the privilege instead of in front. This is a screenshot of some of them.

enter image description here

Is this how it has always been or is this a bug?

4
  • 1
    @Dukeling that's a bug, on Stack Overflow for example it's looking good. Commented Oct 29, 2013 at 11:14
  • 2
    CSS bug. On other sites (e.g. Stack Overflow) the "mainbar" is 735 pixels wide, on Drupal it's only 710 pixels so there's not enough room for the text causing it to wrap. Commented Oct 29, 2013 at 11:16
  • @Anna does the tag removal mean you were able to reproduce? :) Commented Mar 10, 2014 at 15:44
  • 2
    @ShadowWizard No, it means it got flagged and having read through Ilmari's answer, I'm on board with exploring the possibility of a fix.
    – Adam Lear StaffMod
    Commented Mar 10, 2014 at 15:45

2 Answers 2

1

I can reproduce this on Chrome 33 / Windows 7 if I edit the mainbar width in developer tools to be 700px instead of 710px:

Screenshot

10 pixels is not much of a safety margin, so I can easily believe that, for someone using a different OS font renderer and/or a slightly different set of available fonts, it might still happen at 710px.

The most reasonable fix for this bug that I can think of is to turn the silly pseudo-table into an actual table (since that's what it is — a tabular array of data). The semantically correct way to do this would require changing the HTML code to use actual <table>, <tr> and <td> tags, but in the meanwhile, here's a quick CSS hack:

.privileges-page #privilege-table {
    display: table;
}
.privileges-page .privilege-table-row {
    display: table-row;
}
.privileges-page .privilege-table-row div:not(.checkmark) {
    display: table-cell;
    padding: 1em 0.2em;
}

(Turning the .checkmark div into a table cell doesn't work right, since resizing it breaks the CSS sprite. The proper fix would be to wrap it in a <td>, but it seems that simply leaving it with the default styling works well enough, at least in Chrome.)

Ps. While waiting for an official fix, I've added the CSS rules suggested above into the Stack Overflow Unofficial Patch v1.10. They seem to work fine, and actually look somewhat better than the current styling in some ways. (For example, they make the line spacing for earned and unearned privileges consistent.)

1
0

I can't reproduce in any browser I've tried:

  • Chrome

Chrome no repro

  • Firefox

Firefox no repro

  • IE

IE no repro

2
  • @Skliwz: I can. It seems to depend on the exact width of the rendered text, which in turn depends on the font and rendering method (ClearType, etc.) in use. 710px is just about in the area where things start to break for some users. Commented Feb 23, 2014 at 15:09
  • I'm sure it was broken indeed before and now confirm it's OK so I'd say it got silently fixed at some point. Commented Mar 17, 2014 at 10:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .