CSS Troubles

J

jamie_cockburn

Hi,

I'm not sure if this is possible, but here goes...

I want some sort of area (div preferably, td otherwise) that when
moused over, changes it's style (bgcolor) and is also a link, as in,
the whole area is a link, not just the text inside. I'd like this to
work in both IE and Firefox, and preferably without
any javascript.

Anyone got any clues, cause I've been trying all day with no avail.

The Windows Live Mail (beta) thing, does this exactly in it's side
menu, but the code it's self is beyond me. The menu item's themselves
have the class HoverItem, but searching through the three stylesheets
linked to the page, I cannot find one mention of 'HoverItem'. Can
anyone explain this?

Jamie
 
J

jojo

I'm not sure if this is possible, but here goes...

I want some sort of area (div preferably, td otherwise) that when
moused over, changes it's style (bgcolor) and is also a link, as in,
the whole area is a link, not just the text inside. I'd like this to
work in both IE and Firefox, and preferably without
any javascript.

Anyone got any clues, cause I've been trying all day with no avail.
Make a link (<a>) a block element first. Add some padding around the
text, and - you have your area which is a link. Now you just have to
define a different background-color for a:hover. Done.
The CSS-code:

a.blockLink {
display:block;
padding:20px;
background-color:white;
}
a.blockLink:hover {
background-color:fuchsia;
}

And the link should look like this:

<a class="blockLink" href="www.google.de">This is a link to Google</a>

The only problem: ASFAIK this does not work in IE.

HTH, jojo
 
J

jojo

jojo said:
Make a link (<a>) a block element first. Add some padding around the
text, and - you have your area which is a link. Now you just have to
define a different background-color for a:hover. Done.
The CSS-code:

a.blockLink {
display:block;
padding:20px;
background-color:white;
}
a.blockLink:hover {
background-color:fuchsia;
}

And the link should look like this:

<a class="blockLink" href="www.google.de">This is a link to Google</a>

The only problem: ASFAIK this does not work in IE.

HTH, jojo

Update: seems to work in IE.
 
J

jamie_cockburn

Update: seems to work in IE.

I tried what you suggested, and it doesn't work. You still have to
click on the part of the link text that is text, you can't click the
background to follow the link.
 
J

jojo

I tried what you suggested, and it doesn't work. You still have to
click on the part of the link text that is text, you can't click the
background to follow the link.
That's the part I supposed it does not work in IE. Seems like it really
doesn't work. Perhaps it was a coincidence that it did work one time...
So I will cancel the "Update: it works in IE". But nevertheless it
should work in FF.
 
E

Els

jojo said:
That's the part I supposed it does not work in IE. Seems like it really
doesn't work. Perhaps it was a coincidence that it did work one time...
So I will cancel the "Update: it works in IE". But nevertheless it
should work in FF.

IE needs a width in addition to the display:block.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top