Trouble with CSS Rollovers.

Okay, In the comps.language.javascript newsgroup, I was convinced to
use CSS Rollovers instead of javascript. The first rollover went
great. Although I can't get the text to align vertically in the
middle, It's a much cleaner way to do it and it works okay.

However, my second rollover is not as good. This one has no text over
the button, and the CSS looks like this:


a.go:link{
background-image: url(images/Home_08.jpg);
text-decoration: none;
height: 30px;
width: 41px; }

a.go:visited {
text-decoration: none;
height: 30px;
width: 41px; }

a.go:active {
text-decoration: none;
height: 30px;
width: 41px; }

a.go:hover{
background-image: url(images/Home_08_over.jpg);
text-decoration: none;
height: 30px;
width: 41px; }


It's pretty much the same one as my first one, but without the extra
text attributes. My HTML looks like this:


<TD width="41">
<a class="go" href="#">&nbsp;</a>
</TD>


My problem is that when I display my page, nothing shows up in that
cell until I move the mouse over it, and then the rollover image shows
up. When I move it off the cell -- poof -- no image again. I checked
the filename and everything is correct, but no image is showing when
the cursor is not in the section.

This, of course, is not acceptable. Can anyone please help me? Thanks
so much!

I finally figured it out. What I had to do, since there was no text in
the anchor (<A>) was add the following to my CSS file:

a.logo{
background: url(images/Home_10.jpg) no-repeat;
text-decoration: none;
height: 68px;
width: 135px;
}

Now it shows up even though I don't have any text in the link. :0) I
hope this helps somebody else struggling with this!

"webguru" <ralphquarles (AT) hotmail (DOT) com> wrote:

TD width="41"
a class="go" href="#">&nbsp;</a
/TD


My problem is that when I display my page, nothing shows up in that
cell until I move the mouse over it

Your problem is that you are abusing tables and CSS. Tables are for
marking up tabular data, and key to proper usage of CSS is that it's
optional, thus your page should work without it.

--
Spartanicus

I don't understand what you mean by abusing tables. What's optional?
I started with a .PSD graphics, sliced it and saved it for the web.
That produced the table I am using with the images, and I am using CSS
to produce the rollover on the buttons.

Sorry, I am a newbie at this. Is there a better way to do this?

Thanks,

webguru

Oops, I actually meant I had to add this text. I grabbed the wrong
class. :0/

a.go{
background: url(images/Home_08.jpg) no-repeat;
text-decoration: none;
height: 30px;
width: 41px;
}

"webguru" <ralphquarles (AT) hotmail (DOT) com> wrote:

I don't understand what you mean by abusing tables.

Again: Tables are for marking up tabular data.

What's optional?

Again: CSS.

I started with a .PSD graphics, sliced it and saved it for the web.
That produced the table I am using with the images

Image slicing is sooo 1996, high time for you to catch up with the
times.

, and I am using CSS

You are ABusing CSS.

to produce the rollover on the buttons.

Sorry, I am a newbie at this. Is there a better way to do this?

Better way to do what?

--
Spartanicus

webguru wrote:

Okay, In the comps.language.javascript newsgroup, I was convinced to
use CSS Rollovers instead of javascript.

Good plan.

a.go:link{
a.go:visited {
a.go:active {
a.go:hover{

Your classes are out of order. "Las Vegas Has Animals." LVHA ...

--
-bts
-When motorcycling, never follow a pig truck

Beauregard T. Shagnasty wrote:

webguru wrote:

Okay, In the comps.language.javascript newsgroup, I was convinced to
use CSS Rollovers instead of javascript.

Good plan.

a.go:link{
a.go:visited {
a.go:active {
a.go:hover{

Your classes are out of order. "Las Vegas Has Animals." LVHA ...

<cough> ;-)
Las Vegas Forest Has Animals...

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

Beauregard T. Shagnasty wrote:

webguru wrote:

Okay, In the comps.language.javascript newsgroup, I was convinced to
use CSS Rollovers instead of javascript.

Good plan.

a.go:link{
a.go:visited {
a.go:active {
a.go:hover{

Your classes are out of order. "Las Vegas Has Animals." LVHA ...

cough> ;-)
Las Vegas Forest Has Animals...

But .. but .. there is no forest in Las Vegas! <cough> <choke>

--
-bts
-When motorcycling, never follow a pig truck

Beauregard T. Shagnasty wrote:

a.go:link{
a.go:visited {
a.go:active {
a.go:hover{

Your classes are out of order. "Las Vegas Has Animals." LVHA ...

cough> ;-)
Las Vegas Forest Has Animals...


But .. but .. there is no forest in Las Vegas! <cough> <choke

A heard this:
"LoVe & HAte" and "LoVe, Fuck, HAte"
Easier to remember IMHO

--
Janusz 'Kali' Kaliszczak
+ pies rasy *jumnik*
=> http://www.deviantart.com/view/18982956/ <= GG#52055