UIWebView on ios doesn't fit the content well - ios

{please update the english later, I dont want this question to go into the state of limbo }
Ios's webview loads this static content from a url.
For some reason it has issues with its width. It slides left and right even when I have given width of 100%. I've no understanding of ios webview.
Any help would be great.
Here's the html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<!-- for Facebook -->
<meta property="og:title" content="fb-title" />
<meta property="og:type" content="https://somedomain/#/login" />
<meta property="og:image" content="http://somedomain.com/en-us/images/WebsitePieces/homepage/A_header-vmc3030-camera-water-photo-large.png" />
<meta property="og:url" content="https://somedomain/#/login" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '625280937908870606983',
xfbml: true,
version: 'v2.3'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- <button onclick="gogogo()">Share me, please 2</button> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function gogogo() {
FB.ui({
method: 'feed',
link: 'somedomain.com',
picture: 'http://www.somedomain.com/en-us/images/WebsitePieces/homepage/social_share.png',
name: 'somedomain',
caption: 'Learn how easy somedomain is!',
// description: 'Must read daily!'
});
}
</script>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.2.16/angular.js"></script>
<!-- <script src="https://somedomaindev.netgear.com/js/angulike.js"></script> -->
<script src="angulike.js"></script>
<!-- build:css styles/main.css -->
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script>
angular.module('myApp', ['angulike'])
.run([
'$rootScope',
function($rootScope) {
$rootScope.facebookAppId = '625280937606983';
}
])
.controller('myController', [
'$scope',
function($scope) {
$scope.myModel = {
Name: "Installing somedomaincameras is a breeze. Took me less than 10 minutes because it is truely wirefree #somedomain",
ImageUrl: 'img/B_platform.png',
FbLikeUrl: 'http://somedomain.com'
};
}
]);
</script>
<style>
#font-face {
font-family: myFirstFont;
src: url(styles/2BF294_D_0.woff);
}
#font-face {
font-family: 'MorebiRounded-Regular';
src: url('webfonts/2BF294_D_0.eot') format('embedded-opentype'); /* IE9 + later */
src: url('webfonts/2BF294_D_0.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
url('webfonts/2BF294_D_0.woff') format('woff'); /* Newer browsers */
src: url('webfonts/2BF294_D_0.ttf') format('truetype'); /* Safari og iOS, Chrome, Android, Firefox and Opera except Opera Mini */
url('webfonts/2BF294_D_0.eot.svg#Min_font + regular, italic, bold) format('svg');
}
$icon-font-path: '../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/';
#import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white !important;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
padding: 0px 0px 0px 0px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
p + h4 {
margin-top: 28px;
}
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
background-color: #f0f0f0 !important;
// height:200px;
padding: 0px 0px 0px 0px;
}
}
#media screen and (min-width: 768px) {
.green-p {
color: red;
font-size: 18px;
margin-right: 26px;
/*margin-left: 15px;*/
}
}
.green-p {
color: green;
font-size: 18px;
margin-right: -16px;
margin-left: 3px;
}
.push-down-1 {
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
#close {
box-sizing: border-box;
color: rgb(68, 68, 68);
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
align-self: stretch;
border: 0px none rgb(68, 68, 68);
border-radius: 5px 5px 5px 5px;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
/* #close:before {
box-sizing: border-box;
color: rgb(187, 187, 187);
cursor: pointer;
display: block;
height: 30px;
position: absolute;
right: 3px;
text-align: center;
top: 3px;
width: 30px;
align-self: stretch;
perspective-origin: 15px 15px;
transform-origin: 15px 15px;
content: '×';
border: 0px none rgb(187, 187, 187);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 26px/26px Helvetica, Arial, sans-serif;
outline: rgb(187, 187, 187) none 0px;
}*/
/*#DIV_1:before*/
#DIV_1 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 45px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 22.5px;
transform-origin: 298.508514404297px 22.5px;
background: rgb(211, 211, 211) none repeat scroll 0% 0% / auto padding-box border-box;
border-top: 0px none rgb(229, 229, 229);
border-right: 0px none rgb(229, 229, 229);
border-bottom: 0.909090876579285px solid rgb(229, 229, 229);
border-left: 0px none rgb(229, 229, 229);
border-radius: 5px 5px 0 0;
font: normal normal normal normal 16.5px/24.7499980926514px Helvetica, sans-serif;
margin: 0px 0px 0px;
margin-left: 3px;
margin-right: 3px;
outline: rgb(68, 68, 68) none 0px;
}
/*#DIV_1*/
#H3_2 {
box-sizing: border-box;
color: rgb(68, 68, 68);
height: 36.4488639831543px;
text-align: left;
width: auto;
perspective-origin: 298.508514404297px 18.2244319915772px;
transform-origin: 298.508514404297px 18.2244319915772px;
border: 0px none rgb(68, 68, 68);
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
margin: 2px 0px 10px 0px;
outline: rgb(68, 68, 68) none 0px;
padding: 11px 0px 0px 33px;
text-align: center;
}
.top-down {
margin-bottom: 1px;
/*padding-bottom: 12px;*/
}
#fb-icon {
cursor: pointer;
display: inline-block;
height: 32px;
position: relative;
vertical-align: top;
width: 32px;
perspective-origin: 16px 16px;
transform-origin: 16px 16px;
background: rgba(0, 0, 0, 0) url(img2/facebook_32.png) repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Helvetica, Tahoma, Arial;
}
/*#SPAN_1*/
.g-plus {
margin-top: 2px;
}
.fb-icon {
margin-top: 1px;
}
#SPAN_1 {
cursor: pointer;
display: inline-block;
height: 28px;
position: relative;
text-align: center;
white-space: nowrap;
width: 60px;
perspective-origin: 30px 11px;
transform-origin: 30px 11px;
background: rgba(0, 0, 0, 0) url(img2/fb-share.png) no-repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal normal 11px/16px Verdana, Helvetica, sans-serif;
padding: 3px 0px;
}
/*#SPAN_1*/
#logo { background: url(; background-repeat: none; width: 236px;
height: 169px;
}
/* iphone5 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.green-p {
color: green;
font-size: 12px;
margin-right: -16px;
margin-left: 3px;
}
#H3_2{
width:auto;
font-size:10px;
font: normal normal 500 normal 24px/24px MorebiRounded-Regular, Arial;
}
#logo { background: url(i); background-repeat: none; width: 150px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding: 0px 0px 0px 0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 9px;
margin-left: 2px;
margin-right: 2px;
}
}
/*iphone6*/
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.green-p {
color: green;
font-size: 12px;
margin-right: 0px;
margin-left: 15px;
}
#H3_2{
width:auto;
font-size:10px;
}
#logo { background: url(img2/cam.png); background-repeat: none; width: 169px;
height: 90px;
margin-right: 20px;
}
.jumbotron{
padding-top:0px;
}
.push-down-1{
background-color: #f0f0f0 !important;
padding-top: 30px;
padding-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.push-down-2 {
background-color: #f0f0f0 !important;
padding-top: 0px;
padding-bottom: 30px;
margin-left: 2px;
margin-right: 2px;
}
}
</style>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/iphone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/iphone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="css/ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="css/ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
<div class="jumbotron top-down">
<div id="close">
</div>
<div id="DIV_1">
<h3 id="H3_2">
hello I'm dialog header
</h3>
</div>
<div class="row push-down-1">
<div class="col-xs-6">
<!-- <img src="img2/camera_hand.png"> -->
<div id="logo"> </div>
</div>
<div class="col-xs-6">
<div class="row green-p">
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
</div>
</div>
</div>
<div ng-controller="myController" class="text-center push-down-2 row">
<div class="col-xs-4 fb-icon">
<span onclick="gogogo()" id="SPAN_1"></span>
</div>
<div class="col-xs-4">
<div tweet="myModel.Name"></div>
</div>
<div class="col-xs-4 g-plus">
<div google-plus></div>
</div>
</div>
<!-- </div> -->
</div>
<!-- jumbotron -->
<!-- container -->
</body>
</html>


