Now the only issue is that my Column Headings look a bit off... (*See Vertical Alignment issue in screenshot)

What do you think about how that looks?

Would you do anything to improve it?

Sincerely,

Debbie

PaulOB
—
2013-11-16T22:22:29Z —
#5

Hi,

Maybe the bottom border could be closer to the image.

Make sure the image and the anchor around it are both set to display:block and the border will touch the bottom of the image.

ralphm
—
2013-11-16T22:25:09Z —
#6

Personally, I think it looks awful to have a line under the image like that. A much nicer option is to get the image to change on hover (go a bit darker or another color etc.) A sprite image is good for that.

DoubleDee
—
2013-11-17T04:15:35Z —
#7

Paul_O_B said:

Hi,

Maybe the bottom border could be closer to the image.

Make sure the image and the anchor around it are both set to display:block and the border will touch the bottom of the image.

That didn't help.

(Maybe I need to post more??)

Debbie

DoubleDee
—
2013-11-17T04:18:46Z —
#8

ralph_m said:

Personally, I think it looks awful to have a line under the image like that.

Ouch!

ralph_m said:

A much nicer option is to get the image to change on hover (go a bit darker or another color etc.) A sprite image is good for that.

Well, as I'm sure you recall, JavaScript is out for this build.

Is there a way to achieve something that you find more appealing that doesn't require JavaScript?

Looks like a good idea down the road, but since I don't have any Image-Editing Software (e.g. Photoshop), nor do I have any knowledge of such apps, I'm sorta out of luck.

(My flag icon was just downloaded as-is from WikiMedia Commons.)

Sincerely,

Debbie

P.S. I did add a TITLE to the <img> tag with the description "Click to sort by Flag" so if someone hovers over my Flag icon, at least they have that cue.

DoubleDee
—
2013-11-17T20:49:02Z —
#12

Paul_O_B said:

Then its likely that the space under the image is part of your image otherwise the border would touch the image.:)

Well, I see a tiny gap between the image and the border you added in your last post, but it is only maybe 1px, so it could just be an optical illusion in FireBug.

Paul_O_B said:

How about you just give the image a border on hover instead.

I could do that, but my goal was to give Users a visual clue that clicking on the Flag Icon will "Sort by Flag". (For the other columns, I have hyperlinks, so people can see that they can sort by Sender, Subject, and Date.)

I think using the TITLE attribute probably accomplishes the same thing?!

It is starting to look like if I had something like Photoshop it would make my life a lot easier...

Maybe after my website is up, I can download Gimp or Inkscape and start learning them...

Sincerely,

Debbie

P.S. You helped me long ago with a "slice" that I used to create Buttons which when you click on them, look dynamic in that they move a bit. Isn't there a way to do that with my Flag Icon image? I don't recall how you helped me do what I did with my blue Buttons, but they sure look cool!!

... my goal was to give Users a visual clue that clicking on the Flag Icon will "Sort by Flag".

The title-attribute is a good idea (but it's only visible at a hover, while maybe a visitor just doesn't know (s)he can hover there).To make it more clear, the word "sort" can be put in the flag-image itself (with 17px width: just enough space for it :)).As a sprite, with a green flag for the hover state: