Troubleshooting Browser Issues with MediaWiki

From TroubleshootingWiki

MediaWiki

Source Book

ISBN	978-1-847195-20-3
Publisher	Packt Publishing
Author(s)	Richard Carter

[edit] Troubleshooting Browser Issues with MediaWiki

Our new skin for the JazzMeet wiki appears to function correctly in the following browsers: Internet Explorer 7, Firefox 2, and Opera 9. In this tutorial, we will look at the following:

The modes of interpretation that browsers apply to CSS: Standards mode and Quirks mode
Conditional comments for Internet Explorer
Quick fixes to common quirks in Internet Explorer
Fixes for bugs in other browsers, such as Opera and Firefox

[edit] Browser Modes

Internet Explorer and other Internet browsers have two modes when it comes to interpreting your CSS: Standards mode and Quirks mode.

Quirks mode helps browsers to display websites written in older HTML as they would have been displayed when they were written. If they were displayed within Standards mode, these (probably table-based) designs would break.
Standards mode is used to interpret websites that provide a doctype (even if the document itself does not actually validate to the provided doctype).

[edit] Standards Mode

The use of a doctype, such as the following one, triggers Standards mode in most (if not all) modern browsers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[edit] Quirks Mode

Quirks mode is used by browsers for websites that do not present a doctype at the top of the document.

For more information on Quirks mode, Wikipedia has an excellent article: http://en.wikipedia.org/wiki/Quirks_mode

Most errors displayed in webpages can be fixed with the application of the correct doctype. It is often worth experimenting with the various doctypes before attempting anything drastic to fix a problem.

[edit] Conditional Comments

Because the great majority of web designers use browsers that are more Standards-compliant than Internet Explorer - for example, Firefox, Opera, and Safari "bugs" tend to appear in some pages when the pages are viewed in Internet Explorer, rather than Firefox.

Conditional comments allow us to serve different stylesheets not only for Internet Explorer, but even targeted to individual version of Internet Explorer.

A conditional comment will be read as a traditional comment in browsers other than Internet Explorer, that is, its contents will be ignored. But Internet Explorer will recognize the syntax of the conditional comments and apply or display whatever is shown within the comment, should the condition apply to the version of Internet Explorer currently interpreting the webpage.

[edit] Versionless Conditional Comments in Internet Explorer

If you wish to supply a stylesheet or other content to the visitors of your wiki using Internet Explorer, simply nest it within the following conditional comment syntax:

 <!--[if IE]>
 This will appear in Internet Explorer, but no other browsers.
 <![endif]-->

For example, if we want to promote the Opera Internet browser (http://www.opera.com) to JazzMeet's visitors using Internet Explorer, we could insert the following conditional comment in a suitable place in our MediaWiki skin template:

 <!--[if IE]>

<div id="use-opera">

Welcome to <strong>JazzMeet</strong>! Have you considered using another browser such as <a href="http://www.opera.com" title="Opera browser">Opera</a>?

</div>
 <![endif]-->

We can apply some styling to the #use-opera ID in JazzMeet's CSS to lessen its focus:

 #use-opera {
 background: #E6E4D8;
 border-bottom: 2px #8C1425 solid;
 color: #38230C;
 font-size: 90%;
 padding: 10px;
 }
 #use-opera a {
 color: #8C1425;
 }

Visitors to JazzMeet will now be met with a view similar to the following one for visitors who visit the wiki in Internet Explorer:

In a browser such as Firefox or Opera, we don't see the message:

[edit] Version-Based Conditional Comments in Internet Explorer

We are able to focus on specific versions of Internet Explorer in the following three ways:

lt(less than): If the visitor is using a version of Internet Explorer less than the given value, a message is displayed to your wiki's visitors, for example .
gte(greater than or equal to): If the visitor is using a version of Internet Explorer greater than or equal to the given value, a message is displayed to your wiki's visitors for example
Lastly, you can specify a particular version of Internet Explorer, for example .