WebView has a property -- set scalesPageToFit to TRUE.

Related

CSS Issue Causing White Space at Top of Page on Safari Mobile (iOS)

There is a horizontal white bar, approximately 15px in height, across the top of every one of my pages when viewing my website's mobile version. Here is the relevant CSS code and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>
I have tried many combinations of CSS properties (primarily "margin" and "padding") and have spent a lot of time searching the Web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly tonight.

Just assign h2 margin:0. and in body margin:0 and padding:0.
Because by default h2 tag have margin inspect h2 tag.
.navigationtext h2 {
margin: 0px;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0; /*Added*/
margin: 0; /*Added*/
}
.navigationtext h2 {
margin: 0px; /*Added css for h2 tag*/
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>

It's caused by default margins on the body and h2 elements.
All you need is margin-top: 0; on these two elements.
body {
margin-top: 0; /* Remove top margin from body */
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
.navigationtext h2 {
margin: 0px;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
h2 {
margin-top: 0; /* Remove top margin from h2 */
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>

lightbox, tool tips not working with foundation

I applied foundation.css to make my site responsive. But after that tool tips, light box is not working. Fonts are getting larger. Where should I correct in my custom.css or foundation.css
Tool tip not working in this site
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
body,
td.sohotext,
td.text,
p,
span {
font-family: sans-serif, Helvetica, Verdana, Arial;
font-size: 13px;
color: #525252;
line-height: 140%;
}
/* Fixes and hacks */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html input.quick_signup {
background-attachment: fixed;
}
/*END - Fixes and Hacks */
/* Navigation */
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
display: block;
padding-right: 13px;
float: left;
padding-top: 5px;
padding-left: 13px;
padding-bottom: 5px;
background-image: url(images/menu_div.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
}
#mainnav a:hover {
color: #36CC2F;
background-image: url(images/nav_active.jpg);
background-repeat: repeat-x;
background-position: right top;
padding:4px 12px 4px;
}
.hmains {
font-size: 100%;
}
#megamenu {
list-style-type:none;
width:100%;
margin: 3px auto 04px auto;
height:40px;
padding:2px 0px 3px 0px;
}
table.vmenu_subs {
margin-bottom: 30px;
margin-top: 15px;
}
/*#leftav a:link, #leftnav a:visited, */
a.vmenu_sub_off:link,
a.vmenu_sub_off:visited,
a.vmenu_sub_on:link,
a.vmenu_sub_on:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
font-weight: bold;
color: #000;
background-image: url(images/sideNav_bullet.gif);
background-repeat: no-repeat;
background-position: left center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #acacac;
text-decoration: none;
padding-left: 24px;
display: block;
width: 150px;
}
/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active {
color: #666;
}
a:link, a:visited {
color: #00CC00;
text-decoration: none;
}
a:hover {
color: #009900;
margin-top:0px;
margin-bottom:0px;
}
#feat a:link, #feat a:visited {
color: #fdb417;
text-decoration: none;
}
#feat a:hover {
color: #fed27e;
}
/*END - Navigation */
#headwrapper {
background-image: url(images/top_bg.png);
background-repeat: 50% no-repeat;
margin: 0px;
padding: 0px;
height: 109px;
position: relative;
}
#featwrapper {
background-color: #1e8019;
height: 124px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #185d14;
overflow: hidden;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #2b9d22;
}
#feat {
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-image: url(images/feat_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 124px;
color: #FFFFFF;
}
#navwrapper {
background-color: #1e8019;
height: 32px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2b9d22;
border-bottom-color: #185d14;
}
#nav {
background-image: url(images/nav_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 32px;
max-width:880px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
}
#contentwrapper {
background-color: #ededf1;
margin: 0px;
padding: 0px;
}
#maincontent {
background-image: url(images/content_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #ededf1;
}
#mainnav {
width: 72%;
float: left;
padding-left: 5px;
}
#signup {
width: 25%;
padding-left: 5px;
float: left;
height: 20px;
padding-top: 2px;
font-size: 85%;
color: #cccccc;
text-align: center;
}
#subnav {
margin: 0px;
float: left;
min-width:155px;
width: 25%;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#belowmenu {
display: block;
float: left;
width: 210px;
padding-top: 15px;
padding-left: 5px;
}
div.sidebox {
display: block;
float: left;
width: 210px;
}
#content {
margin: 0px;
width: 70%;
float: left;
padding-top: 12px;
padding-right: 7px;
padding-bottom: 12px;
padding-left: 7px;
overflow: visible;
}
#date {
font-size: 90%;
text-align: right;
color: #858585;
}
#featleft {
float: left;
width: 25%;
padding-left: 5px;
padding-top: 5px;
}
#featright {
float: left;
width: 72%;
padding-left: 10px;
padding-top: 5px;
}
#footer {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
font-size: 85%;
padding-bottom: 10px;
color: #939393;
}
#head {
height: 109px;
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
#logo_box {
height: 109px;
float: left;
width: 28%;
}
#tagline {
float: left;
width: 70%;
color: #999999;
text-align: right;
padding-top: 22px;
}
#logo {
position: absolute;
top: 3px;
}
#trimbar {
background-color: #000000;
margin: 0;
padding: 0;
height: 7px;
width: 100%;
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
div.newsbox {
line-height: 115%;
}
/*hiding from IE mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* end hiding from IE mac */
#footerwrapper {
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #959595;
background-color: #CCCCCC;
}
/* Integrated Styles */
.portfolio {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
width: 100%;
overflow: auto;
}
span.alert,
span.profile,
span.download,
span.search {
display: block;
float: left;
margin: 10px;
padding: 10px 10px 10px 45px;
}
span.alert {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_alert.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.profile {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_profile.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.download {
width: 100%;
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_download.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.search {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_search.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.product {
color: #333333;
background-color: #fff;
border: 1px solid #b6b6b6;
margin: 10px;
padding: 10px;
font-size: 10px;
line-height: 145%;
display: block;
}
blockquote {
border-top: 4px solid #D3D3D3;
border-bottom: 4px solid #D3D3D3;
margin: 10px;
padding: 10px 10px 5px 45px;
background-color: #f5f5f5;
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
blockquote p {
padding-right: 35px;
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
background-image: url("images/li_bullet.gif");
background-position: 0px 4px;
background-repeat: no-repeat;
overflow: hidden;/* added by dsonesuk as li cannot detect area of floated 'a' elements*/
padding-left: 14px;
margin-left: 0px 4px;
font-size: 12px;
}
ul, li {list-style-type:none !important;}
}
h4 {
font-size: 115%;
color: #333;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
#feat h4 {
color: #fdb417;
}
h4 {
font-size: 120%;
color: #0066FF
}
h3 {
font-size: 150%;
color: #1E7D19;
}
h2 {
font-size: 180%;
color: #196115;
}
input.login_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/login_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.pass_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/password_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.quick_signup {
border: 0;
height: 19px;
width: 168px;
padding-left: 32px;
padding-top: 3px;
margin-top: 4px;
background-image: url(images/quick_signup_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #ededed;
}
div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10
{
padding-left: 28px;
padding-bottom: 10px;
background-image: url(images/answer.gif);
background-repeat: no-repeat;
background-position: 2px 0;
}
table#Search_Form,
table#Search_Form2 {
}
table#Detail_Results2,
table#Initial_Results {
margin-top: 15px;
}
.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;
}
#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
padding: 0px!important;
background:inherit!important;
}
#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
bottom: 0;
padding-top: 0px;
position: absolute;
right: 0;
width:62%;
}
#tagline img {
margin: 0px 0px -12px;
height: auto!important;
max-width: 100%;
width: auto!important;
max-height: 68px;
min-height:45px;
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#title#</title>
<link rel="stylesheet" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreen/custom.css" />
<link rel="stylesheet" type="text/css" href="tooltip/themes/2/tooltip.css" />
<link rel="stylesheet" type="text/css" href="lightbox/css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/js-image-slider.css" />
<link rel="stylesheet" type="text/css" href="mactabs/mctabs.css" />
<script type="text/javascript" src="http://www.egtours.com/tooltip/themes/2/tooltip.js"></script>
<script type="text/javascript"src="http://www.egtours.com/sohoadmin/plugins/MegaMenuBuilder/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/mcVideoPlugin.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/js-image-slider.js"></script>
<script src="http://www.egtours.com/float-panel.js"></script>
<script type="text/javascript" src="http://www.egtours.com/mactabs/javascript-tabs.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://www.egtours.com/motionpack.js"></script>
<script src="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/js/vendor/modernizr.js"></script>
</head>
<body>
<body onload="slidedown('featwrapper');">
<div id="headwrapper">
<div id="head" class="clearfix">
<div id="logo_box"><img id="logo" border="0" alt="Home" width="322" height="118" src="images/_userimg-logo.png" /></div>
<div id="tagline"><img border="0" alt="Home" width="468" height="60" src="images/_userimg-ad_banner.png" /></div></div></div>
<div id="trimbar"></div>
<div id="featwrapper" style="display: none; height: 124px; overflow: hidden">
<div id="feat" class="clearfix">
<div id="featleft">#NEWSBOX#</div>
<div id="featright">#PROMOTXT1#</div></div></div>
<div id="navwrapper">
<div id="nav" class="clearfix">
<div id="signup"><img style="border: 0pt" border="0" alt="Toggle the banner up or down" width="110" height="27" src="images/hide-show.png" /></div>
<div id="mainnav">#MEGAMENU#</div></div></div>
<div id="contentwrapper">
<div id="maincontent" class="clearfix">
<div id="subnav">#VSUBS#
<div id="belowmenu">#POWERPLUG4#</div></div>
<div id="content">
<div id="date">#AUTODATESTAMP#</div>#CONTENT#</div></div>
<div id="footerwrapper">#COPYRIGHT#<div id="footer">
<table id="table1" border="0" cellspacing="1" width="100%">
<tbody>
<tr>
<td colspan="7" align="left">
<p align="center"><a title="" href="../../../../../../../Our_Policies.php">Our Policies</a>| Privacy Statement</p></td></tr>
<td width="60"><img border="0" alt="coat of arm" width="66" height="56" src="../../../../../../../images/logos/coatofarm.png" /></td>
<td width="152"><img border="0" alt="natta logo" width="53" height="56" src="../../../../../../../images/logos/nattalogo.png" /></td>
<td width="55"><img border="0" alt="uftaa logo" width="80" height="56" src="../../../../../../../images/logos/uftaa.png" /></td>
<td width="71"><img title="" alt="skull logo" width="75" height="36" src="../../../../../../../images/paybyskull.png" /><br />
</td>
<td width="71">
<p><img title="" alt="paypal logo" width="57" height="57" src="../../../../../../../images/paypalv.png" /></p></td>
<td width="26">
<p><img title="" alt="vitof logo" width="97" height="73" src="../../../../../../../images/vitof_logo.png" /></p></td>
<td width="90"><img border="0" alt="SSL" width="90" height="50" src="http://www.egtours.com/images/rapidssl_ssl_certificate.gif" /></td></tbody></table></div></div>
<script type="text/javascript" src="http://www.egtours.com/lightbox/js/lightbox.js"></script>
<div id="backtop">▲</div>
#jquery#
<script>
/* Remove the slogan div cleanly if it's not in use */
$(function () {
if($(".slogan").html().length === 0) {
$(".slogan").remove();
}
/* Expand the content area out if the sidebar isn't in use */
if (!$("#box-one").text().trim().length){
$(".middle").addClass("large-12").removeClass("large-8");
$(".box").remove();
}
});
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Your path's to foundation.tooltip.js and to foundation1.css are incorrect and they are not loading, therefore no tooltips. If you want your own custom.css file to override any of foundation's css, it needs to load after foundation1.css.

