I need a bit of guidance as to how I make my navigation matrix work on the second row of my test html setup. I want to make it roll over just like the top row. I'm thinking I may need another set of rules for the second row li and li a.
Here's the test page:
Seems like you still only have to shift the image the same distance up for the second row as for the first row, because the second hover row is the same offset from the second link row as the first hover row is from the first link row.
Yes, you should need to add styles that cover the position of the second row images.
I still can't figure out how I move the second row of links for the second row of images. Do I need to rename the second row IDs and make new "li" and "li a" rules for those? I updated the page a bit. Now the roll over for the Buy button is wrong.
You can add it to the beginning of a font stack, using the Font Manager, to create a font-family rule like this:
font-family: "CG Omega", Tahoma, Geneva, sans-serif;
People who have the font will see the one you want. Those who don't will see Tahoma, Geneva, or a generic font.
True, you can use smaller font-sizes, but some people have their browsers set to display bigger fonts in order to see better. This defeats your menu styles. Another approach is to use CSS to style your "buttons" (no images required).
The upside to this is that your page loads a bit faster without images. And when text size is increased (even aggressively) the buttons remain intact.
The downside to this is that CSS rounded borders don't work with gradient filters in IE. If this is a deal breaker, stick with your images.
I'm not seeing any problem with Safari Mac. I set the font size in DW, and it seems to stay that all relative no matter how zoomed in I am, and fine until I zoom out so far that I can't hardly read anything. I think (hope) I will be fine. Thanks.