Comments on: How can I fix my weirdly rendering navigation tabs?

Question: How can I fix my weirdly rendering navigation tabs?

goodnewsfortheinsane — Thu, 10 Jul 2008 18:30:19 -0800

What's wrong with my CSS that makes top the nav render like this or this on some browsers, and how can I fix it?

This is an example of a desired rendering, and here's is the CSS. Thanks in advance, guys & gals!

By: Civil_Disobedient

Civil_Disobedient — Thu, 10 Jul 2008 19:27:26 -0800

Don't use display:inline on the tabs, use display:block and give it a fixed width, then float: left. Just make sure you clear the float at the end.

By: Civil_Disobedient

Civil_Disobedient — Thu, 10 Jul 2008 19:29:33 -0800

Didn't see the right tabs. For the right tabs, wrap the whole thing in a DIV container, set overflow: hidden, give it a width (anything, even 100% will be fine) then float the tabs on the right... well, to the right. Again, display:block and fixed widths.

By: Civil_Disobedient

Civil_Disobedient — Thu, 10 Jul 2008 19:31:39 -0800

Additionally, instead of using padding to give the text some "room" inside the tab, I'd personally use line-height (which has the added advantage of working nicely on display:inline elements).

By: goodnewsfortheinsane

goodnewsfortheinsane — Fri, 11 Jul 2008 06:34:11 -0800

Thanks C_D, I'll give that a try tonight.

By: goodnewsfortheinsane

goodnewsfortheinsane — Fri, 11 Jul 2008 06:37:59 -0800

Just a few follow-up questions:

the whole thing

You mean both the left and right tab groups in one div?

And

Just make sure you clear the float at the end.

How do I do this - what clear value and on which side do I do this? Once full stop or one each for both tab groups?

By: kirkaracha

kirkaracha — Fri, 11 Jul 2008 07:00:18 -0800

Make the nav div the full width of the column, and float it. It won't go anywhere, but it will clear any floats inside it and expand to accommodate the contents. See example.

Tip: use text-transform: uppercase to capitalize the menu items fort better accessibility.

By: adamrice

adamrice — Fri, 11 Jul 2008 07:22:35 -0800

You mean both the left and right tab groups in one div?
PMJIH, but I think he means just the right-hand group.

How do I do this - what clear value and on which side do I do this? Once full stop or one each for both tab groups?

There are a few ways to deal with the right and left banks of tabs One is to wrap each one and float one div to the right, one left. If you do this, the next element after the right-floated div needs a rule for it including the style 'clear: both;'. Alternately, instead of floating, you could wrap both these left and right divs in a larger "navbar" div, give the navbar div 'position: relative;' and give the left and right divs something like 'position: absolute; left: 0;' (or 'right: 0;' as appropriate)

Another would be to treat them all as a single group, but with a giant spacer before the "mobile" tab.

By: goodnewsfortheinsane

goodnewsfortheinsane — Fri, 11 Jul 2008 19:12:57 -0800

Thanks everyone. Wow, kirkaracha, you really went the extra mile with that one. Thanks!

adamrice: Alternately, instead of floating, you could wrap both these left and right divs in a larger "navbar" div, give the navbar div 'position: relative;' and give the left and right divs something like 'position: absolute; left: 0;' (or 'right: 0;' as appropriate)

I tried this one, and cautious preliminary results from tests in person and Browsershots seem to indicate this might work, at least as a compromise (note that aside from the 'nostats' file linked above, no other pages have the new css implemented yet.

Short of asking for a unicorn, can anyone take a look and see if it looks alright now?

By: goodnewsfortheinsane

goodnewsfortheinsane — Fri, 11 Jul 2008 19:16:55 -0800

Ouch, but then there's this. How do I fix the gap between the tabs and the content div?

I should mention, the working files are now index-working.html and main-working.css.

By: goodnewsfortheinsane

goodnewsfortheinsane — Fri, 11 Jul 2008 19:20:02 -0800

Ah, I see it renders as desired on Mac OS X / Safari 4. The shot in the previous comment is an earlier version of Safari. Should I seek to fix this or leave it as is?

By: adamrice

adamrice — Fri, 11 Jul 2008 21:07:03 -0800

I see that you've got <center> tags in there, which seem to be a confounding factor (and are unnecessary). I think Safari may be spacing out on that. And it doesn't look right in Safari 3 (the current version), at least to me.

By: Civil_Disobedient

Civil_Disobedient — Sat, 12 Jul 2008 07:25:28 -0800

Sorry, forgot to follow up.

The easiest way to get two things to float to the right and left sides of a container is explained much better here.

But it looks like you've got everything looking good at least, in the only browser that matters... ;) If you find there's a gap between the tabs and the content on certain browsers, you'll have to target the browser using a hack, then tweak the position of the tabs using whatever technique you prefer. If the container for the tabs is position:relative (as suggested above), you can adjust the vertical position by using the top or bottom css attributes.

Personally, I don't see any reason to do this. If you've coded everything correctly, there shouldn't be any breaks between the tabs and the page elements for any browser.

By: goodnewsfortheinsane

goodnewsfortheinsane — Sat, 12 Jul 2008 09:33:09 -0800

Oh, I see Safari 4 is not yet a release version.

Thanks again, C_D. So, failing a hack, any ideas as to what I can do to code it in order to prevent the gap? The padding on the tabs still varies annoyingly between Win/IE and Win/FF and I can't quite find a compromise, so I suspect I'm still doing something wrong.

Thanks for your help so far, guys, it's very much appreciated.

By: Civil_Disobedient

Civil_Disobedient — Sat, 12 Jul 2008 11:07:28 -0800

OK, try this:

div.alltabs {

  display:block;

  float:left;

  padding: 0;

  border: 1px solid #fff;

  margin-right:7px;

  height: 16px; //adjust to fit your image

}



div.activetab {

  background: #fff;

}

Now change the class declaration for the tabs to use the attributes properly:

<div class="alltabs"> ...for the regular tabs
<div class="alltabs activetab"> ...for the active tab (two class defs separated with a space)

Modify the images you're using to give them the appropriate padding. Do not use padding on the tabs. Padding is where everything goes wrong, cross-browser. Just set the padding to 0 and make the images a little wider/taller.

By: goodnewsfortheinsane

goodnewsfortheinsane — Tue, 15 Jul 2008 19:24:29 -0800

Seems to work okay. Thanks again for your help, everybody.