Forums

I have always viewed the wiki using Firefox 3.x and have got used to seeing tables with blue borders throughout:

I recently upgraded to Firefox 4 and was surprised to see that it displays tables differently - although the outer border remains blue, the borders between cells are shown in white:

Investigating further, Internet Explorer 8 and 9 also show white cell borders.

Presumably one of these appearances is as intended and the other is incorrect. But which is which?

Firefox3Table.png (2.55 KB)

Firefox4Table.png (2.53 KB)

For what it's worth...

Mozilla/5.0 (Windows; U; Windows NT 5.1; it-IT; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.65 Safari/525.19

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

The blue lines are intended. I need to mess with the CSS a bit, please let me know if you figure out what I'm missing before I get around to it.

Does this page help? Something like

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid rgb(0, 68, 119);
}

I can't test it on an actual smspower page of course, but a separate test seems to work correctly in the three browsers I can test, surprisingly including IE6.

Also let me remind you of this old pic:

In all seriousness, if you can get something to work fine in the major browsers such as Firefox and Chrome, don't bother with IE, nobody should use it anymore now that there are much better alternatives.

The tricky part is that we have both bordered and borderless tables, so I have to make a solution that works both ways, including when they're nested. It now does this:

#wikitext table[border="1"], #wikitext table[border="1"]>tbody>tr, #wikitext table[border="1"]>tbody>tr>td, #wikitext table[border="1"]>tbody>tr>th {
border:1px solid #047;
}

which is frustratingly verbose but seems to do the trick.

Maxim wrote

The blue lines are intended.

That's what I expected (and hoped!).

Maxim wrote

It now does this [...] which is frustratingly verbose but seems to do the trick.

Looks good to me - the blue lines now show in both Firefox (3.6 & 4.0) and Internet Explorer (8 & 9).

Still white in IE6, though.

IE6 doesn't support the CSS "child of" selector (>), and without that, nested tables can't be styled without explicit classnames. I think I don't care about IE6.

Maxim wrote

I think I don't care about IE6.

Now we're talking :)

Well, I want the site to be usable in IE6 and to be half-reasonable in a browser with no CSS. I only got off IE6 at work a few months ago, there are plenty of people who don't have the choice and we don't hate them.

same with opera browser :(

If you are adventurous, try messing with the Opera equivalent of Firebug/Developer Tools/whatever until it looks right and let me know what it needs... I may take a while to get a chance to look at it myself.

Everything looks fine to me in Opera 11.51 (the latest version).

Author	Message
RetroSpark Joined: 08 Dec 2005 Posts: 488 Location: Melbourne, Australia	Inconsistent appearance of tables on different browsers Posted: Wed May 25, 2011 12:54 am
	I have always viewed the wiki using Firefox 3.x and have got used to seeing tables with blue borders throughout: I recently upgraded to Firefox 4 and was surprised to see that it displays tables differently - although the outer border remains blue, the borders between cells are shown in white: Investigating further, Internet Explorer 8 and 9 also show white cell borders. Presumably one of these appearances is as intended and the other is incorrect. But which is which? Firefox3Table.png (2.55 KB) Firefox4Table.png (2.53 KB)

Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Posted: Wed May 25, 2011 2:24 am
Tom Joined: 16 May 2002 Posts: 1356 Location: italy	For what it's worth... Mozilla/5.0 (Windows; U; Windows NT 5.1; it-IT; rv:1.7.12) Gecko/20050919 Firefox/1.0.7 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.65 Safari/525.19 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

Maxim Site Admin Joined: 19 Oct 1999 Posts: 14745 Location: London	Posted: Wed May 25, 2011 7:35 am
	The blue lines are intended. I need to mess with the CSS a bit, please let me know if you figure out what I'm missing before I get around to it.

Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Posted: Wed May 25, 2011 8:15 am
Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Does this page help? Something like table { border-collapse:collapse; } table, td, th { border:1px solid rgb(0, 68, 119); } I can't test it on an actual smspower page of course, but a separate test seems to work correctly in the three browsers I can test, surprisingly including IE6. Also let me remind you of this old pic: In all seriousness, if you can get something to work fine in the major browsers such as Firefox and Chrome, don't bother with IE, nobody should use it anymore now that there are much better alternatives.

Maxim Site Admin Joined: 19 Oct 1999 Posts: 14745 Location: London	Posted: Wed May 25, 2011 9:02 am
	The tricky part is that we have both bordered and borderless tables, so I have to make a solution that works both ways, including when they're nested. It now does this: #wikitext table[border="1"], #wikitext table[border="1"]>tbody>tr, #wikitext table[border="1"]>tbody>tr>td, #wikitext table[border="1"]>tbody>tr>th { border:1px solid #047; } which is frustratingly verbose but seems to do the trick.

RetroSpark Joined: 08 Dec 2005 Posts: 488 Location: Melbourne, Australia	Posted: Wed May 25, 2011 11:20 am
	Maxim wrote The blue lines are intended. That's what I expected (and hoped!). Maxim wrote It now does this [...] which is frustratingly verbose but seems to do the trick. Looks good to me - the blue lines now show in both Firefox (3.6 & 4.0) and Internet Explorer (8 & 9).

Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Posted: Wed May 25, 2011 12:36 pm
Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Still white in IE6, though.

Maxim Site Admin Joined: 19 Oct 1999 Posts: 14745 Location: London	Posted: Wed May 25, 2011 1:20 pm
	IE6 doesn't support the CSS "child of" selector (>), and without that, nested tables can't be styled without explicit classnames. I think I don't care about IE6.

Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Posted: Wed May 25, 2011 2:18 pm
Tom Joined: 16 May 2002 Posts: 1356 Location: italy	Maxim wrote I think I don't care about IE6. Now we're talking :)

Maxim Site Admin Joined: 19 Oct 1999 Posts: 14745 Location: London	Posted: Wed May 25, 2011 2:53 pm
	Well, I want the site to be usable in IE6 and to be half-reasonable in a browser with no CSS. I only got off IE6 at work a few months ago, there are plenty of people who don't have the choice and we don't hate them.

rizvi777 Joined: 31 Jul 2011 Posts: 1	Posted: Sun Jul 31, 2011 2:53 am
rizvi777 Joined: 31 Jul 2011 Posts: 1	same with opera browser :(

Maxim Site Admin Joined: 19 Oct 1999 Posts: 14745 Location: London	Posted: Sun Jul 31, 2011 9:56 am
	If you are adventurous, try messing with the Opera equivalent of Firebug/Developer Tools/whatever until it looks right and let me know what it needs... I may take a while to get a chance to look at it myself.

RetroSpark Joined: 08 Dec 2005 Posts: 488 Location: Melbourne, Australia	Posted: Sun Sep 04, 2011 10:03 pm
	Everything looks fine to me in Opera 11.51 (the latest version).

Forums

View topic - Inconsistent appearance of tables on different browsers