www.webdeveloper.com
Results 1 to 7 of 7

Thread: Website Displays different on all devices

  1. #1
    Join Date
    Jul 2010
    Posts
    6

    Angry 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.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,917
    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

  3. #3
    Join Date
    Jul 2010
    Posts
    6
    An example?

  4. #4
    Join Date
    Jan 2013
    Posts
    1
    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.

  5. #5
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Do not aspire to "pixel perfect" layouts

    You Can't Get Every Page to Look Identical

  6. #6
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    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
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  7. #7
    Join Date
    Jan 2007
    Posts
    110
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles