Servant of two masters
Yes, this is a poor web designer who has to spend a lot of effort to tame and train pages, so that it would be nice to look at them with the help of Internet Explorer, and with the help of Netscape Navigator.
The general rule when writing compatible pages is: there is a certain set of things that can be done both in IE and in NN, but only with the help of different tags or different parameters of the same tag. The reason that we can write compatible pages is because the browser ignores obscure tags and parameters.
Indentation on the page
For an example, let’s figure out how to set the indentation in the <body> tag. If we open the HTML manual that Microsoft offers us, we’ll read there that you can indent the page using the following attributes:
leftmargin – left margin
rightmargin – indent on the right
topmargin – indent from above
bottom margin – bottom margin
Let’s be consistent and open Netscape’s HTML tutorial, where we’ll read that the attributes for indenting look like this:
marginwidth – indent left and right
marginheight – indent above and below
And now we will write code that sets the indentation on the left and on the top and correctly displays both in IE and in NN. You have probably guessed that it should look like this:
<body leftmargin = “0”, topmargin = “0”, marginwidth = “0” marginheight = “0”>
Woah la! Everything is working fine. IE sees only its attributes, and NN its own, and everyone is good :).
How many tricks are there? Do they really need to be remembered? Not at all, you just need to remember a few of the most used and already at the stage of designing a web site discard features that cannot be implemented in both browsers. Yes, this is of course a little annoying, but it’s better to sacrifice some effect a bit than to leave a huge part of visitors overboard our site. Is not it?
It’s better not to use these features.
Here is a list of features provided by a particular browser, but which it is advisable not to use (at least until the appearance of a similar property in another browser).
Using the bgproperties = fixed attribute in the <body> tag. Its appearance makes the background image remain stationary, but, unfortunately, this attribute is supported only by IE, starting with version 2.
Using ActiveX components. Such pages will work exclusively on Windows platforms.
Using the <iframe> tag to create floating frames – exclusively supported by IE4 and higher.
Using the <blink> tag is blinking text. Firstly, it is applicable only in IE, starting with the 3rd version, and secondly, its application does not carry anything but irritation and the desire to immediately leave the page.
Using the <marquee> tag is undesirable for exactly the same reasons as the <blink> tag.
Using NN-specific <multicol>; tag that displays text on a page in several vertical columns, like newspaper columns. Currently, tables should be used for this purpose.
Specifying the width and height of images as a percentage – only IE is supported.
This list, of course, is not complete, but these are the main mistakes. Everything that is described concerns the site exposed on the Internet. If you are creating a website for the internal network (intranet), then you can use whatever you want :).
If from the very beginning you observe some rules when writing pages, then the number of possible errors can be immediately reduced by an order of magnitude. So, I’m probably starting with a list of these rules that you should learn to follow automatically if you want the pages to look nice and expensive in any of the browsers:
Be sure to close all tags (except single ones).
Watch carefully for the nesting of tags – they should not overlap. Do not allow this situation when the external tag closes earlier than the internal one:
<b><i> right</i> </b>
<b><i> wrong</b> </i>
In the <body> tag, it is necessary to prescribe all colors: the background of the page, text, color of links, color of visited links, color of active links or not to prescribe any. Otherwise, a situation may arise that any of the indescribable colors and, therefore, taken from the user’s settings, matches the background color and becomes unreadable.
Attributes containing spaces and other special characters must be enclosed in quotation marks. You can optionally enclose all parameters in quotation marks, but this is optional.
For all images placed in HTML-code, be sure to specify the width, height and thickness of the frame, which must be set to zero, if the image should not have a frame.