If you, like me, have done any XUL development for Firefox, I’m sure that you would have come across, or even used, the XUL tabs element. It’s really useful but its default styling looks like crap, with its most irritating “feature” being the damn white line that you seem unable to get rid of.
Actually it isn’t a white line. If you zoom on the line you’ll find it’s actually 1 pixel of #F1EFE2 and 1 pixel of #FFFFFF… So it looks white, with an even more irritating 3D look.
So how do you get rid of it?
Recently (Yesterday) I used the tabs XUL element in a Firefox application. I manged to style the rest of the tabs elements to get rid of the default yuk, but I couldn’t get rid of that dreaded white line. Quite a few years ago I remember pulling my hair out (And I don’t have much hair to loose) over the same thing. I know that I got rid of it, but I couldn’t remember how. After much digging into various CSS files… Ah-ha!
.yourtabsclass >.tabs-left, .yourtabsclass >.tabs-right
{
border-bottom: none !important;
-moz-border-bottom-colors: none !important;
}
And the end result?
Ahhhhh………
Leave a Reply