Skip to main content
edited tags
Link
JNat StaffMod
  • 1.5k
  • 5
  • 44
  • 51
deleted 1 character in body
Source Link
Florian Koch
  • 1.5k
  • 8
  • 14

When looking at the lines below, the section headers like "Questions" or "Answers" on the activity summary page, you will notice that they are off by one pixel in comparison to the ones right next to them (in this case "Reputation" and "Tags"). I tested this in Firefox and Chrome on different resolutions, using Windows 10 without scaling.

Enter image description here

This seems to be related to the selectable tabs in these sections, since "Questions", "Answers" and "Offered Bounties" are lower on the left side of the summary, while on the right side "Badges" is lower than the "Accounts" located on the left side. Each of these has tabs, which use an orange marker with a two pixels height:

Enter image description here

It seems that this pushes down the line by one pixel. The line is achieved through a border-bottom on the .subheader class. The reason for the lower placement is the bigger bounding box of the subheader when tabs are visible:

Enter image description here

Disabling the border-bottom on .subtabs a results in a correct placement, but of course the selection indicator for the tabs is no longer visible. Fascinatingly the border of the marker is also declared with a width of 1 pixel, so I don't quite understand why it's 2 pixels high on my screen (I'm not a web developer, though).

When looking at the lines below, the section headers like "Questions" or "Answers" on the activity summary page, you will notice that they are off by one pixel in comparison to the ones right next to them (in this case "Reputation" and "Tags"). I tested this in Firefox and Chrome on different resolutions, using Windows 10 without scaling.

Enter image description here

This seems to be related to the selectable tabs in these sections, since "Questions", "Answers" and "Offered Bounties" are lower on the left side of the summary, while on the right side "Badges" is lower than the "Accounts" located on the left side. Each of these has tabs, which use an orange marker with a two pixels height:

Enter image description here

It seems that this pushes down the line by one pixel. The line is achieved through a border-bottom on the .subheader class. The reason for the lower placement is the bigger bounding box of the subheader when tabs are visible:

Enter image description here

Disabling the border-bottom on .subtabs a results in a correct placement, but of course the selection indicator for the tabs is no longer visible. Fascinatingly the border of the marker is also declared with a width of 1 pixel, so I don't quite understand why it's 2 pixels high on my screen (I'm not a web developer, though).

When looking at the lines below the section headers like "Questions" or "Answers" on the activity summary page, you will notice that they are off by one pixel in comparison to the ones right next to them (in this case "Reputation" and "Tags"). I tested this in Firefox and Chrome on different resolutions, using Windows 10 without scaling.

Enter image description here

This seems to be related to the selectable tabs in these sections, since "Questions", "Answers" and "Offered Bounties" are lower on the left side of the summary, while on the right side "Badges" is lower than the "Accounts" located on the left side. Each of these has tabs, which use an orange marker with a two pixels height:

Enter image description here

It seems that this pushes down the line by one pixel. The line is achieved through a border-bottom on the .subheader class. The reason for the lower placement is the bigger bounding box of the subheader when tabs are visible:

Enter image description here

Disabling the border-bottom on .subtabs a results in a correct placement, but of course the selection indicator for the tabs is no longer visible. Fascinatingly the border of the marker is also declared with a width of 1 pixel, so I don't quite understand why it's 2 pixels high on my screen (I'm not a web developer, though).

Active reading [<https://en.wiktionary.org/wiki/activity#Noun> <http://www.wikihow.com/Use-Than-and-Then>].
Source Link
Peter Mortensen
  • 31.6k
  • 4
  • 22
  • 14

border Border alignment in activity summary

When looking at the lines below, the section headers like "Questions" or "Answers" on the acticityactivity summary page, you will notice that they are off by one pixel in comparison to the ones right next to them (in this case "Reputation" and "Tags"). I tested this in Firefox and Chrome on different resolutions, using Windows 10 10 without scaling.

enter image description hereEnter image description here

This seems to be related to the selectable tabs in these sections, since "Questions", "Answers" and "Offered Bounties" are lower on the left side of the summary, while on the right side "Badges" is lower thenthan the "Accounts" located on the left side. Each of these has tabs, which use an orange marker with 2 pixela two pixels height:

enter image description hereEnter image description here

It seems that this pushes down the line by one pixel. The line is achieved through a border-bottom on the .subheader class. The reason for the lower placement is the bigger bounding box of the subheader when tabs are visible:

enter image description hereEnter image description here

Disabling the border-bottom on .subtabs a results in a correct placement, but of course the selection indicator for the tabs is no longer visible. Fascinatingly the border of the marker is also declared with a width of 1px1 pixel, so I don't quite understand why it's 2px2 pixels high on my screen (I'm nonot a web developer, though).

border alignment in activity summary

When looking at the lines below the section headers like "Questions" or "Answers" on the acticity summary page, you will notice that they are off by one pixel in comparison to the ones right next to them (in this case "Reputation" and "Tags"). I tested this in Firefox and Chrome on different resolutions, using Windows 10 without scaling.

enter image description here

This seems to be related to the selectable tabs in these sections, since "Questions", "Answers" and "Offered Bounties" are lower on the left side of the summary, while on the right side "Badges" is lower then the "Accounts" located on the left side. Each of these has tabs, which use an orange marker with 2 pixel height:

enter image description here

It seems that this pushes down the line by one pixel. The line is achieved through a border-bottom on the .subheader class. The reason for the lower placement is the bigger bounding box of the subheader when tabs are visible:

enter image description here

Disabling the border-bottom on .subtabs a results in a correct placement, but of course the selection indicator for the tabs is no longer visible. Fascinatingly the border of the marker is also declared with a width of 1px, so I don't quite understand why it's 2px high on my screen (I'm no web developer, though).

Border alignment in activity summary

When looking at the lines below, the section headers like "Questions" or "Answers" on the activity summary page, you will notice that they are off by one pixel in comparison to the ones right next to them (in this case "Reputation" and "Tags"). I tested this in Firefox and Chrome on different resolutions, using Windows 10 without scaling.

Enter image description here

This seems to be related to the selectable tabs in these sections, since "Questions", "Answers" and "Offered Bounties" are lower on the left side of the summary, while on the right side "Badges" is lower than the "Accounts" located on the left side. Each of these has tabs, which use an orange marker with a two pixels height:

Enter image description here

It seems that this pushes down the line by one pixel. The line is achieved through a border-bottom on the .subheader class. The reason for the lower placement is the bigger bounding box of the subheader when tabs are visible:

Enter image description here

Disabling the border-bottom on .subtabs a results in a correct placement, but of course the selection indicator for the tabs is no longer visible. Fascinatingly the border of the marker is also declared with a width of 1 pixel, so I don't quite understand why it's 2 pixels high on my screen (I'm not a web developer, though).

Source Link
Florian Koch
  • 1.5k
  • 8
  • 14
Loading