If you have added the ability for the users to add videos from video sharing websites, such as Google Video and YouTube, with the addition of the VideoFlash extension for MediaWiki. You may want to inform visitors who are using versions of Internet Explorer of less than five to upgrade their browsers to be able to view these videos that we can view with the addition of a conditional comment:

<!--[lt IE 5]>
 <div id="upgrade-browser">
 In order to view videos and other media in the <strong>JazzMeet</strong> website, we suggest you <a 
href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Upgrade your browser">upgrade your 
version of Internet Explorer</a>.
 </div>

<![endif]-->

We can apply the same styling as our earlier conditional message:

 #use-opera,

#upgrade-browser {
 background: #E6E4D8;
 border-bottom: 2px #8C1425 solid;
 color: #38230C;
 font-size: 90%;
 padding: 10px;
 }
 #use-opera a,

#upgrade-browser a {
 color: #8C1425;
 }

This presents the following message in versions 4 or less in Internet Explorer:

[edit] Stylesheets and Conditional Comments

Another use for these conditional comments is to supply additional stylesheets to Internet Explorer in order to fix discrepancies in the design. Firstly, we will look at some of the major problems that affect each version of Internet Explorer, and then apply fixes for these to our new skin for the JazzMeet wiki.

[edit] Conditional Stylesheets

By adding a conditional comment to the <head> section of our MediaWiki skin template, we can supply another stylesheet to make some changes to the design for a specific version of Internet Explorer. The following example shows how to link to a stylesheet targeting only Internet Explorer 5:

 <head>
 <!-- other head elements -->
 <!--[IE 5]>
 <style type="text/css" title="IE5-fixes" media="screen">
 <!--@import "skins/jazzmeet/ie5fixes.css";-->
 </style>
 <![endif]-->
 </head>

Some older versions of Internet Explorer may still be popular among some of your wiki's visitors, and it may be worth making sure your design is compatible with these.

[edit] Internet Explorer 5 Bugs

There are a number of bugs in Internet Explorer 5 that are easily fixed once you know how to do so:

Background images (such as those used in external links in MediaWiki) do not show.
The font size of Internet Explorer 5 and 5.5 is offset compared to other browsers.

[edit] Background Image Bug

JazzMeet's CSS style links to pages on the wiki that have not been created yet, as follows:

Because Internet Explorer 5 does not render these nicely, we will need to remove these background images. We can create a new stylesheet, ie5fixes.css, in the skins/ directory of our MediaWiki installation, and link to it in the <head> of our MediaWiki skin as demonstrated above.

We can then add CSS to overwrite previous styling associated with the "new article" link styling:

 a.new {
 background: none;
 padding: 0;
 }

This removes the background image and the padding given for external links in the previous CSS for JazzMeet's skin:

[edit] Font-Sizing Bug

Internet Explorer 5 and Internet Explorer 5.5 do not interpret the font-size you set as other browsers do. You can correct this by adding the following CSS to the ie5fixes.css file:

 body {
 font-size: xx-small
 }

This simply tells Internet Explorer 5 to resize the text to a smaller size than other browsers, making the size of text appear consistent across the browsers.

[edit] Cursor Hand bug

Another noticeable bug in Internet Explorer 5.5 is that the "pointer" cursor does not appear when you hover over the logo. This can be addressed by the following CSS fix from MonoBook's skin:

 #p-logo a,
 #p-logo a:hover {
  cursor: pointer;
 }

[edit] Internet Explorer 6 Bugs

Some of the common bugs in Internet Explorer 6 that we will fix are as follows:

The "double-margin" problem
Inline list items' contents are only partially displayed

[edit] Double-Margin Bug

The double-margin bug occurs in Internet Explorer when a floated element, such as a div, is given a margin on the side where it is floated.

For example, assume that your MediaWiki skin contains the following HTML:

 <div id="div-one">
  <div id="div-two">
 Div two.
  </div>
 </div>

