How can I fix my weirdly rendering navigation tabs?

July 10, 2008 6:30 PM

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!

posted by goodnewsfortheinsane to computers & internet (15 comments total)

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.
posted by Civil_Disobedient at 7:27 PM on July 10

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.
posted by Civil_Disobedient at 7:29 PM on July 10

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).
posted by Civil_Disobedient at 7:31 PM on July 10

Thanks C_D, I'll give that a try tonight.
posted by goodnewsfortheinsane at 6:34 AM on July 11

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?
posted by goodnewsfortheinsane at 6:37 AM on July 11

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.
posted by kirkaracha at 7:00 AM on July 11

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.
posted by adamrice at 7:22 AM on July 11

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?
posted by goodnewsfortheinsane at 7:12 PM on July 11

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.
posted by goodnewsfortheinsane at 7:16 PM on July 11

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?
posted by goodnewsfortheinsane at 7:20 PM on July 11

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.
posted by adamrice at 9:07 PM on July 11

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.
posted by Civil_Disobedient at 7:25 AM on July 12 [1 favorite]

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.
posted by goodnewsfortheinsane at 9:33 AM on July 12

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.
posted by Civil_Disobedient at 11:07 AM on July 12

Seems to work okay. Thanks again for your help, everybody.
posted by goodnewsfortheinsane at 7:24 PM on July 15