At work they still use ie7... I noticed the tabs don't align with the content area

see attached image

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

MustangGB’s picture

Status: Active » Needs review

Also occurs in WebKit browsers when zooming in/out (tested in Chrome)
This is due to https://bugs.webkit.org/show_bug.cgi?id=60318
But it should be an easy fix for us:

#header {
  position: relative;
}
#nav-masthead {
  position: absolute;
  bottom: 0;
}
oadaeh’s picture

Status: Needs review » Active

This also happens in Chromium 18.0.1025.142 for Linux. A similar problem happens for Firefox 11.0 for Linux, except that the tabs are lower than where they should be.

@akamustang: please attach a patch before marking an issue with needs review. However, your proposed code does fix both issues for me. We just need a proper patch to get it applied. I'm not committing to anything here, but if I get a few moments and a few things out of my current queue, I will do that.

oadaeh’s picture

Issue summary: View changes

typo

MustangGB’s picture

IIRC Bluecheese has not publicly been released, at least I couldn't find the source for it, hence why I was not able to roll a patch

oadaeh’s picture

Status: Active » Reviewed & tested by the community

@akamustang: it appears you are correct. I was under the mistaken impression that code could be obtained for bug fixes, etc.

MustangGB’s picture

Title: In ie7 the tabs dont align with the content area » In IE7 and Chrome 21 the tabs dont align with the content area

The WebKit issue mentioned in #1 has landed and has actually made the issue worse.
In Chrome 21 at the default zoom level of 100% there is now always a gab under #nav-masthead.

---

#header
16px*0.8125em*22.153846em=287.999998px

#nav-header
16px*0.8125em*1.384615em+16px*0.8125em*0.923076em*(0.333333em+0.333333em)=25.999979000008px

#header-content
16px*0.8125em*18em=234px

#nav-masthead
16px*0.8125em*1.384615em+16px*0.8125em*0.923076em*(0.416666em+0.416666em)=27.999969000016px

---

#header != #nav-header + #header-content + #nav-masthead
287.999998px != 285.9333343505859px

The calculations are a bit off as I did it really quickly sitting at a tiny screen, but you get the idea.

ParisLiakos’s picture

Yeah, coming from chromium 21..looks ugly
#1 fixes it

drumm’s picture

Tried out #1 and it does fix the home page, but breaks all other pages a bit more. See attached screenshot.

Also attached is a patch for what I did. If you want to try out more changes on a dev site, see http://drupal.org/node/1018084.

drumm’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
514 bytes

Actually, I should have kept that height. New patch attached.

Please browser test http://tvn-drupal.redesign.devdrupal.org/ and http://tvn-drupal.redesign.devdrupal.org/about, where this change is deployed. I want to know it works in IE 8+ and reasonable versions of WebKit and FireFox.

oadaeh’s picture

Both pages look fine to me in both Firefox 14.0.1 and Chromium 18.0.1025.168, running on LinuxMint 13.

ParisLiakos’s picture

Status: Needs review » Reviewed & tested by the community

Same here for me on Debian and Chromium 21.0.1180.75..
I launched though my VB with WS 7 and checked with IE9 and IE8 from IE9's compatibility mode and Firefox 11, it works perfect

MustangGB’s picture

#8
Working fine in Chrome 21

tvn’s picture

Most noticeable this problem is on "Page not found" page, space between tabs and content area is huge.
Dev site looks good in the latest FireFox, Opera, Chrome and IE on Windows 7. RTBC!

drumm’s picture

Assigned: Unassigned » drumm
Status: Reviewed & tested by the community » Fixed

Committed & deploying later today.

MustangGB’s picture

<3

ParisLiakos’s picture

awesomeness.
My eyes thank you drumm

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Corrected a typo