Stylesheets - Trouble with CSS Rollovers.

Author

Trouble with CSS Rollovers.

webguru

2005-09-24, 4:21 am

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="#"> </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!

webguru

2005-09-24, 4:21 am

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!

Spartanicus

2005-09-24, 4:21 am

"webguru" <ralphquarles@hotmail.com> wrote:

><TD width="41">
> <a class="go" href="#"> </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

webguru

2005-09-24, 6:20 pm

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

webguru

2005-09-24, 6:20 pm

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;
}

Spartanicus

2005-09-24, 6:20 pm

"webguru" <ralphquarles@hotmail.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

Beauregard T. Shagnasty

2005-09-24, 6:20 pm

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

Els

2005-09-24, 6:20 pm

Beauregard T. Shagnasty wrote:

> webguru wrote:
>
>
> Good plan.
>
>
> 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 -

Beauregard T. Shagnasty

2005-09-24, 6:20 pm

Els wrote:

> Beauregard T. Shagnasty wrote:
>
>
> <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

2005-09-24, 6:20 pm

Janusz 'Kali' Kaliszczak wrote:

> Beauregard T. Shagnasty wrote:
>
[Els][color=darkred]
>
> A heard this:
> "LoVe & HAte" and "LoVe, XXXX, HAte" :)
> Easier to remember :) IMHO :)

And you also have to remember .. is it the third letter of the first
word and second letter of the last word, or do I have that backwards?
LOHT... ? :-)

Most mnemonics use the first letter of each word, though I don't think
there is a real rule governing that...

--
-bts
-Visit the zoo in Las Vegas

Els

2005-09-24, 6:20 pm

Beauregard T. Shagnasty wrote:

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

AFAICT there isn't even a Las Vegas... :P

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

Janusz 'Kali' Kaliszczak

2005-09-24, 6:20 pm

Beauregard T. Shagnasty wrote:

> And you also have to remember .. is it the third letter of the first
> word and second letter of the last word, or do I have that backwards?
> LOHT... ? :-)
>
> Most mnemonics use the first letter of each word, though I don't think
> there is a real rule governing that...

But I know that there should be LVFHA, but those rules let me just
remind the sequence

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

Andy Dingley

2005-09-25, 10:25 pm

On Sat, 24 Sep 2005 14:19:31 GMT, "Beauregard T. Shagnasty"
<a.nony.mous@example.invalid> wrote:

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

So where do all the tigers live ?

webguru

2005-09-26, 3:18 am

BTS,

Thanks for your positive input. I appreciate somebody actually being
helpful instead of just posting abnoxious comments without backing them
up. God speed.

Webguru