Drupal.Org mid-page tabs misaligned on IE7 [#1778056]

As shown in the attached image, the midpage tabs are misaligned to the right on the Drupal.org homepage when using IE7. This causes a large horizontal scrollbar to appear, even when the browser is wide enough to display the rest of the page.

Related, I don't see a 'theme/cosmetics' component in the webmasters queue - may be a suggested addition.

misaligned-tabs-example

Comment	File	Size	Author
	d.o-misaligned-tabs.jpg	72.76 KB	jthorson

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

jthorson CreditAttribution: jthorson commented 8 September 2012 at 00:09

Project:	Drupal.org site moderators	» Bluecheese
Component:	Other	» User interface
Priority:	Major	» Normal

Looks like removing the 'position:absolute' on #nav-masthead resolves the issue, and didn't adversely affect IE9, IE8, or Firefox 15.0.1.

Comment #2

jthorson CreditAttribution: jthorson commented 1 October 2012 at 03:50

Looking at the sass source files on a D7 dev site, it appears that #nav-masthead has a "position: relative;" value, instead of the "position: absolute" which is appearing on drupal.org.

Furthermore, looking at an old D6 dev site (rfay.redesign), the setting used to be "postion: relative" there too. Looking at a newer dev site (solr-drupal.redesign), it's "position: absolute;".

Can anyone point me to where this got changed, why, and why it's changed back in D7? Even better, can we please just revert it? I realize IE7 is 'unsupported', but having to scroll sideways to click on my dashboard tab for the last month has been really annoying.

Comment #3

rupl

he/him

English

CreditAttribution: rupl commented 1 October 2012 at 04:48

Not sure why it changed, but it's not hard to switch back. If someone tends to this before me, it will require two changes:

#header {position: relative; }
#nav-masthead {position: absolute; bottom: 0; }

Maybe some bottom padding on the header too. I will have the ability to test IE7 at work tomorrow.

Comment #4

jthorson CreditAttribution: jthorson commented 1 October 2012 at 13:53

Just for clarification, It's the position: absolute which is causing me problems. :)

Comment #5

rupl

he/him

English

CreditAttribution: rupl commented 1 October 2012 at 14:12

Ah. Then this is already fixed in D7 bluecheese. I'm not sure how to commit to D6 bluecheese.

Comment #6

drumm

he/him

NY, US

CreditAttribution: drumm commented 3 October 2012 at 22:30

#1157586: In IE7 and Chrome 21 the tabs dont align with the content area is the change. I think instead we want to specify left: 0; next to bottom: 0;.

Comment #7

jthorson CreditAttribution: jthorson commented 4 October 2012 at 04:13

At least in IE9 running IE7 compatibility mode, 'left: 0' puts the tabs at the far left side of the window, instead of aligned with the rest of the content on the page ... since it's absolutely positioned within the #header element, which spans the full width of the browser window.

Comment #8

jthorson CreditAttribution: jthorson commented 18 October 2012 at 22:07

Status:

Active

» Postponed

Confirmed that the alignment appears correct on the planned D7 version of the site ... so this issue will go away with the Drupal.org D7 upgrade. (I also noted that the rounded corners disappear from the tabs with the D7 version, but that's a different, and much easier to live with, issue.)

Comment #9

rupl

he/him

English

CreditAttribution: rupl commented 19 October 2012 at 15:03

On the subject of rounded corners in D7 bluecheese, many components will suffer small "regressions" in terms of looks when using an older browser. I put it in quotes because I actually consider it a progression :)

Just so everyone knows, this was a decision made with consensus from the infra team. We're opting to move away from older presentation techniques (like image-based rounded corners) when CSS alone can do the job.

Comment #10

jthorson CreditAttribution: jthorson commented 16 November 2012 at 19:22

Status:

Postponed

» Active

I'm sorry ... but given the D7 port delays, I'd like to re-open this issue.

If we're now well into the new year with this, I don't think the project should be satisfied just 'living with' this problem. Personal frustration with having to scroll sidewise to click 'dashboard' four times a day at work notwithstanding ... even if IE7 is officially unsupported, the resulting behaviour screams to me that "We don't know to align tabs when building webpages", which is not a very good message to have associated with a project meant for building webpages.

Anyone who IS still using IE7 isn't going to know that the site looks fine in a different browser, and may develop a negative first impression of Drupal based on what could be mis-interpreted as an 'amateurish' issue on the project's home page.