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.