CSS for a delete button with a hover state 2

[JRough]

Sorry, but I couldn't figure out how to delete my earlier post.
Since this is in a table, I changed the html to a colspan for the .delete .x class instead of a <div class="delete><span class="x">
<td colspan=1 class = "delete" class="x">x<\td><\tr>
but it still has the same css and link,
janisrough.dyndns.biz/todo2.html, but since I did that the hover doesn't work at all but the Javascript to access the class will work better because you can't have a span in the <td> of a <table>.

and as I mentioned, I would love to get something that remotely looked like a google delete button.

thanks,

.delete {

width:12px;
height:24px;
line-height:24px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
.delete .x {
color:#A1B9ED;
cursor:pointer;
//display:none;
}
/* Set the hover state of "X" */
.delete .x:hover {
color:#36c;

}
/* Clear floats */
.fclear {clear:both}

[Ben C]

On 2012-12-11, JRough <jlr...@yahoo.com> wrote:
> Sorry, but I couldn't figure out how to delete my earlier post.

You can't delete posts.

> Since
> this is in a table, I changed the html to a colspan for the .delete
> .x class instead of a <div class="delete><span class="x">
><td colspan=1 class = "delete" class="x">x<\td><\tr>

If you wanted to select that it, it would be

.delete.x { ... }

It's important there's no space.

.delete .x { ... }

Means things with class x that are descendents of things with class
delete.

> but it still has
>the same css and link, janisrough.dyndns.biz/todo2.html, but since I
>did that the hover doesn't work at all but the Javascript to access the
>class will work better because you can't have a span in the <td> of a
><table>.
>
> and as I mentioned, I would love to get something that remotely looked
> like a google delete button.

I don't really know what a google delete button looks like, but the
usual way I do this kind of thing is to make a png that's say 64x32,
consisting of two versions of the button side-by-side. Then I have CSS
like this:

.my_button
{
display: inline-block;
width: 32px;
height: 32px;
background: url('button.png')'
}

.my_button:hover
{
cursor: pointer;
background-position: 32px top;
}

This way you aren't relying on anything like border-radius (which won't
work in some older browsers, and isn't always rendered that nicely in
others).

Putting both versions of the button in a single image also has the
benefit that the browser downloads it all at once, so you can be pretty
sure the hovered-over graphics will be available at once.

[...]

> /* Set default state of "X" and hide it */
> .delete .x {
> color:#A1B9ED;
> cursor:pointer;
> //display:none;
> }

That sets those things on an element with a class of "x" that's a
descendent of one with a class of "delete". But your actual tds with the
xs in them just have the "delete" class and contain an "x", but nothing
with class "x".

So just get rid of the .x

> /* Set the hover state of "X" */
> .delete .x:hover {
> color:#36c;

Also here. Then things start working a bit.