The highlighted CSS causes some problem in Internet Explorer:

 #div-one {
 background: #222;
 height: 75px;
 }
 
 #div-two {
  background: #9C0;
 height: 50px;

float: left;

margin-left: 10px
 width: 300px;
 }

Although the colors are just there to show where the two divs are positioned, the float and margin cause problems. In Opera, Firefox, and Safari, this is displayed perfectly:

In Internet Explorer 6, the margin alongside the left of the smaller (green) box is doubled:

Luckily, the fix for this bug is simple. Just add display: inline to the inner div:

 #div-two {
 background: #9C0;
 height: 50px;

display: inline;
 float: left;
 margin-left: 10px
 width: 300px;
 }

The inner container is now displayed as follows in Opera, Firefox, and Safari:

[edit] Inline List Items Partially Displayed

Inline lists not being displayed properly is a common problem in Internet Explorer. To demonstrate the problem, we can create an unordered list of hyperlinks:

 <ul id="test">
 <li><a href="#" title="Link title">Link</a></li>
 <li><a href="#" title="Link title">Link</a></li>
 <li><a href="#" title="Link title">Link</a></li>
 </ul>

We can now style these to display inline with CSS. Because such styling is usually used to style a list of links as a menu within the webpage, we will add some padding to the list item link:

 ul#test {
 list-style-type: none;
 }
 #test li {
 display: inline;
 }
 #test li a {
 background: #8C1425;
 color: #FFF
 padding: 10px;
 }

In the earlier versions of Internet Explorer, this does not display as we intended:

Firefox, Opera, Safari, and Internet Explorer 7 display it as intended:

To remedy the bug, we can apply position: relative to links within the list items:

 #test li a {
 background: #8C1425;
 color: #FFF
 padding: 10px;

position: relative;
 }

Internet Explorer now displays the links as the other browsers do, and without the use of a conditional comment to apply additional style to the elements in Internet Explorer:

[edit] Bugs in Other Browsers

Unlike Internet Explorer, there is no standard way of determining a browser or its version in HTML alone. To target separate stylesheets at visitors to your wiki using these browsers, the easiest way is probably through the use of JavaScript, as described by Quirks Mode: http://www.quirksmode.org/js/detect.html

[edit] Firefox Bugs

Bugs in Firefox are less common than in Internet Explorer, but there are some things that may be useful to fix, including empty divs.

[edit] Empty Divs Not Clearing

Some versions of Firefox will not properly interpret an empty div that has the clear: both CSS attribute assigned to it. To fix this, simply give some padding to the div as follows: padding-top: .01em

[edit] Testing your Design in Multiple Browsers

It is not easy to spot flaws in your design as, even if you have many browsers installed on your computer, you will almost certainly not have access to every browser on every platform.

You can use services such as BrowserCam (http://www.browsercam.com) to view your MediaWiki skin's design in multiple browsers without needing access to different operating systems:

Although BrowserCam is not a free service, you can try it for a limited period with a free trial.

BrowserCam also allows you to see the design as it would be displayed on different devices, including Blackberry handheld devices and other PDAs (personal digital assistants).

[edit] Cheaper Alternatives for Testing

If you are redesigning an existing wiki, a cheaper alternative could be to ask a smaller portion of your wiki's community to test a new design before you release it to your live website. Alternatively, you can ask friends and family to test the design on as many different computers and browsers as possible.

[edit] Additional References

For instructions on Installing MediaWiki, click here
For instructions on Customizing MediaWiki, click here
For instructions on Creating Mediawiki Template, click here

[edit] Source

The source of this content is Appendix A: Troubleshooting Browser Issues with MediaWiki of MediaWiki Skins Design by Richard Carter (Packt Publishing, 2008).

Retrieved from "http://www.troubleshootingwiki.org/Troubleshooting_Browser_Issues_with_MediaWiki"

Categories: Open Source | PHP