cell border rollover CSS

Freeway
1

I have a table of 1 row 4 columns, cell spacing 0, cell padding 4, border 0. Each cell contains an image/graphic item with an action link to a larger photo.

I want the cell border of these cells to be outlined white when rolled over.

I have set up an .imgcell class with a standard and hover state, declarations thus:

.imgcell {
border:1px solid #999999;
}

.imgcell:hover {
border:1px solid #ffffff;
}

The cells have then been given this class through the ‘extended’ dialogue (cell extended, not row)

The rollover effect works in Safari, but not in Firefox nor IE6.

Draft can be seen at www.shonephotography.com/ras3/filmtv.html - rollover the left links to get the pics, then roll over the pics - see the difference in Safari and Firefox.

Any ideas?

thx, Hugh

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

This should work in Firefox on both Macintosh and Windows, I’m
surprised if you aren’t seeing the effect. There may be another style
that is being given a higher priority than your class. Try adding td
to the mix (add it to the Tag field in the Edit Style dialog, or if
you’re hand-coding this, make your declaration:

td.imgcell { ...  }

The larger issue is that it won’t work at all on IE. I know this is
fact on IE6, it may be fixed in 7 but I’m not sure. In any case, it’s
going to be a long time before IE6 is really gone. Ever seen those
Resident Evil movies, with the zombies?

What will work, on every browser, is if you add the effect to the A
tag. A:hover is supported in everything that can connect to the Web.
You will need to remove the padding from your TD and add it to your
A, then set the A to display:block. Then whenever someone rolls over
the A, it will light up the entire cell.

So if your declaration was like this previously:

td.imgcell {
	padding: 4px 6px;
	border: 1px solid #ccc;
}
td.imgcell:hover {
	border: 1px solid #fff;
}

You would make it this:

td.imgcell {
	padding: 0;
	border: none;
}
td.imgcell a {
	display:block;
	padding: 4px 6px;
	border: 1px solid #ccc;
}
td.imgcell a:hover {
	border: 1px solid #fff;
}

And that would get you the same effect, in all browsers. One gotcha
waiting here – this will only work if the link is the only thing in
the cell. Otherwise, your link text will simply take up a single line
within the cell, and all other text will run above and below it. But
this is the basic technique that I use to make HTML menu navigation.
It works very well, and the nice thing about it is that you get a
nice big target for your link, not just the area of the text itself.

Walter

On Feb 11, 2008, at 8:24 AM, hugh wrote:

I have a table of 1 row 4 columns, cell spacing 0, cell padding 4,
border 0. Each cell contains an image/graphic item with an action
link to a larger photo.

I want the cell border of these cells to be outlined white when
rolled over.

I have set up an .imgcell class with a standard and hover state,
declarations thus:

.imgcell {
border:1px solid #999999;
}

.imgcell:hover {
border:1px solid #ffffff;
}

The cells have then been given this class through the ‘extended’
dialogue (cell extended, not row)

The rollover effect works in Safari, but not in Firefox nor IE6.

Draft can be seen at www.shonephotography.com/ras3/filmtv.html -
rollover the left links to get the pics, then roll over the pics -
see the difference in Safari and Firefox.

Any ideas?

thx, Hugh

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walter,

Food for thought there, thanks.

I’m not quite sure I understand you when you say “…will only work if the link is the only thing in the cell”. What is in the cell is an image which has had a pic-to-new-window action attached to it. Does that constitute an A (link) ???

Are you also saying remove the padding from the table setup, and then declare the padding in the class?

As you can see from the page, I also use CSS for my menus! Sometimes I do use the ‘block’ declaration, but find it has to be experimented with, substantially, to get the block to fit the cell…!!! But agreed, a useful way of doing menus (ps. how can you do drop downs from CSS menus?)

Anyway, I’ll try what you suggest, many thanks.

Hugh

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Yes, and yes!

On Feb 11, 2008, at 10:45 AM, hugh wrote:

Hi Walter,

Food for thought there, thanks.

I’m not quite sure I understand you when you say “…will only work
if the link is the only thing in the cell”. What is in the cell is
an image which has had a pic-to-new-window action attached to it.
Does that constitute an A (link) ???

Take a look at the published code to be sure, but yes. When I say
that there can’t be anything but the A in there, it means that
anything enclosed by the A is counted as being “the A”. Now Freeway
loves to throw a P tag into table cells, for no earthly reason I can
divine. So you may need to fuss with this a bit (or maybe not). Try
it and see.

Are you also saying remove the padding from the table setup, and
then declare the padding in the class?

If you need to have padding around your image, and you want the
outline of the cell to change color when you hover, then yes. This
trick will substitute padding inside the cell for padding inside the
A, and the two are indistinguishable from one another in that case.
There’s a third way to do this, and that’s putting the padding into
the image itself, but if you’re already working with default padding
in the table itself, then this trick will work the way you want it to.

As you can see from the page, I also use CSS for my menus!
Sometimes I do use the ‘block’ declaration, but find it has to be
experimented with, substantially, to get the block to fit the
cell…!!! But agreed, a useful way of doing menus (ps. how can you
do drop downs from CSS menus?)

In Freeway 5, you can do pure CSS drop-downs. In Freeway 4, the Menu
Bar action will let you put images in the top-level menu bar, but the
drop-downs themselves have to be made out of text. Give that a try.

Anyway, I’ll try what you suggest, many thanks.

Hugh

You’re welcome!

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options