Strange behaviour with tab style
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Strange behaviour with tab style
Hi,
I'm having trouble getting the tabs to look right in my theme. I want it to look like this:
I've almost got it, but I'm seeing something weird with the padding/positioning of the inside of the tab.
The unselected tab has a 2px top border, but the DOM Inspector shows one px extra between border and inner xul:stack. I cannot see any rule which would cause that extra space.
Giving tab 1px bottom border pushes xul:stack up, but I don't know why I would need to do that.
Here is my CSS for the tab bar (part of browser.css):
http://pastebin.com/1656bNVr
I have a feeling that TabMixPlus is interfering somewhere, but I have looked at it's style sheets and cannot see it overriding margin or padding or height on any of the elements I care about.
Environment: PaleMoon 24, Windows 7
(Ok, I know you guys don't support PaleMoon, but my question is more about CSS, which should work the same on either browser)
I'm having trouble getting the tabs to look right in my theme. I want it to look like this:
I've almost got it, but I'm seeing something weird with the padding/positioning of the inside of the tab.
The unselected tab has a 2px top border, but the DOM Inspector shows one px extra between border and inner xul:stack. I cannot see any rule which would cause that extra space.
Giving tab 1px bottom border pushes xul:stack up, but I don't know why I would need to do that.
Here is my CSS for the tab bar (part of browser.css):
http://pastebin.com/1656bNVr
I have a feeling that TabMixPlus is interfering somewhere, but I have looked at it's style sheets and cannot see it overriding margin or padding or height on any of the elements I care about.
Environment: PaleMoon 24, Windows 7
(Ok, I know you guys don't support PaleMoon, but my question is more about CSS, which should work the same on either browser)
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: Strange behaviour with tab style
XTAL256 wrote:I'm having trouble getting the tabs to look right in my theme.
Hi,
Maybe this suggestion I gave to Ken S would help:
viewtopic.php?p=13579247#p13579247
His problem was basically the same as yours, trying to figure out what is causing height to be what it is. My suggestion was to remove elements so you get to the point where you understand the influence of height from each element on its own, then combine that knowledge into a big picture of how they all work together. Usually for me, doing this will get me to the point where the light bulb goes on.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
Thanks, I'll try that.
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
Ok, I've hidden most, if not all, of the tab's inner:
But this is what I see:
.tabbrowser-tab -
.tab-stack -
The inner xul:stack has no height, yet the outer tab still has the same height.
And I know it cannot be the height of the tab bar that's controlling each tab's height, because when I increase it's height the tabs stay the same height:
Any ideas?
Code: Select all
.tabbrowser-tab .tab-stack .tab-background {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-progress-container .tab-progress .progress-bar {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-progress-container .tab-progress .progress-remainder {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-close-button {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-close-button .toolbarbutton-icon {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-icon {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-text-stack .tab-text,
.tabbrowser-tab .tab-stack .tab-content .tab-text-stack .tab-label {
display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-text-stack .showhover-box {
display: none !important;
}
But this is what I see:
.tabbrowser-tab -
.tab-stack -
The inner xul:stack has no height, yet the outer tab still has the same height.
And I know it cannot be the height of the tab bar that's controlling each tab's height, because when I increase it's height the tabs stay the same height:
Any ideas?
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: Strange behaviour with tab style
XTAL256 wrote:Any ideas?
If you look at the rules applying to the tab itself, the part that's still visible after you hid all its interior elements, do you see any setting height or min-height? I looked at your pastebin, so I assume that's a no.
What about that -1px bottom margin:
.tabbrowser-tabs {
margin-bottom: -1px;
}
What happens if you take that off, set the bottom margin to 0px? What effect does that have? Maybe if you're going to use that negative margin, you need to increase either top or bottom padding by 1px to make the tab 1px taller?
How about -moz-box-align? Is that being used?
Is it the same with Tab Mix Plus completely disabled?
That's probably a silly question, I'm sure you've already looked for that.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
Thanks for the tips.
Actually, i haven't yet tried disabling TMP, I only looked at it's CSS rules.
I will also play around with the -1 margin. It's used to make the active tab move down to cover the upper part of the bottom border. But i have no idea how that actually works.
Actually, i haven't yet tried disabling TMP, I only looked at it's CSS rules.
I will also play around with the -1 margin. It's used to make the active tab move down to cover the upper part of the bottom border. But i have no idea how that actually works.
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
I disabled TMP, but it did not affect the style. It did change the DOM, apparently TMP adds a .tab-text-stack element.
I did not see -moz-box-align anywhere, so that shouldn't affect it.
Changing the bottom margin of .tabbrowser-tabs does not increase the height of each tab. If i make the margin positive, and large enough, it will cut off the bottom of the tabs. But it does not seem to compress it (i.e. change it's height), it just clips it.
I did not see -moz-box-align anywhere, so that shouldn't affect it.
Changing the bottom margin of .tabbrowser-tabs does not increase the height of each tab. If i make the margin positive, and large enough, it will cut off the bottom of the tabs. But it does not seem to compress it (i.e. change it's height), it just clips it.
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
I eventually got the tabs looking how I want them, but I still can't figure out what controls the height of each tab. Ideally, I would like the whole tab bar to be one or two pixels taller, but I can't do that without screwing everything up again.
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: Strange behaviour with tab style
XTAL256 wrote:I eventually got the tabs looking how I want them, but I still can't figure out what controls the height of each tab. Ideally, I would like the whole tab bar to be one or two pixels taller, but I can't do that without screwing everything up again.
That's good news. (I was out of ideas, I guess you could tell. )
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
There is one thing I haven't tried is setting the min and max height of the tabs. I'm not sure if it's possible, but some JavaScript might be setting the height, so I would not see any CSS rules for it.
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
Nope, that didn't work either.
I set the following styles (using Stylish):
The immediate parent of the tabs (xul:box) is 33px high, but DOM Inspector still says that .tabbrowser-tab box height is 22px.
What the hell else could control the height like that? Some XUL voodoo? JavaScript?
I set the following styles (using Stylish):
Code: Select all
#TabsToolbar {
height: 35px !important;
}
.tabbrowser-tab {
min-height: 30px !important;
max-height: 30px !important;
height: 30px !important;
}
The immediate parent of the tabs (xul:box) is 33px high, but DOM Inspector still says that .tabbrowser-tab box height is 22px.
What the hell else could control the height like that? Some XUL voodoo? JavaScript?
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: Strange behaviour with tab style
I can't really add any more without getting hands-on which is hard since you're not on Firefox.
The one thing I would try next that might work is to use my domtreeproperties add-on (the one I pointed out to Ken S earlier) and get a full report of all available layout-related CSS properties and their used values for all the Tabs Toolbar-related elements.
I don't know if Pale Moon allows installing add-ons written for Firefox. If you want, I could add the Pale Moon application ID to domtreeproperties to make it installable there. You'd need to tell me what Pale Moon's app ID is; Firefox's is {ec8030f7-c20a-464f-9b0e-13a3a9e97384}.
The one thing I would try next that might work is to use my domtreeproperties add-on (the one I pointed out to Ken S earlier) and get a full report of all available layout-related CSS properties and their used values for all the Tabs Toolbar-related elements.
I don't know if Pale Moon allows installing add-ons written for Firefox. If you want, I could add the Pale Moon application ID to domtreeproperties to make it installable there. You'd need to tell me what Pale Moon's app ID is; Firefox's is {ec8030f7-c20a-464f-9b0e-13a3a9e97384}.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
mcdavis wrote:I can't really add any more without getting hands-on which is hard since you're not on Firefox.
Ok, well I just tried the same thing on Firefox 31, and I get the same problem. Increasing the height of #TabsToolbar does not increase the height of each tab.
Code: Select all
#TabsToolbar {
height: 35px !important;
}
#TabsToolbar .box-inherit {
min-height: 30px !important;
max-height: 30px !important;
height: 30px !important;
border: 1px solid red !important;
}
.tabbrowser-tab {
min-height: 30px !important;
max-height: 30px !important;
height: 30px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid blue !important;
}
.tabbrowser-tab * {
display: none !important;
}
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: Strange behaviour with tab style
I'd be happy to take a look on Firefox if there's a link to your theme available. You could send it to me privately if that's what you need.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
-
- Posts: 196
- Joined: December 8th, 2008, 4:30 pm
- Location: Somewhere in Australia...
Re: Strange behaviour with tab style
You can download the xpi here.