Navigation Moved

In case you didn’t notice, I’ve moved the main site navigation from the block on the right to a “tabbed” list below the site header.  This method is a bit more compact and frees up some space over on the right since that column was getting pretty long.

There may be some tweaks to it in the days to come and I’m more than open to suggestions about color, etc. (or anything else, for that matter).  I picked the current tab colors fairly quickly and I’m not 100% sure I really like them.

I’m also going to be messing with the lists on the right in an attempt to get rid of an annoying rendering problem in :IE: that causes lots of vertical space between the list items.

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.


I dig it, but think it I think it might look better if they were the same color as the banner, and the hover was how you have it displaying now (the current non-hover color that is).

I did try the tabs with the same color as the header, but it looked funny.  I’ve changed them to almost be the same (#147 vs the header’s #036) and I think it looks pretty good.  I also changed the hover as suggested (and also added a hover to the currently “active” tab).

Better?  Other changes or different colors still?

BTW, I cannot for the life of me get :IE: to display those lists on the right without vertical space in between.  I even went and took code from a similar list that I verified did display right in IE.

So it appears the problem isn’t with the list CSS itself, but rather something that’s inherited/cascaded down, but darned if I can figure it out.

Now I’m trying to figure out where I can go for CSS help since I’m usually the one people go to! :o

I do like the colors as you have them now, it looks excellent.  Good show!

IE 5.2/Mac they look fine—which is odd as list items are almost always over-spaced on the Mac version.  What IS weird is your recent comments…..

I guess it’s a float issue most likely, but the div container is in the right place, but the content doesn’t start until below the entire site’s contents.  Huge huge huge whitespace.

Everything’s kosher and clean on Safari.  I’ll see if there’s possibly something I can catch or think of that’s causing your problem in Win/IE, but I doubt I’ll have any better luck.  Sometimes a fresh pair of eyes is all that’s needed though.  In the meantime, have you tried using the DOM inspector to see everything that’s applied?  It’ll show even inherited styles and that might give you some insight.

I should add that any problem with IE 5.2/Mac should be ignored, as I think practically 100% of Mac users are using Mozilla or Safari.  That ones that aren’t don’t visit blogs anyway. wink

The navigation tabs now have a cool rounded look to them if you use Mozilla/Gecko browser.  I tried this yesterday, too, but couldn’t get it to work quite right at the time.

The effect is specific to Mozilla/Gecko browsers due to the fact that it uses the -moz-border-radius :CSS: property.  Found via Eric “CSS God” Meyer’s Rounding Tab Corners article.

I could round the corners on any of these other squared boxes on the page, too.  Think I should do so for those boxes on the right or these in the main column?  I tried it briefly and it looks decent, but I’m not sure it’s actually better.

You might try it with the right-hand column, but I don’t think I’d like the content too much with it.  Of course, if it’s on your tabs and your nav, and not the body, it might look odd.

Oh, and I had no luck going through your CSS, as I figured.  Only thing I can think of would be to add a style for unordered lists directly to the body.  Maybe :IE: is ignoring certain definitions that you have applied to navlist and using some pre-cooked defaults?

Leave Your Comment

Commenting is not available in this weblog entry.