The big secret is making a page that resizes itself to fit your resolution (take this forum for instance), although it requires some skill to make it look neat.
Designing a page for Internet Explorer is a bit of a gamble, and I wouldn't advise you to do so, nor should you design it for any other browser - the page should be rendered the same in all browsers. Again, this takes time to learn, but it's becoming increasingly important to do. In the old days, after the browser war had ended, 97% or such used Internet Explorer and their faulty way of making html, and making sites for IE was the obvious choice. Today, 42% of all Eurobeat Prime visitors use Mozilla Firefox meaning they'll have a bad experience visiting your site if it's made for Internet Explorer (I use Firefox myself, and couldn't play any of the songs in the music box

).
Also, you should probably edit the javascript on your first page to something like this:
Code: Select all
<!--
if (screen.width <= 800) {
document.location = "800x600/intro/index2.html";
}
else if (screen.width <= 1024) {
document.location = "1024x768/intro/index2.html";
}
else if (screen.width >= 1280) {
document.location = "1280x1024/intro/index2.html";
}
//-->
so it'll redirect to the
1280x1024/intro/index2.html if you use 1280x1024 or greater instead of giving an error if you use 1600x1200 f.x.
Furthrmore, you should change the background so it becomes a fixed image and not tiled like it is now - I can see 4 Claras in my 1800x1440 resolution, heh.
Here's how to make it friendly for me and others using high resolutions:
In your box.html you have this code:
Code: Select all
</HEAD>
<BODY BGCOLOR="Black" TEXT="White" link="Gray" vlink="Gray" alink="Gray" bgproperties="FIXED" leftmargin=0 marginwidth="0" topmargin=0 marginheight="0" background="mb-1280.jpg" ondragstart="return false" onselectstart="return false" oncontextmenu="return false">
You need to change this to:
Code: Select all
<style type="text/css">
<!--
body {
color: #FFFFFF;
background-color: #000000;
background-image: url(mb-1280.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat:no-repeat;
}
a:link {
color: #999999;
}
a:visited {
color: #999999;
}
a:hover {
color: #999999;
}
a:active {
color: #999999;
}
-->
</style></head>
<body>