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
Related
I have a button being used to show a dropdown div. The button padding and text can be clicked on to show the dropdown div. The very small Material "font-icon" CANNOT be clicked to show the dropdown div. How can I ensure that you can click anywhere within the button (including directly on the Material icon) in order to show the dropdown div.
Here is a link to show you what I've done.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
body {
margin: 0;
color: #333;
overflow-x: hidden;
padding-top: 80px;
}
:root{
var-MainColor: #4C00F9;
--main-color: #4C00F9;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -64px;
}
#navWrapper {
padding: 0px;
border-bottom: 1px solid #eee;
font-size: 13px;
font-family: Sans-Serif;
width: 100%;
background-color: #fff;
z-index: 1000;
height: 64px;
}
#navLeft {
float: left;
}
#navRight {
float: right;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: var(--main-color);
padding: 24px;
font-size: 13px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: var(--main-color);
color: #fff;
outline: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: 10px;
margin-right: 2%;
margin-top: -8px;
border-radius: 2px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: var(--main-color);
padding: 24px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #fdfdfd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.material-icons.md-01 { font-size: 13px; vertical-align: middle; margin-top: -3px;}
.material-icons.md-02 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: red;}
.material-icons.md-03 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: #40FA35;}
.material-icons.md-04 { font-size: 21px; vertical-align: middle; margin-top: -1px;}
.material-icons.md-05 { font-size: 16px; vertical-align: middle; margin-top: -1px;margin-right: 15px;}
#main {
margin-top: 50px;
position: absolute;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 50px 0px;
}
#sectionInnerText {
max-width: 700px;
padding: 0px 100px;
}
#sectionInnerImage {
max-width: 1000px;
padding: 0px 100px;
}
#sectionInnerImage-rowWrapper {
padding: 0px 100px;
}
#sectionInnerImage-3row {
width: 31%;
max-width: 400px;
display: inline-block;
margin-right: 1vw;
}
#sectionInnerImage-2row {
width: 48%;
max-width: 1000px;
display: inline-block;
margin-right: 1vw;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
font-weight: 700;
font-family: Sans-Serif;
}
h2 {
font-size: 22px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 15px;
}
h3 {
font-size: 13px;
font-family: Sans-Serif;
font-weight: normal;
margin-bottom: 30px;
}
h4 {
font-size: 17px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 5px;
margin-bottom: 0;
display: inline-block;
}
p {
font-size: 19px;
line-height: 180%;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: normal;
margin: 15px 0;
}
a.one {
display: block;
color: #fff;
background-color: var(--main-color);
padding: 16px;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
max-width: 350px;
}
a.one:hover {
background: #4C03F1;
}
a.one:active {
background-color: var(--main-color);
}
#media only screen and (min-width: 1080px) {
section {
min-height: 30vh;
}
}
#media only screen and (max-width: 1080px) {
html, body {
margin: 0;
color: #333;
overflow-x: hidden;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 0px;
}
#sectionInnerText {
padding: 2vh 5vw;
}
#sectionInnerImage {
padding: 0 5vw;
}
#sectionInnerImage-rowWrapper {
padding: 0 5vw;
}
#sectionInnerImage-3row {
width: 100%;
max-width: 1000px;
}
#sectionInnerImage-2row {
width: 100%;
max-width: 1000px;
}
p {
font-size: 21px;
}
ul li {
font-size: 21px;
}
a.one, a.two, a.three, a.four {
display: block;
margin-bottom: 25px;
max-width: 100%;
max-width: 450px;
}
.dropdown-content {
width: 100vw;
margin: 0;
margin-top: -6px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
border-top: 1px solid #eee;
border-bottom: 0;
z-index: 1;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}
.dropdown-content a{
border-bottom: 1px solid #f4f4f4;
}
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down">
<div id="navWrapper">
<div id="navLeft">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu <i class="material-icons md-01">keyboard_arrow_down</i></button>
<div id="myDropdown" class="dropdown-content">
<i class="material-icons md-05">home</i> Home & Projects List
<i class="material-icons md-05">dashboard</i> Project 01
<i class="material-icons md-05">dashboard</i> Project 02
<i class="material-icons md-05">dashboard</i> Project 03
<i class="material-icons md-05">account_circle</i> Info & Contact
<i class="material-icons md-05">picture_as_pdf</i> View & Download Resume
</div>
</div>
</div>
</div>
</header>
I'm building an app that uses angular and node.
Ive done some CSS work to get the styling how I like.
When I view the buttons on the web, at all screen sizes,
it looks great, but on the iPhone, it looks horrible.
Everything is aligned weird and the padding/margins are incorrect.
Only inside the button.
Ive tried -webkit-appearance: none!important;
but have had no luck. I tried it on every element.
Anyone know what I can do to get my buttons to render like they
do on the web?
Here is a fiddle that replicates the problem. View it on phone and web view : https://jsfiddle.net/2543ge0a/2/
.socialBtn {
-webkit-appearance: none!important;
width: 300px;
color: #fdfdfd;
font-weight: bold;
text-align: center!important;
font-size: 17px;
}
.field p.control {
margin: 0 auto;
text-align: center!important;
}
.fbBtn {
-webkit-appearance: none!important;
background-color: #3b5998!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.googleBtn {
-webkit-appearance: none!important;
background-color: #D84B37!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.linkedinBtn {
-webkit-appearance: none!important;
background-color: #0077b5!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.signUpBtn {
-webkit-appearance: none!important;
background-color: #0077be!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.page {
padding-top: 0;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 50px;
}
.title.has-text-centered {
color: #111;
font-size: 60px;
font-weight: 500;
margin-bottom: 1rem;
width: auto;
}
h4.title {
font-size: 25px;
text-align: center;
}
.subtitle {
margin-top: 1.5rem!important;
text-align: left;
line-height: 1.5;
}
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 35px;
line-height: 1.3;
}
#media(max-width: 325px) {
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 22px;
line-height: 1.3;
margin-bottom: 10px;
}
.subtitle {
margin-top: 1rem!important;
text-align: left;
line-height: 1.2;
font-size: 17px;
}
}
#media(max-width: 400px) {
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 28px;
line-height: 1.3;
margin-bottom: 10px;
}
.subtitle {
margin-top: 1rem!important;
text-align: left;
line-height: 1.3;
}
}
a {
color: #FF9933;
}
.subtitle.is-6 {
margin-bottom: 30px;
}
button {
-webkit-appearance: none!important;
text-align: center!important;
}
#ctaBtn {
-webkit-appearance: none!important;
padding: 5px 7px;
height: 40px;
width: 150px;
color: #fdfdfd;
font-weight: 600;
font-size: 18px;
box-shadow: 2px 2px 6px #111!important;
background-color: #FF9933;
border: none;
text-align: center!important;
-webkit-transition: all .15s ease; /* Safari and Chrome */
-moz-transition: all .15s ease; /* Firefox */
-ms-transition: all .15s ease; /* IE 9 */
-o-transition: all .15s ease; /* Opera */
transition: all .15s ease;
}
section.section {
background-color: transparent;
padding-top: 0;
padding-bottom: 140px;
}
.button:hover {
-webkit-appearance: none!important;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-ms-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
}
.button:active {
-webkit-appearance: none!important;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
}
.is-primary {
background-color: #0077be!important;
}
.is-primary:hover {
background-color: #0077be!important;
opacity: .8;
}
input.input, textarea.textarea {
border-radius: 0;
border-right: none;
border-top: none;
border-left: none !important;
box-shadow: none !important;
background: transparent!important;
color: #fdfdfd;
}
input::-webkit-input-placeholder {
color: #111!important;
opacity: .6;
}
input:-moz-placeholder { /* Firefox 18- */
color: #111!important;
opacity: .6;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #111!important;
opacity: .6;
}
input:-ms-input-placeholder {
color: #111!important;
opacity: .6;
}
.textarea {
min-height: 10px;
}
input.input:focus, textarea.textarea:focus {
border-bottom-color: #0077be;
}
p.content {
color: #111;
}
#error {
z-index: 1000;
color: red;
font-weight: bold;
text-align: center;
padding: 13px 30px;
margin: 0 auto;
top: 0;
opacity: 0;
height: 0;
width: 300px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
img.image {
margin: 0 auto;
}
#media(min-width: 650px) {
img.image {
max-height: 400px;
max-width: 300px;
}
}
#media screen and (min-width: 1008px) {
.page {
padding-left: 150px;
padding-right: 150px;
}
.container {
width: inherit;
}
.subtitle.is-6 {
font-size: 20px;
}
a {
font-size: 22px;
font-weight: 500;
cursor: pointer;
}
}
#media(max-width: 700px) {
.socialBtn {
-webkit-appearance: none!important;
width: 250px;
text-align: center!important;
}
}
<div class="modal" [ngClass]="{'is-active': signup}">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<i class="fa fa-times-circle" aria-label="close" (click)="onClickAction('exit')" style="float: right;
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px); translateX(10px)"></i>
<div class="container">
<h4 class="title"
style=" font-family: 'Ubuntu', sans-serif;color: #0077be;">For the innovators</h4>
<h6 class="subtitle has-text-centered">Signup</h6>
<p class="content">For our first <strong style="color: #FF9933; font-size: 17px;">1000</strong> users, we're offering
<strong style="color: #FF9933; font-size: 17px;">free</strong>
fees on all transactions for the first year. We'll take care of the business, you just provide the electronics.</p>
<div *ngIf="!signupComplete">
<div class="field" style="text-align: center">
<div class="card">
<input
type="email"
name="email"
#emailT="ngModel"
[(ngModel)]="user.email"
placeholder="email *required"
required
style="color: #111"
class="input">
<input
type="text"
name="name"
#nameT="ngModel"
[(ngModel)]="user.name"
placeholder="name"
style="color: #111"
class="input">
<input
type="text"
name="image"
#imageT="ngModel"
[(ngModel)]="user.image"
placeholder="image url"
style="color: #111"
class="input">
</div>
</div>
<div class="field">
<p class="control">
<button
(click)="onSignup()"
class="button socialBtn signUpBtn has-text-centered">Join rent
</button>
</p>
</div>
<h4 class="subtitle has-text-centered">Or</h4>
<div class="field">
<p class="control">
<button
(click)="authSignin('facebook')"
class="button socialBtn fbBtn">
<span class="icon is-small">
<span class="fa fa-facebook"></span>
</span> <span> | Signup with Facebook</span>
</button>
</p>
</div>
<!--<div class="field">-->
<!--<p class="control">-->
<!--<button-->
<!--(click)="authSignin('linkedin')"-->
<!--class="button socialBtn linkedinBtn">-->
<!--<span class="icon is-small">-->
<!--<span class="fa fa-linkedin"></span>-->
<!--</span> <span> | Signup with Linkedin</span>-->
<!--</button>-->
<!--</p>-->
<!--</div>-->
<div class="field">
<p class="control">
<button
(click)="authSignin('google')"
class="button socialBtn googleBtn">
<span class="icon is-small">
<span class="fa fa-google"></span>
</span> <span> | Signup with Google</span>
</button>
</p>
</div>
</div>
<img src="../../assets/animat-checkmark-color.gif" alt="" class="image" *ngIf="checkmark">
<h4 class="title" *ngIf="thankyou">Thanks for signing up! <br>Look out for an email</h4>
</div>
</section>
</div>
</div>
As you described that Everything is aligned weird and the padding/margins are incorrect on iPhone. It seems that viewport is missing, So add this viewport to your header. Hope this will help you.
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
I tried to implement select2 plugin using the Bulma css framework but it seems messy in frontend. I tried this using bootstrap and yes there's no problem since select2 has a bootstrap compatibility.
HTML:
<div class="field">
<label class="label">Role</label>
<p class="control">
<span class="select is-fullwidth">
<select2 v-model="form.role"
placeholder="Select Role"
name="role"
:value="form.role"
:multiple="false"
>
<option></option>
<option v-for="role in roles" :value="role.id">{{ role.display_name }}</option>
</select2>
</span>
</p>
</div>
I made it work, maybe my example can help you.
View
<div class="field">
<label class="label">Hair</label>
<div class="control">
<select2 class="is-medium" v-model="post.custom_data.hair" :options="{}">
#foreach (config('post.cat.hair') as $id => $value)
<option value="{{ $id }}">{{ __($value) }}</option>
#endforeach
</select2>
</div>
</div>
SASS
.select2-wrapper {
.select2-container {
.select2-selection {
transition: border-color $speed;
font-family: $family-sans-serif;
height: 2.285em;
line-height: 1.5;
font-size: 1rem;
outline: none !important;
display: inline-flex;
align-items: center;
width: 100%;
border-color: $border;
border-radius: $radius;
&:hover {
border-color: $border-hover;
}
.select2-selection__rendered {
padding-left: 0.75em;
padding-right: 0.75em;
}
.select2-selection__arrow {
display: none;
}
}
&.select2-container--open {
.select2-selection {
border-color: $primary;
&:hover {
border-color: $primary;
}
}
}
}
&.is-medium {
.select2-container {
.select2-selection {
font-size: $size-5;
}
}
}
&.is-large {
.select2-container {
.select2-selection {
font-size: $size-4;
}
}
}
}
.select2-container {
.select2-dropdown {
border-color: $primary;
.select2-search {
margin: 10px;
.select2-search__field {
#extend .input;
border-radius: $radius !important;
}
}
.select2-results__options {
max-height: 210px;
.select2-results__option {
padding: 0.75em;
font-family: $family-sans-serif;
font-size: 1rem;
&.select2-results__option--highlighted {
background: $primary;
}
}
}
}
}
Result
Hope it helps ^^
.select2-container {
.select2-selection--single {
height: auto !important;
padding: 3px 0 !important;
border: 1px solid #dbdbdb !important;
.select2-selection__arrow{
top: 5px !important;
}
.select2-selection__placeholder {
color: #dbdbdb !important;
}
}
.select2-dropdown {
border: 1px solid #dbdbdb !important;
border-top: 0 !important;
.select2-search {
margin: 5px;
.select2-search__field {
padding: 10px !important;
border-radius: 3px !important;
font-size: 1rem;
height: 2.25em;
box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
max-width: 100%;
width: 100%;
border-radius: 3px !important;
}
}
.select2-results__options {
max-height: 200px !important;
.select2-results__option {
padding: 0.37em 0.75em !important;
font-size: 1rem;
&.select2-results__option--highlighted {
}
}
}
}
}
I open issue about this.
https://github.com/jgthms/bulma/issues/1555
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.
I have an ASP.NET MVC View that works great on IE7, but looks really crappy when I try to view it with IE6. With IE6, the white area of the page (the ContentPlaceHolder part) is bunched over to the right and does weird things like move around when I resize the window. I have looked in the .aspx, Site.Master, and Site.css to see what is the problem but I can't find it anywhere! Can someone help? Here are my files:
Login.aspx:
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="EventScheduler.View.Views.Account.Login" %>
<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Login</h2>
<p>
Please enter your username and password below.
</p>
<%= Html.ValidationSummary() %>
<% using (Html.BeginForm()) { %>
<div>
<table>
<tr>
<td>Username:</td>
<td>
<%= Html.TextBox("username") %>
<%= Html.ValidationMessage("username") %>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<%= Html.Password("password") %>
<%= Html.ValidationMessage("password") %>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</div>
<% } %>
</asp:Content>
Site.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="EventScheduler.View.Views.Shared.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><%= Html.Encode(ViewData["Title"]) %></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>ASCCC Event Scheduler Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LoginUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
ASCCC Event Scheduler Application © Copyright 2009
</div>
</div>
</div>
</body>
</html>
Site.css:
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
background-color: #5c87b2;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
a:link
{
color: #034af3;
text-decoration: underline;
}
a:visited
{
color: #505abc;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #12eb87;
}
p, ul
{
margin-bottom: 20px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
h1
{
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2
{
padding: 0 0 10px 0;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
#header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 32px !important;
}
#main
{
padding: 30px 30px 15px 30px;
background-color: #fff;
margin-bottom: 30px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#footer
{
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}
ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a
{
background-color: #fff;
color: #000;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.error
{
color:Red;
}
#menucontainer
{
margin-top:40px;
}
#title
{
display:block;
float:left;
text-align:left;
}
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
#logindisplay a:link
{
color: white;
text-decoration: underline;
}
#logindisplay a:visited
{
color: white;
text-decoration: underline;
}
.field-validation-error
{
color: #ff0000;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
body
{
}
.button
{
width:75px
}
.eventLink
{
}
.alert
{
color:Red
}
.message
{
color:Green
}
.registrationField
{
width:700px
}
.registrationField_Enabled
{
background-color:#336699;
width:700px
}
.fieldName
{
}
.requiredBox
{
}
.detailType
{
}
.fieldOptions
{
}
.pageTitle
{
color:Black;
font-size:large
}
.pageSubTitle
{
color:Black;
font-size:medium
}
.staticFieldLabel
{
color:Black;
width:150px
}
.staticFieldTextBox
{
width:250px
}
.dynamicFieldLabel
{
color:Black;
width:150px
}
.dynamicFieldDropDown
{
width:250px
}
.dynamicFieldPhoneNumberUS1
{
width:30px;
}
.dynamicFieldPhoneNumberUS2
{
width:30px;
}
.dynamicFieldPhoneNumberUS3
{
width:40px;
}
.dynamicFieldPhoneNumberUS4
{
width:40px;
}
Having a width of 90% on your page wrap may not be the best idea. Setting a pixel value (say 800px) will eliminate some of the issues you may be having with jumping content.
Also, you should modify div#title and div#logindisplay
#title
{
width: 600px;
float:left;
}
#logindisplay
{
font-size:1.1em;
float:right;
text-align:right;
padding:10px;
color:White;
width:150px;
}
It seems like you want your page centered. IE6 needs a little help. (text-align:center;)
body
{
background-color: #5c87b2;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
text-align:center;
}
Is it worthwile trying to make it look good in IE6. It is on the way out and very few people use it. If you create web sites for IE7 + 8 and also Firefox 2 + 3 then you have covered 80% of your market.