The style on this button isn't displaying on mobile (iOS)

Here is what it looks like on mobile Safari & Chrome (iPhone 5c, iOS8).
This is what it should look like.
The :hover state is working after I tap the button.
Here is my code. Works fine on Chrome on Android 5.1 though. Strange (to me).
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
}
#feedback-page {
text-align: center;
}
#form-main {
width: 100%;
float: left;
padding-top: 0px;
}
#form-div {
background-color: rgba(72, 72, 72, 0.4);
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top: 15px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color: #3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #db1d1d;
color: #3c3c3c;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #db1d1d;
border: #db1d1d solid 3px;
}
/* Icons ---------------------------------- */
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
background-color: white;
}
#button-red {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float: left;
width: 100%;
border: #fbfbfb solid 4px;
cursor: pointer;
background-color: #db1d1d;
color: white;
font-size: 24px;
padding-top: 22px;
padding-bottom: 22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
font-weight: 700;
}
#button-red:hover {
background-color: rgba(0, 0, 0, 0);
color: #db1d1d;
}
.submit:hover {
color: #db1d1d;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease {
width: 100%;
background-color: white;
}
#media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
<div id="form-main">
<div id="form-div">
<form action="//formspree.io/emailemailemail#gmail.com" method="POST" class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<input type="text" name="_gotcha" style="display:none" />
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-red" />
<div class="ease"></div>
</div>
<input type="hidden" name="_next" value="{{store_url}}/page/thanks" />
</form>
</div>

