Website Displays different on all devices

**ttzary** · 01-04-2013, 07:59 PM

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.

**tracknut** · 01-05-2013, 09:18 AM

Firstly, you have no doctype declaration, so your page is rendered in quirks mode. Not a good thing.

Secondly, you list a bunch of mobile devices with varying screen sizes, but your code is full of absolutely positioned elements, measured in pixels. As an example, look at this:

Code:

#wordsofwisdom {
	position:absolute;
	top:250px;
	left:40px;
	font:Verdana, Geneva, sans-serif;
	font-size:30px;
	font-weight:500;
}

I don't know the size of an ipod touch, but where do you expect this div to display, if you force it to be 250px down from the top of the page? As much as possible, your positioning should all use the box model with floats as needed, and margins should be in percentages or just a couple pixels. If you need absolute or relative positioning, again put them in percentages.

Dave

**ttzary** · 01-05-2013, 10:24 PM

An example?

**lucymaclellan99** · 01-12-2013, 03:15 AM

Yes website will display different depend on your device but today people also make a mobile website which is most famous because today people was increase those are use iphone or any other smart phone they always use Internet through phone.

**polyglot** · 01-16-2013, 07:58 PM

Do not aspire to "pixel perfect" layouts

You Can't Get Every Page to Look Identical

**polyglot** · 01-16-2013, 09:14 PM

Please excuse my previous cryptic response - I meant to add that pages will always display somewhat differently in various graphical browsers and that is something to be accepted.

James

**MacPC** · 01-16-2013, 09:48 PM

You need to start learning responsive web design if you intend to develop mobile device friendly site. In RWD, usually you would not use px for width and height, use percentage instead, and read about @media would be a big help.

Thread: Website Displays different on all devices

Thread Tools

Display

Website Displays different on all devices

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions