Comments: Add yours

1. On July 5th, 2006 at 7:26 pm Paul said:

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.

2. On July 5th, 2006 at 10:51 pm Stuart Colville said:

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.

3. On July 6th, 2006 at 12:37 am Paul said:

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.

4. On September 16th, 2007 at 7:35 pm Scheiro said:

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

5. On February 27th, 2008 at 7:15 pm Dan said:

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?

6. On February 27th, 2008 at 7:26 pm Dan said:

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

7. On February 28th, 2008 at 9:18 am Stuart Colville said:

@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.

8. On February 29th, 2008 at 4:05 pm Dan said:

@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?

9. On March 1st, 2008 at 11:31 am Stuart Colville said:

@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/