Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
There is an IMHO ugly 2px-margin below inactive tabs on overlays.
The attached patch removes this margin so the tabs sit snugly on top of he content area.
An inactive tabs being greyed out is enough of a discriminator to distinguish it clearly from an active tab (white) which bleeds nicely into the white background of the content area.
Tested to work on Windows XP with IE6, IE7, IE8, Firefox 3.5, Chrome and on Mac with Firefox 3.5, Safari 4, Chrome.
Screenshot (after patch) from FF3.5 on Mac
Searched the issue queue on this but found nothing.
Comment | File | Size | Author |
---|---|---|---|
#31 | overlay-1px-fix.patch | 466 bytes | aspilicious |
#21 | overlay-tabsspacing.patch | 543 bytes | casey |
#7 | overlay_tabs_styling_snug.png | 14 KB | reglogge |
#6 | overlay_tabs_styling_snug.patch | 1.11 KB | reglogge |
#5 | overlay-parent-tabs-styling.patch | 1.15 KB | seutje |
Comments
Comment #1
aspilicious CreditAttribution: aspilicious commentedI like this improvement.
Comment #2
karschsp CreditAttribution: karschsp commentedI agree, I think this looks good. Marking RTBC.
Comment #3
Dries CreditAttribution: Dries commentedCommitted to CVS HEAD.
Comment #5
seutje CreditAttribution: seutje commentedwas this not by design?
attached patch should also make IE more happy, as it doesn't rely on inline-block displau
Comment #6
reglogge CreditAttribution: reglogge commentedTo be honest, I didn't lok at the mockups beforehand, I just always had the impression that this little margin between already greyed out tabs and the white background of the overlay looked more like a css-bug than a conscious design decision.
I agree however with switching from display: inline to float: left for the tabs.
The attached patch incorporates this change from #5 but keeps the snug fit of the tabs to the overlay.
Take your pick.
Comment #7
reglogge CreditAttribution: reglogge commentedforgot to attach a screenshot
Comment #8
Kiphaas7 CreditAttribution: Kiphaas7 commentedErr, I think the switch from float to inline was made in some issue earlier... Exactly to avoid IE problems? Besides, IE support display inline-block, as long as the element is a "natural" inline element.
Comment #9
Dries CreditAttribution: Dries commentedI agree with reglogge in #7. I also thought that the original 'gap' was a CSS issue. In other words, I think this patch would be a regression.
Comment #10
Bojhan CreditAttribution: Bojhan commentedPlease implement as designed at http://www.flickr.com/photos/mboulton/3569318373/
Comment #11
reglogge CreditAttribution: reglogge commented@Bojhan: This image is far too small to see anything in it and can't be enlarged at Flickr. Any other links where one could look at the original design?
Comment #12
Bojhan CreditAttribution: Bojhan commented@reglogge I know, its annoying - but you need to be logged into flickr to see it in full size
Comment #13
reglogge CreditAttribution: reglogge commented@bojhan: now I can see the original spec - it has the 1px margin between the deactivated tab and the overlay body.
I still think that the margin looks odd though - more like a bug than a feature - and Dries agrees in #9.
I'd much rather leave it as it is now.
Comment #14
Bojhan CreditAttribution: Bojhan commentedWell Dries can be wrong, and in this case he is. I dont think it looks bad, I think it looks good - its not a bug as it allows for visual clarity in what you are currently in, and what is not active.
Comment #15
aspilicious CreditAttribution: aspilicious commentedI think we all agree (except for Bohjan) that the gap looks weird, no one else complained...
Closing this!
Comment #16
Bojhan CreditAttribution: Bojhan commentedlol, no offense - but mark boulton designed it this way.
Comment #17
aspilicious CreditAttribution: aspilicious commentedSo... it looks rly rly rly strange....
I showed it to my prof HCI and she said the following:
"I can see what he is trying to do with the margin, but I understand that most people get confused by it."
If I look at those mockups a lot has changed, I don't see why we can't change this?
Is mark a God? No he isn't. Am I God, no I'm not. I only collect opinions from core people and people in my environment that are going to use drupal in the future and besides of you (and probably Mark) nobody has said: "hey lets keep the margin! It is better cause of ... " in he last 2 months.
In my opinion the colour difference does it all and I have the feeling adding the margin is just overkill...
But that's my opinion, I'll leave this open for discussion Bohjan but if nobody replies to this before 15 april I'll close this again.
Comment #18
yoroy CreditAttribution: yoroy commentedFirst of, I don't think any variant of this should be considered 'confusing'. (Nor are we discussing who's god here.)
Both approaches work.
It's a matter of how much emphasis you put in the styling of active versus inactive tabs. We are not our own target audience here, not even (especially! :) Dries. We're designing for people who won't notice.
_With_ the gap is better, especially with multiple inactive tabs. It adds clarity:
view image: http://img.skitch.com/20100323-bw7itkqj5trc9w943uxns2pf22.png
Comment #19
kika CreditAttribution: kika commentedsubscribing
Comment #20
james.elliott CreditAttribution: james.elliott commentedsubscribing
Comment #21
casey CreditAttribution: casey commentedI actually agree using the gap for inactive tabs looks better.
Comment #22
aspilicious CreditAttribution: aspilicious commentedWell...
If you all agree, this is fine for me. But I'm NOT responsible for every issue being opened cause of this ;)
Comment #23
yoroy CreditAttribution: yoroy commented#21: overlay-tabsspacing.patch queued for re-testing.
Comment #24
Bojhan CreditAttribution: Bojhan commentedOff to RTBC, about time we fix this issue.
If any follow ups are caused by this issue I think its reasonable we hold aspilicious responsible.
Comment #25
yoroy CreditAttribution: yoroy commentedlooking great and it's really comforting to know we can blame aspilicious for everything afterwards :)
Comment #26
ksenzee+1 to implementing the mockups as designed. Also +1 to getting this fixed and out of the queue. And if aspilicious doesn't want to take the blame I will. ;)
Comment #27
Dries CreditAttribution: Dries commentedCommitted to CVS HEAD. Thanks.
Comment #29
Bojhan CreditAttribution: Bojhan commentedSeems like this wasn't actually committed? As per todays checkout I do not see the 1px for inactive tabs.
Comment #30
Bojhan CreditAttribution: Bojhan commentedhttp://drupal.org/cvs?commit=398852 Guess we should blame aspilicious for this, just for the sake of it
Comment #31
aspilicious CreditAttribution: aspilicious commentedNothing wrong with the commit.
We have to blame seven theme.
#25 is how it looks with the patch
Hopefully quickfix
Comment #32
ksenzeeThat is specific and limited enough that even I can RTBC it safely. :)
Comment #33
yoroy CreditAttribution: yoroy commentedI've been missing the 1px below inactive tabs too lately. Would love to see them re-introduced.
Comment #34
Dries CreditAttribution: Dries commentedCommitted to CVS. For real.