You should add the following to your #button-red styles:
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
This should override any iOS specific browser styles for the button.
There may be some existing CSS definitions in included CSS files, so for debugging purposes you might try to use the !important statement.

CSS3 keyframe-transition on iPad

I have build a pretty simple animation with CSS (just moving an image a few pixels) which works fine on all browser I had available for testing EXCEPT the iPad mobile Safari (iOS 8.1).
On the iPad nothing even slightly moves. The image sits still.
Has anybody else encountered such a bug or behaviour with iOS? ... or am I missing something important with webkit here?
Thanks for hints ;o)
This is what I did so far:
body { font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; text-align:left;
SCROLLBAR-FACE-COLOR: #001428; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #001428;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #001428; text-align:center; width:100%; margin:0 auto}
.BodyHeader {background-image: url(../images/Header-Singleton.jpg); background-repeat: repeat-x; position:absolute; height:90px; width:100%; border: 0px solid #cc0033;}
.BodyHeaderPic { background-image: url(../images/Header.jpg); background-repeat: repeat-x; position:absolute; right:200; height: 90px; width:322px; border:0px solid #cc0033;}
.BodyScroller {position:absolute; left:1%; top:90px; width:98%; bottom:10px; overflow:auto; border: 0px solid #FF9933;}
.BodyMain { position:absolute; left:0; top: 30px; width:70%; border:opx solid #cc0033; text-align:left; vertical-align:text-top; z-index:1}
.Footer { position:absolute; width:640px; left:50%; margin-left:-320px; bottom: 5px; height:25px; border:1px solid #dcdcdc; text-align:center; font-size:10px; color:#7896be; z-index:9999;}
.Footer p { margin:5px;}
a {font:Arial, Helvetica, sans-serif; color:#2d5578; text-decoration:none; border: none}
a:hover {font:Arial, Helvetica, sans-serif; color:#7896be; text-decoration:underline; border: none}
a:active {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
a:selected {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
img {border: none;}
h1 {font-style:normal; font-variant:normal; font-size:12pt; font-family:Arial; color:#2d5578; padding-top:5px; padding-bottom:5px; margin:0px; }
h2 {font-style:normal; font-variant:normal; font-size:11pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
h3 {font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
.vbar-lightblue {width:300px; height:2px; background-image:url(../images/vbar-lightblue.jpg); background-repeat:no-repeat}
.HPflyInImages {position:absolute; left:50%; margin-left:200px; top: 220px; width:217px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:999;}
.HPflyInImagesCrossFrame1 {position:absolute; left:50%; margin-left:135px; top: 180px; width:317px; height:241px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:100; background-image:url(../images/imageCrossFrame.png)}
.image1 {position: relative; right:-200px; top:00px; border: 0px solid #cc0033; text-align:right; width:200px;}
.CrossFrameSmall1 {position:absolute; right:50px; top: 150px;z-index:100;}
.CrossFrameSmall1MoveImage{position:absolute; right:150px; top: 205px;z-index:99;
-moz-animation-name: moveImage;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: moveImage;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-name: moveImage;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards
}
#-moz-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#-webkit-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
.HPflyInImagesSmall {position:absolute; right:50px; top: 200px; border: 1px solid #cc0033; overflow:hidden;}
.HPflyInImagesCrossFrameSmall1 {width:200px; height:180px; border: 1px solid #cc0033; overflow:visible; text-align:right; }
.HPflyInImagesCrossFrameSmall2 {width:195px; height:180px; border: 1px solid #cc0033; overflow:hidden; background-image:url(../images/imageCrossFrameSmall.png)}
.CrossFrameSmallMoveImage { }
/* *** Menu *** */
.Menubar {position: absolute; left:0px; top:90px; width:100%; background-color:#cc0033; text-align:left; background-image:url(../images/MenueBackground.jpg); background-repeat:repeat-x; }
.Menubar ul { left:10px;}
/* *** MAIN *** */
.mainHephy {position:absolute; right:100px; width:170px; height:220px; top:20px; background-image:url(../images/mainHephy.jpg); background-repeat:no-repeat; border: 0px solid #cc0033;}
.wiseSpell {position:relative; top: 310px; border:0px solid #996600; text-align:left; width: 95%;}
.quotation { font-size:8px; margin:0px; padding:5px; color:#7896be}
.mainGreetings {position: relative; top: -50px; text-align:left; width:400px; padding-left:50px; }
/* *** PRIVATE *** */
.tdHeader { font-weight:bold; color:#325f82}
.moreBody { width:600px;}
.imageGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** AVIATION *** */
.FlightBooklet {position:absolute; left:50%; margin-left:100px; top: 80px; width:244px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:101;}
.imageAVGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** CONTACT *** */
.FMS-TextLine { width:400px;}
.FMS-TextField { width:600px; height:150px;}
.FMS-Button { width:100px;}
and this is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/CSS/CSS3Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<link rel="stylesheet" type="text/css" href="/CSS/ASW.css">
<title>ASW 15</title>
</head>
<body ontouchstart="">
<div class="BodyHeader"></div>
<div class="BodyHeaderPic"></div>
<script language="javascript" type="text/javascript" src="/JS/ASW-MenueEmbed.js"></script>
<script language="javascript" type="text/javascript" src="/JS/ASW-FooterEmbed.js"></script>
<div class="BodyScroller">
<div class="BodyMain">
<br />
<div class="moreBody">
<h1>... more</h1>
<br />
</div>
</div>
</div>
<img src="../images/imageCrossFrameSmall.png" alt="Hephy" class="CrossFrameSmall1"/>
<img src="../images/more01.jpg" alt="Hephy" class="CrossFrameSmall1MoveImage"/>
</body>
</html>

ASP MVC 4 showing collection type

I have an issues with my first ASP.MVC 4 project where one page (only bound page so far) is showing the type of the collection at the top of the main content area. I have tried getting rid of it but am at a loss.
I'm pretty sure its something I have done but can't fix it. Any help???
Issue Here
IE9 Debug on item
Controller
Public Class FailuresController
Inherits Controller
Function Index(model As IEnumerable(Of QSmartRectificationProvider.RectificationFaults)) As ActionResult
ViewData("Message") = "Open Faults"
Return View(Session("Failures"))
End Function
End Class
_Layout.vbhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>QSmart Rectifications</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<nav>
<ul id="menu">
<li>#Html.ActionLink("Log Out", "Index", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required:=false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<p>#DateTime.Now.Year - JCB Excavators LTD</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required:=False)
</body>
</html>
Index.vbhtml
#model QSmartRectification.QSmartRectificationProvider.RectificationFaults
#Code
ViewData("Title") = "Open Failures"
End Code
#section featured
<section class="featured">
<div class="content-wrapper" >
<p class="site-title float-left">#Html.ActionLink("QSmart Rectification Sign Off", "Index", "Home")</p>
<input type="image" src="../../Images/Product.png" />
</div>
</section>
End Section
<br />
#Using Html.BeginForm()
#Html.ValidationSummary()
#<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>
<section class="content">
<ul class="column">
#For Each item As QSmartRectification.QSmartRectificationProvider.RectificationFaults In Model
#<li>
<section class="block">
<img alt="../../Images/Default.png"; src="#String.Format("../../Images/{0}.png", item.MajorAssembly)"/>
<label class="header">Zone</label>
<label>#item.ZoneName</label>
<label class="header">Major Assembly</label>
<label>#item.MajorAssembly</label>
<label class="header">Sub Assembly</label>
<label>#item.SubAssembly</label>
<label class="header">Component Assembly</label>
<label>#item.ComponentAssembly</label>
<label class="header">Business Test</label>
<label>#item.BusinessTest</label>
<label class="header">Fault Code</label>
<label>#item.FaultCode</label>
<label class="header">Fault Code Detail</label>
<label>#item.FaultCodeDetail</label>
</section>
</li>
Next
</ul>
</section>
</fieldset>
End Using
Site.css
html {
margin: 0;
padding: 0;
background-color:#fff;
}
body {
background-color: #fff;
border-top: solid 10px #fff;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
clear:none;
}
b
a:link, a:visited,
a:active, a:hover {
color: #333;
}
a:hover {
text-decoration:underline;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #fff;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
background-color:#fff;
}
#body {
clear: both;
padding-bottom: 35px;
}
footer {
clear: both;
font-size: .8em;
height: 100px;
}
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
color:#999;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color:#999;
text-decoration: none;
font-size: 2em;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
background-color:#fff;
}
.featured .content-wrapper {
background-color: #eb7c04;
background-image: -ms-linear-gradient(left, #eb7c04 0%, #fff 100%);
background-image: -o-linear-gradient(left, #eb7c04 0%, #fff 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f8b589), color-stop(1, #fff));
background-image: -webkit-linear-gradient(left, #eb7c04 0%, #fff 100%);
background-image: linear-gradient(left, #eb7c04 0%, #fff 100%);
color: #f8b589;
padding: 5px 40px 5px 40px;
text-align:right;
display:normal;
}
.featured .site-title {
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 3em;
color:#fff;
margin: 20px 0;
padding-top:10px;
}
.featured hgroup.title h1, .featured hgroup.title h2 {
color: #fff;
}
.featured p {
font-size: 1.1em;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
label {
padding-right: 20px;
text-indent: -15px;
}
/* ajax login/registration dialog */
.ui-dialog {
font-family: inherit;
font-size: 1.0em;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border: 0 none;
}
.ui-dialog input {
font-family: inherit;
font-size: 1.25em;
}
.ui-dialog-titlebar {
color: inherit;
font-weight: inherit;
border: 0 none;
background: none;
float: right;
}
.ui-dialog-titlebar-close {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-widget-header {
border: 0 none;
background: none;
}
.modal-popup {
}
.modal-popup input[type="text"],
.modal-popup input[type="password"] {
width: 90%;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input[type="text"].input-validation-error,
input[type="password"].input-validation-error {
border: 1px solid #e80c4d;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
background-color:#fff;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
}
.fieldset {
border-radius: -moz-border-radius(15px);
border-radius: -webkit-border-radius(15px);
border-radius: -ms-border-radius(15px);
border-radius:15px;
width: 100%;
background: #f7d7a5;
padding: 3px;
margin-left:10px;
margin-right:10px;
}
.fieldset legend {
background: #CCA383;
padding: 6px;
font-weight: bold;
border-radius: -moz-border-radius(15px);
border-radius: -webkit-border-radius(15px);
border-radius: -ms-border-radius(15px);
border-radius:15px;
}
/* content layouts
----------------------------------------------------------*/
.content {
position: relative;
float: left;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
margin-right: 15px;
margin-left: 15px;
}
.content h2
{
font-size: 3em;
font-weight: 600;
color:red;
}
.content label.checkbox {
display: inline;
}
.content input[type="text"],
.content input[type="password"] {
border: 1px solid #e2e2e2;
color: #333;
font-size: 4em;
width: 400px;
}
.content input[type="text"]:focus,
.content input[type="password"]:focus {
border: 1px solid #7ac0da;
}
.content label {
font-size: 4em;
font-weight: 600;
}
.content input[type="submit"],.content input[type="button"] {
background-color: #eb7c04;
background: #eb7c04; /* Old browsers */
background: -moz-linear-gradient(top, #eb7c04 1%, #f1c487 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eb7c04), color-stop(100%,#f1c487)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* IE10+ */
background: linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* W3C */
border: 4px solid #000;
border-radius: -moz-border-radius(15px);
border-radius: -webkit-border-radius(15px);
border-radius: -ms-border-radius(15px);
border-radius:15px;
cursor: pointer;
font-size: 3em;
font-weight: 600;
padding: 7px;
}
.content ul.column {
width: 100%;
padding: 0;
margin: 10px 0;
list-style-type: none;
}
.content ul.column li {
float: left;
max-width: 230px;
display: inline;
}
.content .block {
margin: 5px;
padding: 10px;
background: #eb7c04;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
height: 400px;
width: 200px;
max-height: 400px;
max-width: 200px;
min-height: 400px;
min-width: 200px;
}
.content .block a {
color: #FFF;
}
.content .block img {
width: 89%;
height: 100px;
padding: 5px;
margin: 0px;
background:#fff;
-ms-interpolation-mode: bicubic;
}
.content .block label
{
font-weight: 200;
font-size: 1em;
text-indent: 5px;
display: block;
}
.content .block label.header
{
font-weight: 600;
text-decoration: underline;
}
View Source snippet
<div id="body">
<section class="featured">
<div class="content-wrapper">
<p class="site-title float-left">
QSmart Rectification Sign Off
</p>
<input type="image" src="../../Images/Product.png" />
</div>
</section>
<section class="content-wrapper main-content clear-fix">
System.Linq.OrderedEnumerable`2[QSmartRectification.QSmartRectificationProvider.RectificationFaults,System.Int64] QSmartRectification.QSmartRectificationProvider.RectificationFaults
<br />
<form action="/Failures" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display: none;"></li>
</ul>
</div>
<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>
<section class="content">
<ul class="column">
<li>
<section class="block">
<img alt="../../Images/Default.png" src="../../Images/Hydraulic System.png" ;="" />
<label class="header">Zone</label>
<label>Wheeled SIP 1</label>
<label class="header">Major Assembly</label>
<label>Hydraulic System</label>
<label class="header">Sub Assembly</label>
<label>Valve Blocks</label>
<label class="header">Component Assembly</label>
<label>Hammer Valve</label>
<label class="header">Business Test</label>
<label>Hammer Hoses</label>
<label class="header">Fault Code</label>
<label>Adjust / Align</label>
<label class="header">Fault Code Detail</label>
<label>Fouling</label>
</section>
</li>
<li>
<section class="block">
<img alt="../../Images/Default.png" src="../../Images/Engine Bay.png" ;="" />
<label class="header">Zone</label>
<label>Wheeled SIP 1</label>
<label class="header">Major Assembly</label>
<label>Engine Bay</label>
<label class="header">Sub Assembly</label>
<label>Air Conditioning</label>
<label class="header">Component Assembly</label>
<label>Compressor</label>
<label class="header">Business Test</label>
<label>Installation</label>
<label class="header">Fault Code</label>
<label>Adjust / Align</label>
<label class="header">Fault Code Detail</label>
<label>Twisted</label>
</section>
</li>
Model snippet from WCF Service
'''<remarks/>
<System.CodeDom.Compiler.GeneratedCodeAttribute("System.Xml", "4.0.30319.17626"), _
System.SerializableAttribute(), _
System.Diagnostics.DebuggerStepThroughAttribute(), _
System.ComponentModel.DesignerCategoryAttribute("code"), _
System.Xml.Serialization.XmlTypeAttribute([Namespace]:="http://schemas.datacontract.org/2004/07/vFrame.Service.Qsmart.Sync")> _
Partial Public Class RectificationFaults
Inherits Object
Implements System.ComponentModel.INotifyPropertyChanged
Private auditScoreField As String
Private businessTestField As String
Private commentField As String
Private componentAssemblyField As String
Private createdByField As String
Private failureIDField As Long
Private failureIDFieldSpecified As Boolean
Private faultField As String
Private faultAreaField As String
Private faultCodeField As String
Private faultCodeDetailField As String
Private fixedByCommentField As String
Private fixedByFaultRectificationIDField As Integer
Private fixedByFaultRectificationIDFieldSpecified As Boolean
Private fixedByIDField As Integer
Private fixedByIDFieldSpecified As Boolean
Private majorAssemblyField As String
Private modelNameField As String
Private shortagePartField As String
Private subAssemblyField As String
Private zoneNameField As String

Ok a couple of things, remove the # symbol from the fieldset element second change the for Each syntax and last it's a recomedation you should use the #html helpers instead using the plain html, you code should see like this
<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>
<ul>
#For Each item In Model
Dim currentItem = item
#<li>
<section class="content">
<img alt="../../Images/Default.png"; src="#String.Format("../../Images/{0}.png", item.MajorAssembly)"/>
</section>
<label class="header">Zone</label>
<label>#item.ZoneName</label>
</li>
Next
</ul>
UPDATE
Check the Action of your controller, because assuming that you're calling this action from a wcf service, you should passed the data to the view like this
Public Class FailuresController
Inherits Controller
Function Index(model As IEnumerable(Of QSmartRectificationProvider.RectificationFaults)) As ActionResult
ViewData("Message") = "Open Faults"
'Return View(Session("Failures"))
Return View(model) 'this is how the data is sending to the view
End Function
End Class

Resources