I've been trying to get this to work for HOURS now and I guess I just need some help. Here's a link to my page:
[url=http://store.baytonemusic.com/mm5/merchant.mvc?Screen=SFNT&Store_Code=BTM]
[/url]
The item in question is the link, _Songbooks_ in the far left table cell, 2nd row.

I have a 10px x 65px image that is repeating as part of my style.


On hover, I want a different img (lighter in color) to repeat for a rollover button-type effect. This would be similar to how the Spry navbar in my title banner works. It's inside a table cell with this code:



First problem, the image swaps and repeats on hover but is only as large as the text itself. Adding _height: 70px;_ to the hover style changes nothing. I've played with the padding and margins but no go.

Second problem, I can't get the text to vertically align in the middle of the cell. This appears to be linked to the 70px height value. Adding _vertical-align: middle;_ to the td (inline above) style was ineffective.

Right now, I am able to test in only Safari 3.1.2 and FF 2.0.0.15.

The worst part is that I'm not even sure I'm going to be that crazy about it if I get it working. Just one of those days.

Any thoughts appreciated - JAY

I'd welcome your responses any time but I'll be making some changes to the previous linked page and style sheet this evening.

JAY

I'm so sorry! I had to sleep a few hours.



Well, the A element isn't larger than the text it contains and height doesn't apply to inline elements. Make the A 'display: block' and see if that helps.


http://www.w3.org/TR/CSS2/visudet.html#propdef-height

http://www.w3.org/TR/CSS2/visuren.html#propdef-display

Thanks so much for your response. I'm eager to look at it in more detail but I have a very big project not related to this due today. Therefore, I have restored the page and CSS in question to its state at the time of my original posting. Might be a day or two, but I'll be back!

Thanks again!

OK, thanks again for your suggestions. I spent a fair amount of time poring over the w3c docs you had linked plus relating sections. They left out the part about Voodoo, I guess. In any case, it seems to be working now, at least in Safari and FF. Here is the [url=http://store.baytonemusic.com/mm5/merchant.mvc?Screen=SFNT&Store_Code=BTM]link
[/url] again plus the changes I made.

- added _style="display: block;_ to all A elements, (I thought I could do this in the style sheet but apparently not);

- added top and bottom padding values to each of a:link, a:visited, a:hover, and a:active for the style on my ext sheet;

- added __background-position: center center;_ to all four of the above;

- had to recreate bkgd imgs with even-numbered height value, then play with padding values to get them to align properly in both Safari and FF, (not yet sure about IE);

Observations at this point are that the link bars look pretty heavy on the page so I may play a bit with both the size and color of the bkgd imgs. If you see anything funky in your browsers, please let me know.

Thanks again - JAY

Those links (songbooks etc.) do look pretty heavy. I wonder why you don't use a list on the navigation links on the left. You have to click on the text instead of on the whole length of the "bar".

(BTW, observations on Safari/Mac)

Sure you can.

To be honest, that was awhile ago and I can't remember why I chose not to use a list. I guess that I simply started working off of the Miva Merchant category template and styled from that. I don't recall whether or not there is reason NOT to use a list although the way their engine parses the pages can be a little different. They wouldn't validate under the previous version but I think they're supposed to now.

In any case, do list links make the whole line active?

I don't know, you're probably right, but I couldn't seem to get it to display in the same way when I tried to write that into my style sheet.

Having looked at the code in the store programming interface, I'm not sure how I would create a conventional list. Those different categories are inserted by the Miva engine. There is only a single element in the template code that I can edit. I just tried switching the CSS for that class from _display: block;_ to _display: list-item;_ just to see if that might make a difference but it didn't.

So you did something wrong or maybe the rule was overridden by an already existing one. Both can be fixed.

Well, the _br_ tag in the link text seems to be causing the problem. Here is the page now.

Store Front

The bottom row has the _display: block;_ set as a style inside each of the _a href_ tags and the top row has it set in the style sheet:



Adding _vertical-align: middle;_ to any or all of the above has no effect.

I will eventually let this thread die, I promise.

Removing _vertical-align: middle;_ from the table cells seems to have fixed the previous alignment problem I had. My final quest is to determine whether or not I can get rid of the padding above and below the bkgd img. I need the padding (padding: 22px 0 23px 0;) in order to reveal the larger bkgd img but unfortunately that creates padding above and below the img as well.

I've added a border to the table for your viewing pleasure. StoreFront

Could I do it with two separate style classes, one for the bkgd img only and one for the text, or would there be inheritance issues?

It's not that I hate the way it looks now, it's just that I'd like to be able to CONTROL EVERYTHING!!! (Just ask my wife.)

FWIW, the web doesn't work that way. See also Web pages aren't printed on paper.

And also, the online tools report a number of markup errors and CSS errors, which should be fixed.

That was a tongue-in-cheek comment, of course. The truth is, however, that most of us are working to achieve consistency. That's what the revision of standards is all about, I think.

As for the markup and CSS errors, yes, I'm sure that there are plenty of those and I'll get to that. Many of the errors come from the syntax(?) that Miva Merchant uses for their _items_ plus lots of deprecated elements, etc. I referred to that earlier in the thread.

So, my question remains...

What was your question again? The two background images that you're using are the same height, so I don't understand your comment about swapping in a "larger" background image on hover.

Thanks for your reply, Darin.

When I said _larger_ I just meant that the images are larger than the text. I added the padding in order to reveal all of the bkgd img above and below the text. Rather than simply padding the text, it appears to be also adding that padding above and below the images.