Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: fix misaligned columns on Firefox/Linux #3948

Closed
wants to merge 1 commit into from

Conversation

Projects
None yet
6 participants
@silverwind
Copy link
Contributor

commented Nov 21, 2015

13em and 234px are equivalent here. By using the same unit as is used to specify the width of the TOC, we can work around a presumed Firefox layout bug, see nodejs/help#32.

@therebelrobot

This comment has been minimized.

Copy link
Member

commented Nov 21, 2015

+1

@jmarca

This comment has been minimized.

Copy link

commented Nov 21, 2015

For what it's worth, as I commented on the nodejs/help#32 thread, if I change the body font size style from 62.5% to 100% it looks fine. To be explicit, I changed:


body {
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  color: #3a3a3a;
  background: #fcfefa;
}

to


body {
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
  color: #3a3a3a;
  background: #fcfefa;
}

then 13em looks fine:

node_api_firefox2

@silverwind

This comment has been minimized.

Copy link
Contributor Author

commented Nov 21, 2015

Still pretty sure we're dealing with a browser bug here. We arrive at 18px font size through:

body { font-size: 62.5% } /* 10px */
#content { font-size: 1.8em } /* 18px */

Setting body to 100% would make the text way too large, at 28.8px 😉.

@jmarca

This comment has been minimized.

Copy link

commented Nov 21, 2015

Okay, you are right, not a bug! I restarted firefox with a new profile and the page renders fine. Must be some sort of cruft crept in over the years.

Sorry for the noise, thanks for helping me fix my firefox setup, I guess...

@silverwind

This comment has been minimized.

Copy link
Contributor Author

commented Nov 21, 2015

@jmarca thanks for confirming. I still think this patch is good to have either way.

@silverwind

This comment has been minimized.

Copy link
Contributor Author

commented Nov 26, 2015

Anyone able to rubberstamp a LGTM here? It's a bit unfortunate that this CSS isn't on the website repo.

@Fishrock123

This comment has been minimized.

Copy link
Member

commented Nov 26, 2015

Rubber-stamp LGTM if it works. It'd be good to test the built docs on a bunch of browsers though since we only update the docs site with releases.

@silverwind

This comment has been minimized.

Copy link
Contributor Author

commented Nov 26, 2015

Yeah, it was confirmed working by the user, I think it's good to use the same unit for the same distance to avoid weird browser bugs like this. Will land shortly.

silverwind added a commit that referenced this pull request Nov 27, 2015

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: #3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>
@silverwind

This comment has been minimized.

Copy link
Contributor Author

commented Nov 27, 2015

Landed in 8b75030. I'll remember to test the docs in more browsers, thanks.

@silverwind silverwind closed this Nov 27, 2015

silverwind added a commit that referenced this pull request Dec 1, 2015

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: #3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>

silverwind added a commit that referenced this pull request Dec 4, 2015

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: #3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>

silverwind added a commit that referenced this pull request Dec 5, 2015

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: #3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>

@jasnell jasnell referenced this pull request Dec 17, 2015

Closed

Release 4.2.4 Planning #4321

silverwind added a commit that referenced this pull request Dec 17, 2015

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: #3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>

silverwind added a commit that referenced this pull request Dec 23, 2015

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: #3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>

scovetta pushed a commit to scovetta/node that referenced this pull request Apr 2, 2016

doc: fix rare case of misaligned columns
By using the same unit for the offset of the main column as used for the
left column width, we ensure that browsers render the columns
conistently.

Ref: nodejs/help#32

PR-URL: nodejs#3948
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.