Final Tab Tweaks

When I got home last night I noticed that my previous tab repairs for Opera 7 and IE on Windows had caused new problems for IE and Camino on Mac OSX. I suspect that the font sizes were rendering differently, so that what was taking up the ideal amount of space on one system was overflowing and pushing stuff around on the other. So I tried the old trick of sticking a red border around all my divs until I’d figured out what exactly they thought they were doing.

I ended up tweaking the pixel height of the banner some more, and now it looks fine in every browser created since the Bronze Age. Major user changes in font size would probably throw it all off again, but the worst that would happen would be the submenu floating up to some weird place. Netscape 4 is still a problem, since for some reason it doesn’t render the tabs as links on the main page or the blog. The rest of the pages are usable.

6 Responses to “Final Tab Tweaks”

  1. Leonieke Says:

    hiya Jemima,

    the tabs are looking great!

    it’s funny to see that for once a browser like MozillaFirebird isn’t causing problems for the rendering of a page; quite refreshing :)

  2. Elise Says:

    I have a design-ish suggestion about an aspect of the links. Just a tiny little detail that probably only annoys me.

    Do you want to hear it or should I just keep my big mouth shut?

  3. Jemima Says:

    Mozilla never causes problems, but I have noticed that Camino has difficulty rendering the tabs in a background window. I have to reload sometimes when I bring the window to the front in order to see all the tabs.

    And yes, all design suggestions are welcome. That doesn’t mean I’ll take them, but I’d love to hear them.

  4. Elise Says:

    It’s only a very small thing.

    Have you noticed that the links move around when you move your mouse over them? This is, of course, because you’ve put a border around them in the a:hover mode. Putting an invisible (as in the same colour as your background) border around the links in the other modes, a:link, a:visited and whatever else you use, would mean the links would stay in the same place.

    It’s not that big a problem in your navigation, where the links have their own rows, but when you have links inside a text things jump around, sometimes even changing rows.

    It *is* just a personal pet peeve, so feel free to ignore me all you like! :-)

    (And there is the possibility that you were actually aware of this, and *liked* it, in which case… sorry?)

  5. Jemima Says:

    I was aware that the text could jump rows when you hover over a link. The effect was much more obvious with the LCARS stylesheets on Mozilla, since they had curved link borders which took up even more space. I don’t particularly mind the text jumping around. It’s not like I hover recreationally - usually I hover because I’m about to click on something.

    I’m pretty sure I would mind extra space around all the links for the invisible border you suggested more than the current animated effect, but since it wouldn’t be much space I’ll try it out at some point.

  6. Elise Says:

    It’s possible the extra space would look odd. I’ve never actually *tried* this myself, so I don’t know.

    “Hover recreationally” — LOL! I do that all the time… and randomly marking up text. I’m a restless individual.

    I hope you didn’t mind the suggestion in any case. It’s just a minor detail. Most of the time it isn’t noticable. (I have found other sites, though, where it is in fact impossible to hit the link because it keeps changing rows every time you hover… it is quite amusing.) But not only am I restless, I’m anal too.

    And utterly unable to keep my big mouth shut, even when I should.