Different browsers handle scripts differently. For example, I like to see texts Left and Right justified - to me it looks "proper". Ragged right is not attractive to me. IE 5 handles "both" OK - IE 6 produces jumbled-up-rubbish.
How can it be cured ?
By the use of style sheets is one answer.
Hopefully you will recognise the following line from the head of HTM pages.
<%link rel="stylesheet" href="default.css">
It tells the Browser to use the following Style Rules.
body {
background: white
url(byers-writings-1.jpg)
no-repeat;
word-spacing: 1px;
}
#content {
background: #ffffcc;
text-align: justify;
font-family: arial, helvetica, geneva, sans-serif;
position: relative;
top: 100px;
left: 90px;
width: 480px }
#main_text {
background: #ffffcc;
text-align: justify;
font-family: Georgia Ref,Arial,Helvetica;
color: #990000 }
.bullets {
background: #ccccff;
text-align: left;
font-family: Georgia Ref,Arial,Helvetica;
color: black ;
font: bold;
font-size: 12px;
}
#main_left {
background: #ffffcc;
text-align: left;
font-family: Georgia Ref,Arial,Helvetica;
color: #990000 }
.pretext {
background: #ccccff;
font-family: arial, sans-serif;
COLOR: black;
font-size: 14px;
}
.boldBlack {
background: #ccccff;
font-family: arial, sans-serif;
COLOR: black;
font-size: 14px;
font: bold;
}
pre {
background: #ccccff;
font-family: courier;
COLOR: blue;
font-size: 8px;
}
.link_text {
font-size: 14px;
font-family: arial, helvetica, geneva, sans-serif;
font: italic }
.dropCap {
font: 300%/100% serif;
color: #999999;
margin-right: -3px;
}
.bigRed {
font: 250% serif;
color: #FF0000;
}
.copyright {
color: #555;
font-size: 10px;
font-family: Arial, Helvetica, Geneva, sans-serif
}
.question { color: blue;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.question_link { color: blue;
text-decoration: underline;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.chitchatdate { color: red;
font-size: 28px;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.subtitle { color: red;
font-size: 20px;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.bigBlue { color: blue;
font: italic bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.copyTiny {
COLOR: black; FONT-SIZE: 4px;
POSITION: relative;
WIDTH: 150px; HEIGHT: 150PX
}
.copyHuge {
COLOR: red; FONT-SIZE: 24px;
POSITION: relative; WIDTH: 480px
}
.tiny {
COLOR: red; FONT-SIZE: 4px; POSITION: relative
}
.huge {
COLOR: black; FONT-SIZE: 18px; POSITION: relative
}
.hugePre {
COLOR: black; FONT-SIZE: 10px; POSITION: relative
}
I replaced the single line at the head of HTM pages with the following lines.
<SCRIPT language=JavaScript type=text/javascript>
<!--
// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);
if (navigator.appName.indexOf("Internet Explorer") == -1)
{
}
else
{
if (is_ie6)
{
document.write('<link rel="stylesheet" href="default_left.css">');
}
else
{
if (!is_ie5up)
{
}
else
{
document.write('<link rel="stylesheet" href="default.css">');
}
}
}
//-->
</SCRIPT>
It tells the Browser to use either the Style Rules above, below or none, depending on the Type and Version of that Browser.
body {
background: white
url(byers-writings-1.jpg)
no-repeat;
word-spacing: 1px;
}
#content {
background: #ffffcc;
text-align: left;
font-family: arial, helvetica, geneva, sans-serif;
position: relative;
top: 100px;
left: 90px;
width: 480px }
#main_text {
background: #ffffcc;
text-align: left;
font-family: Georgia Ref,Arial,Helvetica;
color: #990000 }
.bullets {
background: #ccccff;
text-align: left;
font-family: Georgia Ref,Arial,Helvetica;
color: black ;
font: bold;
font-size: 12px;
}
#main_left {
background: #ffffcc;
text-align: left;
font-family: Georgia Ref,Arial,Helvetica;
color: #990000 }
.pretext {
background: #ccccff;
font-family: arial, sans-serif;
COLOR: black;
font-size: 14px;
}
.boldBlack {
background: #ccccff;
font-family: arial, sans-serif;
COLOR: black;
font-size: 14px;
font: bold;
}
pre {
background: #ccccff;
font-family: courier;
COLOR: blue;
font-size: 8px;
}
.link_text {
font-size: 14px;
font-family: arial, helvetica, geneva, sans-serif;
font: italic }
.dropCap {
font: 300%/100% serif;
color: #999999;
margin-right: -3px;
}
.bigRed {
font: 250% serif;
color: #FF0000;
}
.copyright {
color: #555;
font-size: 10px;
font-family: Arial, Helvetica, Geneva, sans-serif
}
.question { color: blue;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.question_link { color: blue;
text-decoration: underline;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.chitchatdate { color: red;
font-size: 28px;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.subtitle { color: red;
font-size: 20px;
font: italic small-caps bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.bigBlue { color: blue;
font: italic bold
"minion web Georgia",
"Times New Roman", Times, serif; }
.copyTiny {
COLOR: black; FONT-SIZE: 4px;
POSITION: relative;
WIDTH: 150px; HEIGHT: 150PX
}
.copyHuge {
COLOR: red; FONT-SIZE: 24px;
POSITION: relative; WIDTH: 480px
}
.tiny {
COLOR: red; FONT-SIZE: 4px; POSITION: relative
}
.huge {
COLOR: black; FONT-SIZE: 18px; POSITION: relative
}
.hugePre {
COLOR: black; FONT-SIZE: 10px; POSITION: relative
}
Now there - aint that sweet and simple
!!