Forum:Message warning viewers of IE ugliness on pages?

Recently I have seen some pages on my home wiki (BioShock Wiki) that look absolutely terrible in Internet Explorer due to IE's retardedness "partial compatibility" with CSS2.1. Some of these compatibility issues are beyond my meager skills to fix. As a result, I am considering constructing a notice to display on the tops of especially bad pages to let viewers know that Internet Explorer is the cause of the problem. This notice would only show for viewers using Internet Explorer browsers. However, before I take a leap and do this, I wanted to know if any more experienced Wikia editors had advice on the matter. Is this a good idea? Is this a terrible idea? ~ Gardimuer { ʈalk } 06:25, August 29, 2010 (UTC)

THis is all i have to say on the matter: 49uqcWCXaHk --Uberfuzzy 06:33, August 29, 2010 (UTC)


 * What version of Internet Explorer are you having trouble with? Can you show screenshots? What are the pages? -- ◄mendel► 20:53, August 30, 2010 (UTC)
 * I think he means somthing like this. —Manyman (talk) 21:39, August 30, 2010 (UTC)


 * The IE ugliness is on these pages:
 * w:c:bioshock:List of Gatherer's Garden Prices in BioShock
 * w:c:bioshock:List of Gatherer's Garden Prices in BioShock 2
 * Internet Explorer interprets the widths/padding of the tables differently and also does strange things with the table borders. Since the table is... kind-of complex, I don't know of a way to compromise and make it look appropriate in all browsers. I am planning to use a script like this for the message:

//Message for pages with Internet Explorer bugs if (navigator.appName == "Microsoft Internet Explorer"){ function IEComment{ $("#ie-comment").html("This page appears best in browsers that fully support CSS2.1. Users of the Internet Explorer browser may see graphical errors on this page. Have you considered using a different browser? "); }	addOnloadHook(IEComment); }
 * Then place a  in a template at the top of affected pages. ~ Gardimuer { ʈalk } 00:16, August 31, 2010 (UTC)


 * You can place the javascript directly on the page, with the same template that places the div, with a trick.
 * However, the real problem is your table design: you are nesting two tables and expect the columns of the outer table to line up with the inner table, and that doesn't even work on Firefox when my window's narrow. I think it is also a bad idea to make the table autoscroll because the scrollbar is too far down to be usable (was that a change for oasis?). If you can simplify your table, for example, by turning the content in the outer table into annotations, you're left with a single table that will look at least ok (= not broken) even in old IE7.
 * Trying to do design by pixels is usually a guarantee that something will break on some browser; if not now, then in the future. -- ◄mendel► 01:00, August 31, 2010 (UTC)


 * Thanks for the tip about the verbatim; that could come in handy.
 * I am curious about the table looking unaligned in Firefox for you. I tested viewing the page in Firefox, Opera and Safari and they all rendered the same in my browser, regardless of page width. The horizontal scrollbar is something from the Wide image template on Wikipedia. I used it specifically so the table columns wouldn't be squashed out of alignment. I did originally have a reason for not using captions, but it is a small price to pay for browser compatibility, so I'll follow your advice.
 * Thank you for your good common sense. Just goes to show the simplest way is often the best. ~ Gardimuer { ʈalk } 16:41, August 31, 2010 (UTC)
 * I uploaded a screenshot on the Bioshock wiki to satisfy your curiosity. :) I can also confirm that both lists now look very nice even in IE7. -- ◄mendel► 05:27, September 1, 2010 (UTC)


 * Ah, I see. I was assuming a greater minimum width for the browser screen. Again, thanks for your help. ~ Gardimuer { ʈalk } 17:21, September 1, 2010 (UTC)
 * You don't have to keep thanking me, I'm learning a lot through this conversation as well. I wouldn't know what the minimum width is for mobile devices. -- ◄mendel► 18:25, September 1, 2010 (UTC)