Website Displays different on all devices
Hi there,
Just letting you all know that I have coded using html and css before. All the other times, my websites turn out good. On this website, it doesn't. I made it on my macbook. It screws up on my ipad, imac and ipod touch. I am curious why.
On my computer (macbook pro 13"):
http://saskaaastars.ca/computer.png
On my iPad (3rd Gen):
http://saskaaastars.ca/ipad.jpg
Here is my (HTML) code:
HTML Code:
<html>
<head>
<script src="http://saskaaastars.ca/detectmobile.js"></script>
<script>
try {
// This is the URL where mobile
detectmobile.defaultMobileURL = "http://m.saskaaastars.ca";
detectmobile.process();
} catch(e) {
// Make sure that in the fault modes
// we do not interrupt execution of other Javascript code
}
</script>
<title>Saskatchewan AAA Stars | Home</title>
<base href="http://saskaaastars.ca/" />
<link rel="stylesheet" type="text/css" href="http://saskaaastars.ca/style.css" media="screen" />
<script type="text/javascript" src="http://saskaaastars.ca/TacoComponents/MooTools/mootools.js"></script>
<script type="text/javascript" src="http://saskaaastars.ca/TacoComponents/MenuMatic/MenuMatic.js"></script>
<link rel="stylesheet" type="text/css" href="http://saskaaastars.ca/TacoComponents/MenuMatic/MenuMatic_MainMenu.css" />
</head>
<body>
<div id="hidden">
<div id="container">
<div id="menu">
<!-- Start Navigation Menu -->
<ul id="MainMenu">
<li><a href="index.php">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="index.php?id=3">Team Roster</a></li>
<li><a href="index.php?id=4">Schedule</a></li>
<li><a href="index.php?id=5">Information</a></li>
<li><a href="index.php?id=6">News</a></li>
</ul>
</li>
<li><a href="index.php?id=2">Coaching Staff</a></li>
<li><a href="index.php?id=7">Contact</a></li>
</ul>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('load', function() {
var myMenu = new MenuMatic({
id: 'MainMenu',
subMenusContainerId: 'MainMenu_menuContainer',
orientation: 'horizontal',
effect: 'slide & fade',
duration: 800,
hideDelay: 1000,
opacity: 100});
});
</script>
<!-- END Navigation Menu -->
</div>
<div id="logo">
<img src="http://saskaaastars.ca/stars.png" height="150" width="260">
</div>
<div id="wordsofwisdom">
<div id="atmo">"Great Atmosphere"</div><br />
<div id="coachingstaff">"Great Coaching"</div><br />
<div id="fun">"So. Much. Fun."</div>
</div>
<br /><br /><br /><br /><br />
<div id="maincontent">
As an organization, we believe in constantly improving all aspects of the AAA stars including coaching, inter-coach communication, how practices are run, and coach/parent communication.
<br /><br />
<div id="tidbit">We believe that coaching makes a big difference in the development of our young “stars”.</div>
<br />
We are committed to making the AAA Stars an elite team that develops players to their full potential.
<br /><br />
Please feel free to navigate around our site to find out more information on the team, our coaching staff and our players.
<br /><br />
If you are a member of the team, head on over to the <a href="http://saskaaastars.ca/index.php?id=6">News Section</a>.<br />
</div>
</div>
<div id="bottom">
Site Designed by Treyton Zary | <a href="http://m.saskaaastars.ca/index.php?force-mobile">View Mobile Site</a>
</div>
</body>
</html>
And here is my (CSS) code:
Code:
@charset "UTF-8";
/* Stylesheet for Sask AAA Stars, made by Treyton Zary */
body {
background:url(http://treyton.saskaaastars.ca/background.jpg) #A07950;
background-repeat:no-repeat;
}
#hidden {
position:absolute;
top:0px;
bottom:-400px;
left:0px;
right:0px;
}
#menu {
position:relative;
top:-50px;
left:340px;
z-index:9999999;
}
#container {
position:absolute;
top:14%;
left:12%;
right:12%;
bottom:-0%;
display:block;
background:#000000;
border:1px solid #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
#logo {
position:absolute;
top:30px;
left:40px;
z-index:9999;
}
#wordsofwisdom {
position:absolute;
top:250px;
left:40px;
font:Verdana, Geneva, sans-serif;
font-size:30px;
font-weight:500;
}
#atmo {
padding: 5px 10px 5px 10px;
color: #000000;
font-size: 24px;
font-family: Chalkboard;
background-color: #D1B201;
}
#coachingstaff {
padding: 5px 10px 5px 10px;
color: #000000;
font-size: 21px;
font-family: Chalkduster;
background-color: #D1B201;
}
#fun {
padding: 5px 10px 5px 10px;
color: #000000;
font-size: 24px;
font-family:"Lucida Console", Monaco, monospace;
background-color: #D1B201;
}
#maincontent {
position:absolute;
top:45px;
left:35%;
right:50px;
font:Verdana, Geneva, sans-serif;
font-size:24px;
color:#ffffff;
padding-left:4%;
border-left:4px solid #ffffff;
display:block;
}
a:link {
color:#ffffff;
text-decoration:none;
}
a:hover {
color: #AC762F;
text-decoration: none;
}
a:active {
color:#ffffff;
text-decoration:none;
}
a:visited {
color:#ffffff;
text-decoration:none;
}
#divider {
position:absolute;
top:40px;
height:600px;
right:650px;
left:325px;
background:#FFFFFF;
z-index:99999999;
}
#tidbit {
color: #D1B201;
font-weight:900;
}
#bottom {
position:fixed;
bottom:0px;
left:0px;
width:100%;
background:#523E25;
color:#ffffff;
z-index:99999;
border-top:3px solid #ffffff;
text-align:center;
}
Any help is appreciated.
You can view it on http://saskaaastars.ca if needed.
