Webpage Coding
Cross-Compatible CSS
Elsewhere within these pages functions are described that will test the page environment to ensure that its host browser is compliant, and therefore capable of correctly supporting the DOM, CSS, JS and DHTML. With that taken care of you might be tempted to relax...
Unfortunately there are different ways to comply with the CSS specification, different supposedly 'compliant' browsers do not always produce the same results.
The only solution is to provide alternative CSS rules to the browsers, there are several ways to do this, and several particular issues to be aware off.
The main browsers considered here are Internet Explorer 5.0 and the Mozilla Family, primarily Firefox. IE5.0 is the 'quirkiest', FireFox is the de facto standard. IE6 (if used with a valid DOCTYPE) is compliant and interprets the CSS correctly.
Import Hack - For V4 Browsers
The first of these so-called 'hacks' (Caio's Hack) allows early version 4 browsers to be accomodated separately. The implementation of this is discussed in more detail in a later section, basically it relies upon the @import syntax for importing a stylesheet into page not being understood by v4 browsers. A v4 stylesheet can be loaded using the conventional link syntax which is read by v4 browsers and then over-riding the CSS with an imported stylesheet which contains rules for later browsers. Thus:
<style type="text/css">
@import "/css/nowarn.css";
</style>
On this website the 'nowarn.css' simply causes a warning about v4 browsers if that is the case, otherwise the same CSS is read by all browsers from IE5.0 up to the latest FireFox. Sadly they do not all work the same.
The Box Model and its Solution
All HTML elements are treated as boxes, with CSS selectors to determine
their dimensions, especially widths, borders and padding.
Consider the following CSS:
border:10px solid #000000;
padding:10px;
width:200px;
}
At first glance this is a clear instruction to make a box 200px wide with a 10px internal margin (or padding) and a 10px border.
But under IE5.0 the whole box will be 200px between the outside edges, with an effective content width of only 160px.
Other compliant browsers such as FireFox will interpret this differently, with a stricter interpretation; the content will be 200px as specified, with the padding and border widths added to the overall width making the total extreme width 240px;
The solution is to pass two values for the width in such a way that each gets the correct value. To do this we take advantage of the way that each browser interprets backslashes in the CSS selector.
To IE5.x w\idth:240px; is invalid and therefore ignored.
IE6+ and Mozilla based browsers understand that this is an escape
character, and as \i has no meaning it ignores the escape
and so correctly reads this selector.
So now we use the following variation in the CSS, note that the order
of the selectors is important, the IE5.x value must come first, the other
value must over-ride it in the other browsers:
border:10px solid #000000;
padding:10px;
width:240px; All browsers read this
w\idth:200px; IE5.x cannot see this but other browsers can
}
Note! Provided IE6 has a valid DOCTYPE it is fully standards compliant and interprets the box model in the same way as the Mozilla browers. If the DOCTYPE is missing then it reverts to quirks mode and behaves like IE5.x This also affects the way it reads backslashes so this hack works for both IE5.x and IE6.
Proprietary Selectors/Values
Internet Explorer supports a number of proprietary features, that is to say features that are supported by IE alone and do not form part of the standard DOM or CSS specification. Most are minor features and can be ignored, simply accepting that it will not work in non-IE browsers. But some will fail under non-IE browsers that are stricter in their compliance.
For example, to make the mouse pointer appear as a 'hand' as it does when passing over links the following CSS works fine under IE5.x:
cursor:hand;
}
But this fails under Mozilla as 'hand' is not a specified property of the 'cursor' selector. The correct value should be:
cursor:pointer;
}
It might be tempting to utilise the backslash hack here and try the following:
cursor:pointer;
curs\or:pointer;
}
This does work insofaras making the required cursor appear in each browser, but the invalid selector triggers a CSS warning under FireFox so cannot be classed as a valid fix, it's sloppy!
Fortunately, as well as proprietary tags, IE also has some proprietary
features to allow it to read CSS in a way that other browsers can't.
It is possible to add 'rules' into the HTML source code of the page
that only IE will follow and that other browsers will treat as comments
and ignore. Thus:
...
<!-- All other CSS stylesheets first... -->
...
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie_specific.css" />
<![endif]-->
...
</head>
The solution is to put the 'correct' and standard CSS in the main stylesheets and import them in the normal way. This additional stylesheet will only be loaded by IE, as only IE sees that instruction, and should only contain the necessary over-rides for IE-specific selectors such as cursor as in this example.
Non CSS Issues
Stricter JavaScript Syntax Rules
Generally speaking the IE5.x JavaScript interpreter is more forgiving of minor syntax issues when parsing code and addressing the DOM.
For example, under IE positional information can be given directly as: 100 and implictly taken as 100 pixels. But under FireFox this will not work unless the value is properly defined as 100+"px" when being used to change DOM values.
This can be a nuisance and should be the first thing to look for if you have code that works under one browser family (IE) but not the other.
But syntax rules are rules. Learn to obey them and you will write better code!
Link to Top of Page - Undefined Anchors
For example: <a href="#top">Top</a>
provides a link to the top of the page in IE even when the corresponding
anchor <a name="top"> is not present, but Mozilla
based browsers will ignore this unless there is a valid anchor with a name
or id of 'top'.
As a result only <a href="#">Top</a>
should ever be used which works correctly in all browsers.
Further discussions of CSS within these example pages will make no reference to these hacks, it will be assumed that all CSS refers implictly to compliant browsers and that IE5.x is automatically handled with the relevant functions desribed.