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

Files: 
CommentFileSizeAuthor
d.o-misaligned-tabs.jpg72.76 KBjthorson

Comments

jthorson’s picture

Project: Drupal.org webmasters » 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.

jthorson’s picture

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.

rupl’s picture

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.

jthorson’s picture

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

rupl’s picture

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

drumm’s picture

#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;.

jthorson’s picture

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.

jthorson’s picture

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.)

rupl’s picture

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.

jthorson’s picture

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.

drumm’s picture

Version: » 7.x-2.x-dev
Issue summary: View changes
Status: Active » Closed (cannot reproduce)

This actually got fixed at some point.