Topic: Cell Backgrounds

Does anyone know of a good tutorial to change cell backgrounds on hover. Everytime I try to do it all that changes is the background of the text??

... e'sssaa 'de templar'e ...

td a:hover {background-color: #FFFFFF; display: block;}

It's the display: block that's important here...it converts the anchor so that it's activation area covers the entirety of it's containing element.

Justice 4 Pat Richard

or if you use a standard compliant browser ( understand : neither a 4th generation browser nor IE ) you can simply use

td:hover { background-color:#fff; }

Ok I got the cell background right but another problem came up. Now when I hover over the cell the text inside shifts upwards, WHAT DO I DO WHAT DO I DO!!!!

check that all your padding, margins, and borders are identical (or equivalent in total) in both the normal and hover states.

What do you do? Don't YELL. It's not going ot make it any easier or any more usrgent for us to look at the problem.

Justice 4 Pat Richard

hee hee sorry about that but ummm it still don't work just check my css is it ok?

.box a:link {
height: 21px;
width: 21px;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #151515;
border-right-color: #151515;
border-bottom-color: #151515;
border-left-color: #151515;
background-image: url(assets/images/bg2.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
text-decoration: none;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
}
.box a:hover {
height: 21px;
width: 21px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
background-color: #151515;
display:block;
text-align: center;
vertical-align: middle;
}

You know, it would help if we also had the HTML blurb that is f***ed up, and if you mentionned in which browsers you've tested your code and where it works or not. Anyhow you should check the specifications of CSS.

Never mind fixed it. But I have a nother question. I don't know whether this comes as CSS or JavaScript but how do you get custom tool tips you know like you hover over a link and you get a small description or something like that something like the ones you see on the Windows|Mac Interfaces??



(Edited by templar654 on 04-19-2004 09:24)

See the title attribute in the definition of the A tag in HTML3.2

Yep. Basically:

<a href="blah.html" title="This text will appear in a tooltip.">

No no I know how to do that but how do you get custom tooltips? I'm beginning to think this is more javascript than css.

Explain further or show examples of what you mean by a 'custom tooltip' and we may be able to help you

Justice 4 Pat Richard

custom in the sense that I may be able to put stuff like images or tables in the tooltips. If you've been to Infinite-Fire's website(previous version) you must have seen it, it's was on almost every page.

*yeech* It may also be beneficial for you to learn short-hand CSS. For instance, your code above can be compressed into the following:

.box a:link, .box a:hover {

   height: 21px;

   width: 21px;

   border-width: 2px 1px 0px 1px;

   border: solid #151515;

   background-image: url(assets/images/bg2.gif);

   font: 10px Verdana, Arial, Helvetica, sans-serif;

   color: #999999;

   text-decoration: none;

   letter-spacing: normal;

   text-align: center;

   vertical-align: middle;

}



.box a:hover {

   background-image: none;

   background-color: #151515;

   display: block;

}

"Nothin' like a pro-stabbin' from a pro." -Weadah

It also might help if you actually said thank you once in a while... I've seen a number of your threads where people have helped you with your problems, and not once have you said "Thanks." Call me old fashioned, but I think it's nice to express gratitude.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | Keeper of the Juicy Bits

That, and don't assume that everyone knows the sites that you know. I personally have never heard of this 'Infinite-Fire' in my life, so maybe if you could hunt up an example or two?

Thanks

Justice 4 Pat Richard

I assume this is what he means by custom tooltips: Pure CSS tooltips.

No never mind, made it thanx anyway. I found that page too ozphactor