Comments on: Table showcase site

By: Stuart Colville

Stuart Colville — Sat, 01 Mar 2008 11:31:11 +0000

@Dan: Yes that’s right. You simply need to set a class on the tr onmouseover.

There’s a script here, to give you an idea of how it’s done: http://www.htmldog.com/articles/suckerfish/dropdowns/

By: Dan

Dan — Fri, 29 Feb 2008 16:05:09 +0000

@Stuart: thanks. is there any way to use the javascript hover function you had shown above to only use TR’s that have class=”hover” or something like that. Wouldn’t doing that fix the problem?

By: Stuart Colville

Stuart Colville — Thu, 28 Feb 2008 09:18:10 +0000

@Dan: the hover pseudo-class is not supported in IE versions prior to 7 on anything other than anchor elements (a).

To replicate the hover you would have to use javascript to set an additional class on mouseover. However you could also look at it from the perspective that if someone chooses to use IE they will miss out on that specific enhancement.

By: Dan

Dan — Wed, 27 Feb 2008 19:26:41 +0000

more specifically speaking, the hover function is the only function that does not work

By: Dan

Dan — Wed, 27 Feb 2008 19:15:15 +0000

using the above fix for IE rendering, how would I make it so that I can have two data tables with different styles? eg. one is ‘normal’ (without css) the other is ‘grey suits you sir’. I’ve tried giving all td/tr’s in the grey suits you a class name in the html code and the same in the CSS. Though I’m not sure how to give a class name to something such as “thead th”, “tbody tr td”, “tbody tr:hover”, “tbody tr.hoverfix td”. Giving class names to all else it doesn’t seem to fix it the problem of grey’s CSS code being applied to the table that I want to look normal, would that be the javascript that is interfering? Could you provide an example?

By: Scheiro

Scheiro — Sun, 16 Sep 2007 19:35:29 +0000

Thanks Stuart for tables ! CCS works fine and the design of the tables looks very nice.

By: Paul

Paul — Wed, 05 Jul 2006 23:37:18 +0000

Thank you very much for your explanation, and indeed, thank you for the time you took to do an example for me.

I’m certainly no web-design expert, but I help out on other topics where I can.

Thanks again for your work and your time.

Paul.

By: Stuart Colville

Stuart Colville — Wed, 05 Jul 2006 21:51:26 +0000

The font-size issue is caused by not having specified a Doctype. As a result the page is being rendered in Quirksmode.

See http://muffinresearch.co.uk/code/xhtmlandcss/tabletest/ I’ve duplicated what you’ve done with a valid doctype and the font-size rendering in IE and Firefox are now the same.

The :hover pseudo protocol doesn’t work in IE for anything other than links (the a element). Because of this to get the hover effect working in IE you would need to use a touch of DOM scripting to replicate the same effect.

I’ve added an example of how this is done on the same link I mentioned above. Basically the javascript loops through all of the TRs on the page and when the mouse enters the TR a class of hoverfix is added to the TR. When the mouse leaves the TR the same class is removed. The class hoverfix is added into the CSS to use the same rules as all the browsers that support :hover.

Hope this answers your questions.

By: Paul

Paul — Wed, 05 Jul 2006 18:26:24 +0000

Hi,

I’ve been trying your ‘Grey suits you sir! table design, but unfortunately, it seems that sometimes it renders differently in FF and IE. The biggest problem being the font size:
http://geocities.com/narnar2000/

Although here the fonts are the same size, just the hover effect doesn’t work in IE:
http://icant.co.uk/csstablegallery/index.php?css=6

I really like the FF rendering of the design, but is there something I’m missing for IE?

Thanks,

Paul.