I figure during the off season while snakes are in brumation and before the hatching season hustle I was do for a redesign of the subpages of one of my web sites. In a rush I had tossed everything into a Zen Cart system earlier this fall...But with selling live animals, it's a major pain to have them setup in a system like that, so I'm pulling at least them from the cart...

Anyway...I spent a couple hours creating this CSS menu and like it...However I was thinking with how I want to use it (the grey sub menu will change depending on what main menu is selected). How exactly would I make it so that when one is in the "About" section (for example) the tab stays up? I don't mind having to code each one individually for each section...But I was unsure how to go about it.

As for the IE7 bug, that can be seen in the screenshot below taken from BrowserCam (thanks again, Adam for the web site suggestion!). Looks great in all other browsers save IE7. Is there some sort of IE7 only CSS thing that I'm missing?

Attaching a screenshot would help, ey?

I would create a class and call it something like 'selected' or 'current'. In that class you specify the background image for the gray tab as the background for that link, and you apply the 'selected' class on the link, like this:

<a class="selected" href.. blah blah>About</a>

I don't see the screenshot myself, so I'll have to go by what I see in IE7. The problem that I see is that you're using plain text for the menu, and as it gets bigger it forces the word "constrictors" onto the second line. This is perfectly normal text-like behavior, and will occur with any other browser (except for IE6 if you set a font size in pixels or points). The only way to make sure it doesn't happen is to have an all-graphic menu.

If it were me personally, I'd consider making at least the submenu vertical. That way, it can size properly to a much greater extent even as users resize their text. There's still going to be a point where the menu gets thrown out of whack, but it will occur at a much more extreme point (e.g. when the user upsizes text 8, 9, 10 times).

And now, I'm going to tell you something that you probably aren't going to want to hear and that most people will never agree with, but this is something I've learned from experience (and a fair deal of it): all browsers get it wrong on some level, and so do we. IE gets it wrong sometimes, Firefox gets it wrong sometimes, Opera gets it wrong sometimes, Safari gets it wrong sometimes, etc. and so on. Sometimes it's also in the way we do or think things through: we expect a certain behavior and the standards in place say otherwise. Sometimes even the standards themselves don't make any sense (like why, when Microsoft created a web-based scalable gradient, no one thought to modify it enough to make it part of any new standards so that everyone could use it...no one has ever been able to explain this one to me.) I've even got a case that I'm going to reveal at some point in the next couple of weeks where IE6 interpreted something correctly and every other browser got it dead wrong...and I wasn't even coding for IE6.

In other words, don't assume IE is wrong just because IE does something you don't expect it to. A lot of the time, it's something else. That's not to say it can't be wrong...my own finding, though, is that the majority of the time this isn't the case.

Thanks, LNR! Figures it'd be something as simple as that!

Adam,
I did forget to attach the screenshot and added it (probably while you were typing up your post). As far as when the text gets "bigger," I'm not really concerned with those who are silly enough to screw with the preferences of their browser. I do realize that I have no control over that and in my opinion, the fault is theres for doing it in the first place!
So for those that don't mess with browser preferences, I want them to be able to see my web site as it is meant to be seen. The reason why I do think it's an IE7 problem is because if there's 10px padding at top and bottom...Shouldn't it show 10px padding? If you look at the circle in both IE7 & FireFox, I think you can see the alignment problem there is.
Now...The reason WHY I programmed how I did was because those pictures on the left hand side will change with each page and I needed to be able to easily swap them out.

It's not about messing with browser preferences. For some people, your choice of font size may be too small and increasing the font size is the only way they'll be able to read it. It's about accessibility for the USER, not for YOUR preference . We'd all like our sites to stay the way we designed them. The fact is, the USER should be the one with the control. Using px for font sizing prevents people using IE from resizing text so they can see it, which is why it's not recommended.

As for the alignment problem on the photo, I would make the following suggestion - remove the photo slice from the text div completely. This is one instance where putting the circular photo in a separate div and using position:absolute or position:relative would be a better choice.

Hi LNR,
I tried your suggestion, but I don't think I'm doing it right because it didn't correct the IE7 problem.

I did this in the CSS:

.column2image {
position:relative;
background-image: url(images/c2-2-ballpython.png);
}

and then wrapped that class around pageintrocontainer.

Have you got that code uploaded ?
Make sure you set your "wrapper" to position:relative first, then the image will be positioned relative to the wrapper instead of the body.

You know what? It's not the right column, it's the left. Something with that 2nd image is bumping it down in IE (cause now I have it in both IE6 & 7 since my last revisions).

If I make those 2 images into 1, that weird alignment issue is gone (if you look now, that's how it is). Is there something I'm missing so there's no extra space in IE after an image?

This is all that I had for the left column:

HTML:

<div class="left">
            <img src="images/c1-1.png" alt="triple moons exotic" width="223" height="90" border="0" />
            <img src="images/c1-2-ballpython.png" alt="ball python" width="223" height="280" border="0" />
            <img src="images/c1-3-ballpython.png" alt="ball pythons" width="223" height="266" border="0" />    
        </div>

CSS:

.left {
   width:223px;
   height:auto;
   vertical-align:top;
   float:left;
   overflow:auto;
   margin:0px;
   padding:0px;
}

Something now that's peculiar is that CSS class that is assigned to the navigation buttons that are "on" no longer work. It only works on index.html, not the other pages...

That's because the a:visited class is taking precedence in the CSS.

The problem with the image is that the right section is being pushed down by the stacked text of "boa constrictors". IE also leaves room for decendents on letters like y and g, and I suspect that's why the funky misalignment happens. Divorcing that python photo from the rest by making it position:absolute or relative will eliminate that problem.

The other thing you could do, if you want to avoid positioining, is to do something like your menu (an unordered list with left-floated list elements) for your two pictures. Basically pretend the two pics make up a menu and treat them as such.

No, it had nothing to do with "boa constrictors" on the right. That isn't stacked or anything, it's one line. For some reason in IE there was a space between the first image and the second image (which is now one single image) in the left column.

I bet Adam's suggestion will work...It makes sense since the menu is perfectly spaced using that method...

At 1024x768, "boa constricters" wraps to 2 lines.

As usual, there is almost always more than one solution.