JqueryMobile Not Working Online
My jQuery mobile website works great when previewed in Dreamweaver. However, when I upload it to my server and view it online, nothing works, nothing is aligned...everything is just off badly. I'm posting a link to the files if anyone wants to help ( www.2slickcoders.com/mobileMakers.rar )
But here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="includes/stylesheet_ie.css" />
<![endif]-->
<link href="css/mystyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th
{
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
h4
{
font-size: 16pt;
color: #FFF;
}
</style>
</head>
<body>
<!--HOME PAGE -->
<div data-role="page" id="home" data-transition="slide" class="ui-body-b">
<div data-role="content">
<div id="imgContainer" </div>
<div id="titleContainer" </div>
<!--LISTVIEW-CONTROL GROUP -->
<ul data-role="listview" data-role="controlgroup" data-type="vertical" id="listButtons">
<li><a href="#about"><img src='images/about.png' class='ui-li-icon'/>About Us</a></li>
<li><a href="#services"><img src='images/services.png' class='ui-li-icon'/>What We Do</a></li>
<li><a href="#gallery"><img src='images/gallery.png' class='ui-li-icon'/>Gallery</a></li>
<li><a href="#testimo"><img src='images/testimo.png' class='ui-li-icon'/>Testimonials</a></li>
<li><a href="#contact"><img src='images/contact.png' class='ui-li-icon'/>Contact Us</a></li>
</ul>
</div>
<div data-role="footer" data-id="theFoot" data-position="fixed">
<h4>copyright © 2012</h4>
</div>
</div>
<!--ABOUT US PAGE -->
<div data-role="page" id="about" data-transition="slide" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>ABOUT US</h1>
</div>
<div data-role="content">
<div id="aboutimgCon" </div>
</div>
<div data-role="footer" data-id="theFoot" data-theme="b" data-position="fixed">
<h4>copyright © 2012</h4>
</div>
</div>
<!--SERVICES PAGE -->
<div data-role="page" id="services" data-transition="slide" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>What We Do</h1>
</div>
<div data-role="content">
<div id="servicesimgCon" </div>
</div>
<div data-role="footer" data-id="theFoot" data-theme="b" data-position="fixed">
<h4>copyright © 2012</h4>
</div>
</div>
<!--GALLERY PAGE -->
<div data-role="page" id="gallery" data-transition="slide" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>The Gallery</h1>
</div>
<div data-role="content">
<div id="galleryimgCon"</div>
</div>
<div data-role="footer" data-id="theFoot" data-theme="b" data-position="fixed">
<h4>copyright © 2012</h4>
</div>
</div>
<!--TESTIMONIALS PAGE -->
<div data-role="page" id="testimo" data-transition="slide" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>Testimonials</h1>
</div>
<div data-role="content">
<p align="center"> "...Mobile Makers ROCK!..."</p>
</div>
<div data-role="footer" data-id="theFoot" data-theme="b" data-position="fixed">
<h4>copyright © 2012</h4>
</div>
</div>
<!--CONTACT PAGE -->
<div data-role="page" id="contact" data-transition="slide" data-add-back-btn="true">
<div data-role="header" data-theme="b">
<h1>Contact Us</h1>
</div>
<div data-role="content">
<div id="contactimgCon" </div>
<p><strong>Mobile Makers, LLC</strong></p>
<p>2121 Columbus Avenue</p>
<p>Park West Financial Station</p>
<p>New York, N.Y. 10025</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Call</a>
<a href="#" data-role="button">Mail</a>
<a href="#" data-role="button">Text</a>
</div>
</div>
<div data-role="footer" data-id="theFoot" data-theme="b" data-position="fixed">
<h4>copyright © 2012</h4>
</div>
</div>
</body>
</html>
HERE'S THE CSS file:
@charset "utf-8";
body
{
}
#h1
{
font:Georgia, "Times New Roman", Times, serif;
font-size:7px;
}
#h4
{
font-family:Tahoma, Geneva, sans-serif;
font-size:19px;
}
#home
{
background-image:url(../images/homeBakk.png);
background-repeat:no-repeat;
text-align: center;
}
#about
{
background-color:#FFF;
text-align: center;
}
#services
{
text-align: center;
}
#contact
{
text-align: center;
background-color:#FFF;
}
#imgContainer
{
width:164px;;
height:149px;
background-image:url(../images/homeImage.png);
background-repeat:no-repeat;
margin-left: auto ;
margin-right: auto ;
}
#titleContainer
{
width:184px;
height:65px;
background-image:url(../images/tTITLE.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
#listButtons
{
margin-top:10px;
}
#aboutimgCon
{
width: 300px;
height:140px;
background-color:#ff0;
margin-left:auto;
margin-right:auto;
}
#servicesimgCon
{
width: 300px;
height:140px;
background-color:#000;
border:1px solid;
margin-left:auto;
margin-right:auto;
background-image:url(../images/servicesImage.png);
background-repeat:no-repeat;
}
#galleryimgCon
{
width: 300px;
height:140px;
background-color:#000;
margin-left:auto;
margin-right:auto;
}
#contactimgCon
{
width: 300px;
height:140px;
background-color:#f00;
margin-left:auto;
margin-right:auto;
background-image:url(../images/googlemaps.png);
background-repeat:no-repeat;
border:1px solid;
}
THANKS IN ADVANCE FOR ANY ASSISTANCE...