My CSS validates on W3C and I have proper container divs and child divs and have float elements within child divs.
The following CSS works in Firefox and Chrome. But cant make out why ie9 dislikes it or vice versa.
The CSS :
.container{margin:0px auto;width:1200px;border:1px solid #e5e4e2;}
.toppanel{width:1200px;text-align:center;height:100px;background-color:#a1b8a3;margin-top:-20px}
.lpanel{float:left;width:250px;height:1000px;border:1px solid #e5e4e2;background-color:#233245;padding:10px;color:white}
.lpanel2{width:190px;height:500px;margin:0px auto;background-color:white;color:maroon;padding:20px;text-align:center;}
.rpanel{float:right;width:250px;height:1000px;border:1px solid #e5e4e2;background-color:#e4e5e2;padding:10px}
.rpanel1{width:250px;margin:0px auto;}.rpanel2{margin:0px auto;width:250px;}
.midpanel{width:800px;height:1000px;border:1px solid #e5e4e2;margin:0px auto;background-color:beige}
.middle1{margin:0px auto;width:800px;}.middlemainimg{padding:10px;}.middlemainimg img{margin:10px;width:270px;height:255px}
.middle1r{float:right;width:300px;height:205px;background-color:white;margin-top:-280px;margin-right:10px;padding:20px}
.middle2{margin:0px auto;width:750px;text-align:center;margin-top:10px;margin-bottom:5px}
.middle3{margin:0px auto;width:600px;margin-top:15px}
.middle4{margin:0px auto;padding:10px;margin-top:0px;float:left;margin-top:10px;margin-left:10px;width:250px}
.middle4r{margin-left:300px;width:470px;background-color:white;height:170px;margin-top:40px}
.middlelast{margin:0px auto;width:750px;height:250px;background-color:white;margin-top:20px;padding:20px;text-align:center;}
.middlelast img{margin-left:30px;width:120px;height:90px;}
.bottompanel{clear:both;width:1200px;height:100px;border:1px solid #e5e4e2;text-align:center;background-color:#cccccc}
.bottompanel ul li{display:inline;margin:10px}
.imgcar {width:140px;height:60px;padding:2px;border:2px solid grey;cursor:pointer;}
#carousel {
width: 600px;
overflow:hidden;
height:75px;
background-color:white;
}
#carousel ul {
width: 1600px;
padding: 3px;
margin: 0;
height:75px;
}
#carousel ul li {
width:750px;
text-align: center;
height: 30px;
list-style: none;
float: left;
}
The HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>NA Plots on Murbad-Karjat Highway</title>
<meta name="title" content="NA Plots on Murbad-Karjat Highway" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="application-name" content="Landshoppe.com - The Free Property Site" />
<meta name="msapplication-tooltip" content="Landshoppe.com - The Free Property Site" />
<meta name="msapplication-window" content="width=1500;height=900" />
<meta name="msapplication-task"
content="name=Search property;action-uri=http://www.landshoppe.com/;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta name="msapplication-task"
content="name=Property Search;action-uri=http://www.landshoppe.com/searchdetails;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta name="msapplication-task"
content="name=Property Registration;action-uri=http://www.landshoppe.com/registration;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta name="msapplication-task"
content="name=Landshoppe Log in;action-uri=http://www.landshoppe.com/Login;icon-uri= http://www.landshoppe.com/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="msvalidate.01" content="8206EB8E37D990E86837A5ED472D65A3" />
<meta name="author" content="landshoppe" />
<meta name="copyright" content="" />
<meta http-equiv="Reply-to" content="anit#landshoppe.com" />
<meta name="ROBOTS" content="noodp,INDEX,FOLLOW" />
<meta name="creation_Date" content="09/30/2012" />
<meta name="revisit-after" content="1 days" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="copyright" content="Landshoppe" />
<meta name="classification" content="Real Estate, Properties, Real Estate Agents, Search Property Online" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" />
<link rel="apple-touch-icon" href="image1013.png" />
<link rel="stylesheet" href="project.css" type="text/css" />
<link rel="stylesheet" href="project.css" type="text/css" media="print" />
<link rel="stylesheet" href="project.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="project.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<link rel="alternate" type="application/rss+xml" title="LANDSHOPPE RSS Feed" href="http://www.landshoppe.com/feed.xml" />
<link href='apple_image1013.JPG' rel='apple-touch-icon' />
</head>
<body>
<!-- <script type="text/javascript" src="jav.js"></script>-->
<!--[if lte IE 6]>
<div id="warning">
<h4 class="red">Your Browser Is Not Supported!</h4><br>
<p>Please upgrade to <span class='bold'>Close Window</span></p>
</div>
<![endif]-->
<!--[if lte IE 7]>
<div id="warning">
<h4 class="red">Your Browser Is Not Supported!</h4>
<p>Please upgrade to <span class='bold'>Close Window</span></p>
</div>
<![endif]-->
<div class="container">
<div class="toppanel">
<a href="index.htm" title="The Free Property Website">
<img src="logo.jpg" alt="The Free Property Website" style="float:left;margin:10px;width:150px;height:80px" />
</a>
<a href="index.htm" title="Best Real Estate Website">
<img src="image1013.png" alt="Best Real Estate Website" style="float:right;margin:10px;width:150px;height:80px" />
</a>
<h1>Landshoppe</h1>
<h3>The Property Destination</h3></div>
<div class="lpanel">
<div>
<h3>Landshoppe</h3>
</div>
<div>
<p>Established in 2009 as an offline Real Estate Agency, Landshoppe became a Free Real Estate portal in 2010 to cater to
the online demand for quick and easy property search/sale and rentals. Indigenously developed, the portal has evolved
continously - offering online and offline real estate services.</p>
</div>
<div class="lpanel2">
<h3>Other Projects</h3>
<ul>
<li>Project 1
<br />Location 1</li>
<li>Project 2
<br />Location 2</li>
<li>Project 3
<br />Location 3</li>
</ul>
</div>
</div>
<div class="rpanel">
<div class="rpanel1">
<!-- <iframe width="260" height="250" frameborder="0" marginheight="0" marginwidth="0"
scrolling="no" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=&q=Thane&aq=&sll=18.815427,76.775144&sspn=7.710738,15.644531&ie=UTF8&hq=&hnear=Thane,+Maharashtra&ll=19.218331,72.97809&spn=0.240504,0.488892&t=m&z=11&iwloc=A&output=embed"></iframe><br />
<small>View Larger Map</small>-->
<h3>Property Address</h3>Mr Parhar
<br />9322633301 | parharbt#yahoo.com
<br />www.parharestate.com</div>
<div class="rpanel2">
<h3>Contact Us</h3>
<form action="" method="post">
<input type="hidden" name="toemail" value="parharbt#yahoo.com" />
<input type="hidden" name="title" value="Mr" /> Message
<br />
<textarea name="message" rows="10" cols="28"></textarea>
<br />Name :
<input type="text" name="fname" />
<br />Mobile :
<input type="text" name="fmob" />
<br />Email :
<input type="text" name="fmail" />
<br />
<input type="submit" name="msgsub" value="Send Message" /></form>
</div>
</div>
<div class="midpanel">
<div class="middle1">
<div class="middlemainimg">
<img src="upload/New-Real-Estate-Projects-in-Murbad%20Karjat-7148Parhar9322633301.jpg"
alt="NA PLOTS ON MURBAD-KARJAT HIGHWAY" />
</div>
<div class="middle1r">
<h3>Na Plots On Murbad-karjat Highway</h3>
<p>Available for sale on Murbad -Karjat Highway. NA Sanctioned Plots with Cement Pole Fencing with gate for each Plot.
Electricity line available till each Plot.Rate 240-PSF Plot size 4475 sq feet</p>
</div>
</div>
<div class="middle2">
<h3>Project Highlights</h3>* The Best Free Real Estate Website
<br />* All properties and Property Related Services Available here
<br />* Blogs and Question/Answers forums
<br />* Free Member Pages and Project Pages</div>
<div class="middle3">
<div id="carousel">
<ul>
<li>
<img src="image1272.jpg" alt="image1272.jpg" class="imgcar" />
<img src="image1526.jpg" alt="image1526.jpg" class="imgcar" />
<img src="image1574.jpg" alt="image1574.jpg" class="imgcar" />
<img src="image1077.jpg" alt="image1077.jpg" class="imgcar" />
<img src="image7251.jpg" alt="image7251.jpg" class="imgcar" />
</li>
<li>
<img src="image1272.jpg" alt="image1272.jpg" class="imgcar" />
<img src="image1526.jpg" alt="image1526.jpg" class="imgcar" />
<img src="image1574.jpg" alt="image1574.jpg" class="imgcar" />
<img src="image1077.jpg" alt="image1077.jpg" class="imgcar" />
<img src="image7251.jpg" alt="image7251.jpg" class="imgcar" />
</li>
</ul>
</div>
<!-- <div id="viewer">
<div><h3>Swimming Pool <br>(<span class="pointer" id="closev1" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/pool_sunrise.jpg" alt="Swimming Pool" /></div>
<div><h3>Star Gazing <br>(<span class="pointer" id="closev2" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/star-gazing.gif" alt="Star Gazing" /></div>
<div><h3>Passage <br>(<span class="pointer" id="closev3" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/welcome3.jpg" alt="Passage" /></div>
<div><h3>Bon Fire <br>(<span class="pointer" id="closev4" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/bonfire.jpg" alt="Bonfire" /></div>
<div><h3>Wash Room <br>(<span class="pointer" id="closev5" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/washroom.jpg" alt="Wash Room" /></div>
<div><h3>Pool and Accomodation <br>(<span class="pointer" id="closev6" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/room_pool.jpg" alt="Pool and Accomodation" /></div>
<div><h3>Lake <br>(<span class="pointer" id="closev7" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/lake.jpg" alt="Lake" /></div>
<div><h3>Bed <br>(<span class="pointer" id="closev8" style="color:yellow">Click anywhere to Close</span>)</h3><img src="Images/bed.jpg" alt="Bed" /></div>
</div>-->
</div>
<div class="middle4">
<h3>Locality Highlights</h3>
<img style="margin:0px auto" src="locationmap.png" width="150" height="100" />
</div>
<div class="middle4r">
<h3>Distances to nearby facilities</h3>* Railway Station : _ Km/s
<br />* Hospital : _ Km/s
<br />* School : _ Km/s
<br />* Market : _ Km/s
<br /></div>
<div class="middlelast">
<h3>Property View</h3>
<img src="image12701.jpg" alt="image12701.jpg" />
<img src="image12741.jpg" alt="image12741.jpg" />
<img src="image15841.jpg" alt="image15841.jpg" />
<img src="image15911.jpg" alt="image15911.jpg" /></div>
</div>
<div class="bottompanel">
<ul>
<li>About us</li>
<li>Contact us</li>
<li>Our offices</li>
<li>Sites</li>
</ul>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jav2.js"></script>
</body>
</html>
Is it the FLOAT format ? Because the left and right floats are getting messed up. I have googled a lot but couldn't make out what could possibly be the reason ? It is also behaving different on my local machine and the server ! In the local machine, the right/left floats are not working and on the server, the middle div is laying out below after the right/left divs.
On the server, my IE6 and IE7 warnings are throwing up on IE9 too !
The url
http://www.landshoppe.com/project-page?dafid=30
You need to clear the lpanel. The images on the toppanel are affecting the floats.
<div class="lpanel" style="clear: both;">
Don't use inline styles in production though.
#Spudley mentioned you have <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in your code, note that this should never be used in production of a new site, it is intended to help keep old non-standards compliant sites (i.e. built to accommodate for bugs in older versions) working in newer versions of IE.
Related
I have created a bootstrap form and using the 'required' parameter on a control to use html5 validation when I click the submit button.
When I do click the submit button the validation bubble appears for a second and disappears. I am not sure why it is doing this. I am using runat="server" on the controls as I need to access them from the codebehind page.
I have tried several options but still nothing.
A trimmed down version of the page below:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="iconCloud.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Client Details</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Tell the browser to be responsive to screen width -->
<link rel="stylesheet" href="../../Stylesheets/bootstrap.min.css">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../../StyleSheets/theme.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../Stylesheets/iCheck.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- Google Font -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="Main" runat="server" runat="server" >
<section class="content">
<p class ="text-left" style="padding-top:50px">
<h2><label id="lblFormName">Create Client</label></h2>
</p>
<p class="text-right">
<button type="submit" id="cmdSave" name="Save" runat="server" class="btn btn-primary">Save</button>
<button type="button" id="cmdCancel" name="Cancel" runat="server" class="btn btn-default">Cancel</button>
</p>
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Client Details</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Client ID</label>
<input type="text" class="form-control" name="clientID" runat="server" id="txtClientID">
</div>
<div class="form-group">
<label>Client Name</label>
<input type="text" class="form-control" name="clientName" runat="server" id="txtClientName" required="required">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" name="companyName" runat="server" id="txtCompanyName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title</label>
<select class="form-control select2" name="clientTitle" runat="server" id="cboTitle"></select>
</div>
<div class="form-group">
<label>Client Surname</label>
<input type="text" class="form-control" name="clientSurname" runat="server" id="txtSurname" required="required" >
</div>
</div>
</div>
<div class="col-md-6"><!--Left Column-->
<div class="form-group">
<label>Client Type</label>
<select class="form-control select2" name="clientType" runat="server" id="cboType"></select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6"><!--Right Column-->
<div class="form-group">
<label>Client Status</label>
<select class="form-control select2" name="clientStatus" runat="server" id="cboClientStatus"></select>
</div><!-- /.form-group -->
</div>
</div><!-- /.Panel-body -->
</div>
</div>
</div>
</form>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
I will add an answer and mark the question as a duplicate just to provide a reference for this issue if somebody else looks it up.
Updating the browser to the latest version should fix the issue. Here is the the original question link:
Related question with info on the bug fix for this issue
I'm using Bootstrap 3.1.1 and my login page is not responsive under 768px.
The page is breaking as shown in the pictures:
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>MY Site</title>
<link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
<meta content='Saúde Inteligente Móvel' name='description'>
<link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
<link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
<link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
<link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
<link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
<link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
<!-- / START - page related stylesheets [optional] -->
<!-- / END - page related stylesheets [optional] -->
<!-- / bootstrap [required] -->
<link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
<script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
<![endif]-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/site-css")
#Scripts.Render("~/bundles/libs/modernizr")
</head>
<body class='contrast-blue login contrast-background'>
<div class='middle-container' style="display: none" data-bind="visible: true">
<div class='middle-row'>
<div class='middle-wrapper'>
<div class='login-container-header'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
</div>
</div>
</div>
</div>
</div>
<div class='login-container'>
<div class='container'>
<div class='row' data-bind="validationOptions: {
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true
}">
<div class='col-sm-4 col-sm-offset-4'>
<h1 class="text-center">
</h1>
<div class="row">
<div class='col-sm-12'>
<div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
<ul>
<li data-bind="validationMessage: model().Email"></li>
<li data-bind="validationMessage: model().Senha"></li>
</ul>
</div>
</div>
</div>
<form>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
<div class='form-group'>
<div class='controls with-icon-over-input'>
<input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
<i class='icon-lock text-muted'></i>
</div>
</div>
<div class='checkbox'>
<label for='remember_me'>
<input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
Lembrar de mim
</label>
</div>
<button class='btn btn-block' data-bind="click: submit">Entrar</button>
</form>
<div class='text-center'>
<hr class='hr-normal'>
#Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
</div>
</div>
</div>
</div>
</div>
<div class='login-container-footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<img src="~/Images/logo-rodape.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/libs/jquery")
#Scripts.Render("~/bundles/libs/base")
<script type="text/javascript">
RouteUtility.rootPath = '#Url.Action("Index", "Home")';
</script>
<script type="text/javascript" src="#Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>
EDIT:
After adding col-xs-* as suggested, a weird behaviour is happening.
When I add col-xs-*, the fields will fit only with 768px and up. If it's under 768px they will grow!!
It's totally the opposite!
How to fix this?
Under 768px: http://postimg.org/image/d0zcna7bf/
768px and up: http://postimg.org/image/56isu0qtt/
thiago Hi there.
Have a look around line number 60 in you code for this...
<div class='col-sm-4 col-sm-offset-4'>
When your screen size hits this breakpoint it will expand to 100% width because you are not controlling/using the col-xs-XX class here.
If you add this to your code like this...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
for the line of code around line 60 and resize the window, you will see you have control.
This line of code you are using it is used to wrap the Form block, to set the width of this Form.
You just need to take control of this at all breakpoints.
Hope this helps.
Added to this
This is what I get when resized.
Using... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
You can control the width for xs device adding eg col-xs-6 :
<div class='form-group'>
<div class='controls with-icon-over-input col-xs-6'>
<input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
<i class='icon-user text-muted'></i>
</div>
</div>
i need help with responsive image when orientation change.
When mobile change to landscape mode, show white space inside page wrapper just after image, creating a space between image and fixed footer.
When click on a button panel image fix.
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/app-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="css/index.css" />
<title>Elephant</title>
</head>
<body>
<div class="app">
<div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
<!--Menu Panel-->
<div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
<li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
<li id="location-btn" data-icon="location"><a data-rel="close"
href="#pageone">Location</a></li>
<li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
<li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
</ul>
</div>
<!--/ Menu Panel-->
<!--Actions Panel-->
<div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
<li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
<li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
<li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
</ul>
</div>
<!--/Actions Panel-->
<header id="page-header" data-role="header" data-position="fixed">
<a id="menu-btn" href="#menu-panel" data-role="button"
data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
<h1>
<div id="spinner" class="visually-hidden ui-loader"></div>
<span class="visually-hidden">Elephant</span>
</h1>
<a href="#overlay-panel" data-role="button" class="ui-btn-right"
data-icon="bullets" data-iconpos="notext">Media</a>
</header>
<div id="main-content" role="main" class="ui-content">
<div class="ui-grid-solo">
<div id="photos-container" class="ui-block-a">
<img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!-- <img style="display: none;" id="largeImage" src="" /> -->
</div>
</div>
</div>
<footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
#photos-container {
width: 90%;
margin-left: 5%;
}
#photos-container img {
max-width: 100%;
}
Thank you very much
Regards
Thanks for your attention.
Error comes calculating min-height. I fixed it writting:
#media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 0 !important;
}
}
Regards
I have used bootstrap framework and a template from a book to finally make the master page the way I want.
When I use google chrome, or IE, and I resize the browsers, the page is resized and the menu is converted to a vertical menu.
However, I just tried on the iphone and it shows "like" a big browser, instead of showing the vertical menu.
I wish I could paste the code but the bootstrap code is way too long to copy here.
I will show my website:
https://levalencia-public.sharepoint.com/
And I will paste the html of my masterpage.
<?xml version="1.0" encoding="utf-8"?><!--SPG:
This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name. While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.
To build the master page directly from this HTML file, simply edit the page as you normally would. Use the Snippet Generator at https://levalencia-public.sharepoint.com/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Flevalencia%2Dpublic%2Esharepoint%2Ecom%2F%5Fcatalogs%2Fmasterpage%2Flv%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code. All updates to this file will automatically sync to the associated Master Page.
-->
<!DOCTYPE html[]>
<html class="no-js" lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!--CS: Start Page Head Contents Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SID:00 -->
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
<!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
<!--ME:</SharePoint:ProjectProperty>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--MS:<SharePoint:StartScript runat="server">-->
<!--ME:</SharePoint:StartScript>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--ME:</SharePoint:CssLink>-->
<!--MS:<SharePoint:CacheManifestLink runat="server">-->
<!--ME:</SharePoint:CacheManifestLink>-->
<!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
<!--ME:</SharePoint:PageRenderMode>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:CustomJSUrl runat="server">-->
<!--ME:</SharePoint:CustomJSUrl>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--ME:</SharePoint:SoapDiscoveryLink>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
<!--ME:</SharePoint:DelegateControl>-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
<!--MS:<WebPartPages:SPWebPartManager runat="server">-->
<!--ME:</WebPartPages:SPWebPartManager>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Page Head Contents Snippet-->
<meta charset="utf-8" />
<!--DC:Specter Group - Blog Bootstrap Version-->
<meta name="description" content="" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/nivo-slider.css" />
<link rel="stylesheet" href="css/isotope.css" />
<link rel="stylesheet" href="css/elements.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<!-- Modernizr enables HTML5 elements & feature detects for optimal performance.
Include html5shiv 3.6. Our version is a custom build.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/modernizr-2.6.2.custom.js">//<![CDATA[//]]>
</script>
<!--Grab Microsofts CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!--place in head in case need to access jquery inline in SP page layout-->
<script src="js/jquery-1.9.1.min.js">//<![CDATA[//]]>
</script>
<script>//<![CDATA[window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">//<![CDATA[<\/script>')//]]>
</script>
<!--used to help make old scripts work with jquery 1.9-->
<script src="js/jquery-migrate-1.1.0.min.js">//<![CDATA[//]]>
</script>
<!--js libraries-->
<script src="js/jquery-ui-1.8.9.custom.min.js">//<![CDATA[//]]>
</script>
<script src="js/hoverIntent.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/superfish.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/supersubs.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.nivo.slider.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.isotope.min.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tweet.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tabs.js">//<![CDATA[//]]>
</script>
<script src="js/poshytip-1.1/jquery.poshytip.min.js">//<![CDATA[//]]>
</script>
<script src="js/bootstrap.js">//<![CDATA[//]]>
</script>
<!--custom scripts-->
<script src="js/jquery-custom.js">//<![CDATA[//]]>
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://levalencia-public.sharepoint.com/_catalogs/masterpage/lv.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A00A9586E0672297E4794AD6E170F2BEB51</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--CS: Start Ribbon Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<!-- HEADER -->
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="logo">
<!--logo snippet-->
<div data-name="SiteLogo"><!--CS: Start Site Logo Snippet--><!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta BlockElement="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" ID="x8b0737e1232643da88f7b4721567d1e8">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" ID="x596f04b7f65943cb9ad23b9fd9ac5744" LogoImageUrl="/_layouts/15/images/siteIcon.png" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_x596f04b7f65943cb9ad23b9fd9ac5744" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="/SiteAssets/logosharepointazul.PNG" alt="Luis Valencia - Sharepoint Architect" /><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SiteLogoImage>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SPSimpleSiteLink>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Site Logo Snippet-->
</div>
</div>
<div class="tagline">
<h2>
<span>Luis
</span>
Valencia </h2>
<h2>
<span>Sharepoint
</span>
Architect </h2>
</div>
</div>
<div class="social cf">
<ul class="cf">
<li>
<a href="https://www.facebook.com/pages/Sharepoint-Architects-Blog/259727274196140" target="_blank">
<img src="img/social/Facebook.png" alt="Facebook" />
</a>
</li>
<li>
<a href="https://twitter.com/levalencia" target="_blank">
<img src="img/social/Twitter.png" alt="Twitter" />
</a>
</li>
<li>
<a href="https://plus.google.com/115487123900000828421/posts" target="_blank">
<img src="img/social/Google+.png" alt="Google+" />
</a>
</li>
<li>
<a href="http://www.linkedin.com/profile/view?id=55314636&trk=nav_responsive_tab_profile" target="_blank">
<img src="img/social/LinkedIn.png" alt="Linked In" />
</a>
</li>
<li>
<a href="#">
<img src="img/social/RSS.png" alt="Blog" />
</a>
</li>
</ul>
<a class="social-toggle" title="Follow Us">Toggle
</a>
</div>
</div>
</div>
</header>
<!-- ENDS HEADER -->
<!-- nav -->
<!-- nav -->
<nav id="topnav">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav nav-collapse collapse">
<!--nav snippet-->
<ul class="root">
<li class="current-menu-item">HOME</li>
<li>ABOUT ME</li>
<li>BLOG</li>
<li>ARTICLES</li>
<li>CONTACT</li>
</ul>
<!--end nav snippet-->
</div> <!--end class nav-->
</div> <!--end container-->
</div>
</div>
</div> <!--end span 12-->
</div> <!--end row-->
</div> <!--end fluid container-->
</nav>
<!-- ends nav -->
<!-- MAIN -->
<div role="main" id="main">
<div class="container-fluid">
<!--main content placerholder, use the following html as sample content for content placeholder-->
<div class="row-fluid">
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
<!--end content placerholder-->
</div>
</div>
<!-- ENDS MAIN -->
<footer>
<!-- bottom footer-->
<div class="footer-bottom">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 copyright">
<p><b>Copyright © 2014 Luis Valencia - All Rights Reverved</b>
</p>
</div>
</div>
</div>
</div>
<!--end bottom footer-->
</footer>
</div>
</div>
</body>
</html>
You are missing
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Check;
Bootstrap 3 responsive not working on mobile
good luck!
You are missing the viewport meta tag. Add this within your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this does is essentially instructs the device that 'width' should be considered the device's width. The device can then use that to compare against your media-queries and decide how to display the page.
Hello Salesforcians,
I have a problem that I can not display styles in visualforce page. I have created the css files in the static resources. Also, I have created visualforce page that references these styles. You can access the current force.com site at http://impacttest.force.com/Test . Resources are not displayed and images also!
Here's the code that I used to view this page
<apex:page controller="ContractRenewalFormController">
<!-- Begin Default Content REMOVE THIS -->
<head>
<title>
Contract Renewal | ImPACT-Testing & Computerized Neurocognitive Assessment Tools
</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="language" content="en"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- style sheets -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' rel='stylesheet' type='text/css'/>
<apex:stylesheet value="{$Resource.reset}"/>
<apex:stylesheet value="{$Resource.default}"/>
<apex:stylesheet value="{$Resource.medium}"/>
<apex:stylesheet value="{$Resource.small}"/>
<apex:stylesheet value="{$Resource.defaultoverride}"/>
<apex:stylesheet value="{$Resource.print}"/>
<!--<link href="../css/reset.css?v=0" rel="stylesheet" media="screen, projection, print" />
<link href="../css/default.css?v=2" rel="stylesheet" media="screen, projection" />
<link href="../css/medium.css?v=0" rel="stylesheet" media="screen and (max-width : 960px)" />
<link href="../css/small.css?v=0" rel="stylesheet" media="screen and (max-width: 640px)" />
<link href="../css/default-override.css?v=0" rel="stylesheet" media="screen, projection" />
<link href="../css/print.css?v=0" rel="stylesheet" media="print" />-->
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">$.noConflict()</script>
<!-- analytics -->
<script>
function clearText(mesg,id){
var r=document.regform;
if (r.elements[id].value == mesg) r.elements[id].value = '';
r.elements[id].style.color="#000";
}
function checkText(mesg,id){
var r=document.regform;
curText = r.elements[id].value;
curText = curText.replace(" ","");
if(curText == "") r.elements[id].value = mesg;
r.elements[id].style.color="#000";
}
function checkdets(){
var r=document.regform;
if(r.name.value=="" || r.name.value=="Account Name"){
alert("Please enter account name");
r.name.value==""
r.name.focus();
return false;
}
if(r.ReferenceID.value=="" || r.ReferenceID.value=="Reference Number"){
alert("Please enter reference number");
r.ReferenceID.value==""
r.ReferenceID.focus();
return false;
}
}
</script>
<!--[if lte IE 8]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- analytics -->
</head>
<body class="pay">
<div class="skipnav">Jump to main content</div>
<div class="pagewrap">
<div class="mastheadWrap">
<div class="masthead">
<h1>ImPACT Test</h1>
<h1><img src="../imgs/impact-test-mobile.png" alt="ImPACT Test" /></h1>
<nav class="topNav">
Find a Care Provider
Customer Center
</nav><!-- /topNav -->
<nav class="mainNav">
Home
About
Products
Research
Training
Support
Purchase
News
Search
</nav><!-- /mainNav -->
<div class="mobileNavTrigger mobileonly">
<img src="../imgs/btn-mobilenav.png"/>
</div><!-- /mobileNavTrigger -->
</div><!--/masthead-->
</div><!-- /mastheadWrap -->
<div class="contentwrap group" id="content">
<h1>Contract Renewal</h1>
<div class="maincontent ">
<div class="errors" style="color:red;"></div>
<div id="purchase-form">
<apex:form >
<apex:pageMessages />
<h5>Account Information</h5>
<hr />
<table cellpadding="8" cellspacing="0" border="0" id="regformTable">
<tr>
<td>Account Name </td>
<td nowrap="nowrap"><div style="padding-left:10px;"></div>
<input name="name" id="name" type="text" class="metal" size="20" style="color:#666;"
value="Account Name"
onfocus="clearText('Account Name','name')"
onblur="checkText('Account Name','name')"
/>
</td>
</tr>
<!--<tr><td nowrap="nowrap"> </td><td></td></tr>-->
<tr>
<td>Reference Number </td>
<td nowrap="nowrap"><div style="padding-left:10px;"></div>
<input name="ReferenceID" id="ReferenceID" type="text" class="metal" size="20" style="color:#666;"
value="Reference Number"
onfocus="clearText('Reference Number','ReferenceID')"
onblur="checkText('Reference Number','ReferenceID')"
/>
</td>
</tr>
<tr><td nowrap="nowrap"> </td><td></td></tr>
<!--<tr><td nowrap="nowrap"> </td><td></td></tr>-->
<tr>
<!--<td><input name="submitConfirm" type="submit" value="Confirm" id="submitConfirm" class="button-styled" /></td> -->
<!-- <td><input name="submitCancel" type="submit" value="Cancel" id="submitCancel" class="button-styled" /></td> -->
<td><apex:commandButton action="{!confirm}" value="Confirm" id="confirmButton" styleClass="button-styled"/></td>
<td><apex:commandButton action="{!cancel}" value="Cancel" id="cancelButton" styleClass="button-styled"/></td>
</tr>
</table>
</apex:form>
</div>
</div>
</div>
<div class="footerWrap">
<div class="footer">
<div class="section group">
<nav class="inTouch">
<img src="../imgs/ico-facebook.png" alt="Like us on Facebook" /><img src="../imgs/ico-youtube.png" alt="Subscribe on YouTube" />
<a href="https://www.impacttest.com/contact/" class="mail">
<img src="../imgs/ico-mail.png" alt="" />
Contact Us
</a>
<a href="" class="phone">
<img src="../imgs/ico-message.png" alt="" />
1.877.646.7991
</a>
<a href="#" class="newsletter" onclick="popUp=window.open('https://confirmsubscription.com/h/t/9279885E317A82C6', 'popupwindow', 'scrollbars=yes,width=600,height=400');popUp.focus();return false">
<img src="../imgs/ico-pencil.png" alt="" />
Sign up for our newsletter
</a>
</nav><!-- /inTouch -->
<nav class="terms">
Privacy Policy
Terms and Conditions
<span class="copyright">ImPACT Applications, Inc. © 2014</span>
</nav><!-- /terms -->
</div><!-- /section -->
</div><!--/footer-->
</div><!-- /footerWrap -->
</div>
</body>
<!-- End Default Content REMOVE THIS -->
</apex:page>
Using Inspector i see that you are referencing one http url for a png and thats failing .Also there is a javascript issue .One more thing is to see following
1)Does your static resource files made Public ?
2)Also if you are using your own Head tag and body prefer using attribute applyhtml=false on apex:page tag