bad formatting for node.js API on firefox

[jmarca]

Hi I couldn't figure out where the node api docs repo is, so hopefully this bug report can be redirected to the right place.

I love the node.js API docs. Stellar job there for years. However, the latest revision is quite unusable under firefox (42.0, running on slackware-current).

Here is a screen shot. Note that several words worth of left hand content are obscured by the menu column:

As you might expect, the API docs look fine under Chromium (version 46.0.2490.71), with the content properly not hiding underneath the menu.

Since I use firefox, not chromium, and since the website should be legible no matter the browser, it would be great if the API site's styles could be fixed.

I'd be happy to hack away, but again, I can't find the repo to pull and edit.

Regards,
James

[Trott]

/cc @nodejs/website

[therebelrobot]

I'm pretty sure this is being maintained over at nodejs/docs by the @nodejs/documentation team, as opposed to the website WG. I could be wrong though.

[silverwind]

The stylesheet in question is at https://github.com/nodejs/node/blob/master/doc/api_assets/style.css

As for this issue, I cannot reproduce in Firefox 42 and 44 on Windows, but it looks like a miscalculation between em and px units. Does this CSS work, @jmarca?

#column1.interior {
    border-left: 234px solid #f2f5f0;
}

[jmarca]

@silverwind yes indeed that works.

And the response times here are astonishing. Great work.

[silverwind]

Thanks, filed nodejs/node#3948 to fix this!

[jmarca]

One thing I noticed playing around is that if I change the body font-size style from 62.5% to 100%, then the formatting of the column 1 is fine at 13em.

(But I only know enough about CSS to annoy designers)

[silverwind]

@jmarca did you set a custom default font size in Firefox? (Options - Content - Fonts & Colors - Advanced)? Also, I'd be interested if the bug shows when running in Safe Mode.

[jmarca]

@silverwind I only have a minimum font size of 10 set, otherwise I allow pages to set their own fonts and sizes. Unchecking the minimum font size made no difference.

What is safe mode? Is that a firefox setting?

[silverwind]

@jmarca yes, go to Menu - Help - Restart with Add-ons Disabled. This will start Firefox in Safe Mode, so we can make sure no Extensions/Settings are interfering.

[jmarca]

Thanks. Restarted in safe mode and the same broken layout (main content under left hand menu)

[jmarca]

Yeah it seems on my machine firefox computes the 13em border width to 134px, while chromium translates 13em to 234px. But with the body font size style changed to 100%, then firefox computes 13em as 234px.

I've no idea which browser is doing the right thing here, but chromium thinks the font size of the word "index" at the top of the page is 14.4px, while firefox with the 62.5% body font size style set thinks the word "index" is 9px, but when bfs is set to 100%, it also thinks index is 14.4px font size.

[silverwind]

@jmarca I still don't see this bug in any of my Firefox installations. Could you give it a try using a fresh Firefox profile (backing up your old one of course)?

[jmarca]

As I noted in the other thread. Not a bug, my bad. A fresh firefox profile makes the layout issue go away. Accumulated cruft somewhere along the line I guess.