VB NET user control panel doesn't show up - vb.net

I'm not a vb net master, and I got some problem I still can't solve.
I have a main page, when I click on a button I want to display a panel (a web user control I imported in the main page) but it shows nothing.
I think I've done some stupid mistake but I can't get out of it.
Let me show you some code:
This is the user control:
<asp:Panel ID="MainPanelUserMessage" runat="server" Height="278px" Style="z-index: 100; left: 0px;
position: absolute; top: 0px; background-position: center center; background-attachment: fixed; background-repeat: repeat; font-size: 12px; font-family: Tahoma;" Width="746px">
<asp:Label ID="LabelTitoloMex" runat="server" Style="font-weight: bold; font-size: 14px;
z-index: 100; left: 0px; color: #ffffff; font-family: Verdana, Tahoma; position: absolute;
top: 0px; background-color: #000000; text-align: center" Text="Messaggio dal supporto tecnico"
Width="746px"></asp:Label>
<asp:Label ID="LabelOggettoMex" runat="server" Style="font-weight: bold; font-size: 12px;
z-index: 105; left: 7px; color: #424242; font-family: Tahoma, Verdana; position: absolute;
top: 30px" Text="Oggetto:"></asp:Label>
<asp:TextBox ID="TextOggettoUser" runat="server" MaxLength="100" Style="font-size: 12px;
z-index: 106; left: 68px; font-family: Tahoma, Verdana; position: absolute; top: 30px;
text-align: left" ToolTip="Oggetto" Width="660px" ReadOnly="True"></asp:TextBox>
<asp:TextBox ID="TextMessaggioUser" runat="server" Height="160px" MaxLength="2000" Style="font-size: 12px;
z-index: 107; left: 9px; font-family: Tahoma, Verdana; position: absolute; top: 60px;
text-align: left" TextMode="MultiLine" ToolTip="Messaggio" Width="721px"
ReadOnly="True"></asp:TextBox>
<asp:Button ID="okButton" runat="server" Style="font-size: 12px;
font-family: Tahoma, Verdana; text-align: left" CssClass="style1"
Text="Chiudi"> </asp:Button>
<input id="cbxRemember" type="checkbox" class="style2" />
<asp:Label ID="lblRemember" runat="server" Style="font-weight: bold; font-size: 12px;
color: #424242; font-family: Tahoma, Verdana; "
Text="Non mostrare più questo messaggio." CssClass="style3"></asp:Label>
</asp:Panel>
In the page it will contain the panel it autogenerated this:
Protected WithEvents MessaggioUtente1 As Global.System.Web.UI.WebControls.Panel
When i click the button this is the code that is executed:
PanelClientEnabled = False //this works and obfuscates background
UserMessage1.Visible = True
But the panel doesn't show up.
Any hint?

Related

I am not able to sendKeys to the input element using selenium. Also tried with js

<div class=" css-0">
<div class="css-zcohbc-singleValue">General</div>
</div>
<div class="css-0">
<div class="" style="display: inline-block;">
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;">
</div>
</div>
</div>
</div>
I need to sendKeys to the input tag.
WebElement elmnt = driver.findElement(By.xpath("//input[#aria-autocomplete='list']"));
Tried using plain Selinium,
elmnt.click();
elmnt.sendKeys("Text");
Also tried clicking with JS and sending keys
JavascriptExecutor js= (JavascriptExecutor) driver;
js.executeScripts("arguments[0].click();",elmnt);
elmnt.sendKeys("Text");
Could anyone suggest, What I might be missing??

How to get Bootstrap Jumbotron not to lose its height without showing the white space when testing in a browser

I'm having an issue with my jumbotron not scaling properly when i'm trying to test my website. My height changes every time I adjust the size of the browser, which cause it to show the white space. Is there a way to set the height for the jumbotron without showing the white space?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Mobile Specific Metas
================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Portfolio of Jason Murray</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome css file-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Default Theme css file -->
<link id="orginal" href="css/default-theme.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--=========== HEADER SECTION ================-->
<header id="header">
<!-- BEGIN MENU -->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div><!-- END MENU -->
</header>
<!--=========== END HEADER SECTION ================-->
<!--=========== MAIN CONTENT SECTION ================-->
<div class="jumbotron">
<div class="container">
<div class="image_opacity"></div>
<div class="caption">
<h2>Front-End</h2>
<h2>Web Developer</h2>
<p>Hi, I'm Jason Murray and I have a passion for building simplistic websites.</p>
Recent Work
</div>
</div>
</div>
<!--=========== END MAIN CONTENT SECTION ================-->
<!--=========== FOOTER SECTION================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_left">
<p>© 2015 Jason Murray Web Design. All Rights Reserved</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="footer_right">
<ul class="social_nav">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!--=========== END FOOTER SECTION================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body,html{
overflow-x:hidden;
}
html{
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden !important;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
color: #2f2f2f;
}
a:focus{
outline: none;
text-decoration: none;
}
h1,h2{
font-family: 'Montserrat', sans-serif;
}
h3,h4,h5,h6{
font-family: 'Varela', sans-serif;
}
h2 {
color: #313338;
font-size: 72px;
font-weight: 700;
line-height: 57px;
margin: 0;
padding-bottom: 10px;
text-transform: uppercase;
}
img{
border:none;
}
/*--------------------*/
/* HEADER */
/*--------------------*/
#header{
float: left;
display: inline;
width: 100%;
position: relative;
}
/*--------.menu_area-------- */
.menu_area{
position: absolute;
left:0;
right: 0;
top: 0;
}
.navbar-default {
background-color: #000000;
border-color: transparent;
padding: 12px 0px;
}
.past-main {
background-color: rgba(0,0,0,0.8);
margin-top: 0px;
padding:6px 0px;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
#navbar{overflow-x: hidden;}
.navbar-brand {
color: #fff !important;
font-size: 20px;
font-weight: bolder;
font-family: 'Varela', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover{
text-transform: uppercase;
color: #2da2c8;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #2da2c8;
}
.navbar-brand > span {
color: #2da2c8;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #2da2c8;
}
/*---------------------*/
/* MAIN CONTENT - HOME */
/*---------------------*/
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
margin-top: 75px;
height: 305px;
}
.image_opacity{
background: none repeat scroll 0 0 #242434;
margin-top: 75px;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 305px;
z-index: 9;
}
.caption {
margin-top: 17%;
padding: 5px 0;
position: relative;
text-align: center;
z-index: 999;
}
.caption > h2 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
line-height: 12px;
margin: 0 auto 10px;
padding-bottom: 8px;
text-align: center;
text-transform: uppercase;
width: 90%;
}
.caption>p{
color: #ffffff;
font-size: 12px;
}
.caption_btn{
padding: 10px 15px;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
display: inline-block;
text-transform: uppercase;
}
.caption_btn:hover,.caption_btn:focus{
border-color:#2da2c8;
color: #2da2c8;
text-decoration: none;
}
/*----------------------*/
/* MAIN CONTENT - ABOUT */
/*----------------------*/
#about {
display: inline;
float: left;
width: 100%;
padding: 80px 0px;
}
.about_area{
float: left;
display: inline;
margin-bottom: 140px;
width: 100%;
min-height: 200px;
}
.heading{
float: left;
display: inline;
width: 100%;
}
.heading h2 {
display: inline-block;
margin-bottom: 35px;
margin-top: 65px;
padding-bottom: 15px;
padding-right: 50px;
font-size: 40px;
line-height: 40px;
}
.heading p{
font-size: 16px;
line-height: 28px;
font-weight: 300;
}
.about_content{
float: left;
display: inline;
width: 100%;
padding: 50px 0px;
}
.about_featured{
float: left;
display: inline;
width: 100%;
}
.panel-group .panel {
border-radius: 0;
margin-bottom: 0px;
box-shadow: none;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-default {
border-color: transparent;
}
.panel-default > .panel-heading {
background-color: transparent;
color: #333;
border: 0 none !important;
padding: 5px 15px;
}
.panel-title {
border-bottom: 1px solid #ccc;
color: #222;
font-family: 'Varela', sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a {
display: block;
text-decoration: none;
padding-bottom: 10px;
}
.panel-default .in{
padding-left:10px;
margin-left: 20px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.panel-title a span{
margin-right: 5px;
}
.panel-body {
border-top-color: transparent !important;
padding: 0px 15px;
margin: 10px 0px;
}
.about_slider{
float: left;
display: inline;
width: 100%;
height: 350px;
}
.single_iteam{
float: left;
display: inline;
width: 100%;
height:100%;
}
.single_iteam img {
max-width: 100%;
}
.about_slider .slick-dots li button:before {
content: "•";
font-size: 28px;
}
.about_slider .slick-dots li.slick-active button:before {
opacity: 0.75;
}
.skills_area{
background-color: #fff
float: left;
display: inline;
width: 100%;
min-height: 350px;
padding: 85px 0px;
position: relative;
}
.skills{
position: relative;
z-index: 999;
}
.heading h3 {
color: #000;
display: inline-block;
float: left;
font-size: 40px;
margin: 0 0 40px;
padding-bottom: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 40px;
}
div[data-dimension] {
float: none;
margin: 0 auto;
}
.circle-text{
color: #000;
}
.single_skill{
float: left;
display: block;
width: 100%;
text-align: center;
}
.single_skill > h4 {
color: #000000;
font-size: 20px;
font-weight: bold;
}
/*--------------------------*/
/* MAIN CONTENT - PORTFOLIO */
/*--------------------------*/
/*------------------------*/
/* MAIN CONTENT - CONTACT */
/*------------------------*/
/*--------------------*/
/* FOOTER */
/*--------------------*/
#footer{
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: #000;
}
.footer_left{
float: left;
display: inline;
width: 100%;
}
.footer_left > p {
font-size: 12px;
text-align: center;
color: #ffffff;
margin-bottom: 5px;
margin-top: 5px;
}
.footer_left > p a {
font-weight: bold;
}
.footer_right{
float: left;
display: inline;
width: 100%;
}
.social_nav{
text-align: center;
}
.social_nav li{
display: inline-block;
}
.social_nav li a {
border: 1px solid #fff;
color: #ffffff;
display: inline-block;
font-size: 18px;
height: 30px;
margin-left: 5px;
text-align: center;
width: 35px;
line-height: 28px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.social_nav li a:hover{
color: #2da2c8;
border-color: #2da2c8;
}
/*----------------------------------*/
/* RESPONSIVE STYLE - MEDIA QUERIES */
/*----------------------------------*/
/* Landscape phones and portrait tablets */
#media(min-width: 481px) and (max-width: 767px) {
.navbar-brand {color: #fff !important;font-size: 26px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 12px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 592px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 592px;opacity: 0.8;width: 100%;}
.caption {margin-top: 40%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 25px;font-weight: 700;line-height: 20px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 14px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 14px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 24px;}
#footer > .container > .row {margin-right: auto;}
.footer_left > p {font-size: 12px;text-align: center;}
.social_nav{text-align: center;}
}
/* Portrait tablets and small desktops */
#media(min-width: 768px) and (max-width: 991px) {
.navbar-brand {color: #fff !important;font-size: 30px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 13px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 816px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 816px;opacity: 0.8;width: 100%;}
.caption {margin-top: 28%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 45px;font-weight: 700;line-height: 56px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 18px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 13px;text-align: left;}
#footer .row {margin-left: -26px;}
.social_nav{text-align: right;margin-right: 12px;}
}
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.navbar-brand {color: #fff !important;font-size: 33px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.container > .navbar-header {margin-left:8px;}
.navbar-default .navbar-nav > li > a {font-size: 14px;}
.navbar-right {margin-right:0px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 1024px;}
.image_opacity{background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 1024px;opacity: 0.8;width: 100%;}
.caption {margin-top: 32%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 55px;font-weight: 700;line-height: 66px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption> p {color: #ffffff;font-size: 19px;}
.caption_btn{padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 18px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
#footer > .container {margin-left:-15px;margin-right:-15px;}
.footer_left > p {font-size: 14px;text-align: left;}
.social_nav{text-align: right;margin-right: 18px;}
}
/* Large desktops and laptops */
#media(min-width: 1200px) {
.navbar-brand {color: #fff !important;font-size: 35px;font-weight: bolder;font-family: 'Varela', sans-serif;}
.navbar-default .navbar-nav > li > a {font-size: 15px;}
.jumbotron {background: url("../img/lucho-49.jpg") no-repeat center center;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;background-size: 100% 100%;height: 740px;}
.image_opacity {background: none repeat scroll 0 0 #242434;margin-top: 75px;height: 740px;opacity: 0.8;width: 100%;}
.caption {margin-top: 10%;position: relative;text-align: center;z-index: 999;}
.caption > h2 {color: #ffffff;font-size: 65px;font-weight: 700;line-height: 76px;margin: 0 auto 10px;padding-bottom: 8px;text-align: center;text-transform: uppercase;width: 90%;}
.caption > p {color: #ffffff;font-size: 20px;}
.caption_btn {padding: 10px 15px;border: 2px solid #fff;color: #fff;font-size: 20px;display: inline-block;text-transform: uppercase;}
.caption_btn:hover,.caption_btn:focus {border-color:#2da2c8;color: #2da2c8;text-decoration: none;}
#footer{padding: 35px;}
.footer_left > p {font-size: 15px;text-align: left;}
.social_nav{text-align: right;}
}
I'd go for a different approach. The problem is, you've got fixed heights on your jumbotron and your image_opacity. A far more easy approach is putting a faux-gradient on the jumbotron, like this:
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% auto;
margin-top: 75px;
height: 400px;
position: relative;
}
And then you don't need the image_opacity. Oh and I didn't check this thoroughly, but -webkit-, -moz-, and -o-background-size are imho non-existent.
Edit 2: set the parent div and the jumbotron to a height of 100% (in this case, that's body):
html, body {
height: 100%;
}
.jumbotron {
background-image:
linear-gradient(rgba(249, 249, 249, 0.9), rgba(249, 249, 249, 0.9)),
url("../img/lucho-49.jpg") no-repeat center center;
background-size: 100% 100%;
margin-bottom: 0px;
height: 100%;
}
Bootply (in this example the page is wrapped in a #wrap element, so this has to be height:100%;, too.)
This should do the trick. Try to put !important after the properties if it's not working immediately.

How to remove gap between navigation and the header? Also between navigation and main content?

How can I remove the gap between the navigation and the header? ALso between the nav and the main content?
Navigation buttons i.e. ul are in their perfect place. but black navigation bar is causing me lots of unnecessary troubles! I am unable to fix it!
here is my html
<div id="header">
<div id="header-container">
Logo goes here!!
</div>
</div>
<div class="nav">
<div class="nav-container">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Browse</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="main-body">
<h1>Contant here!</h1>
</div>
here is my css code:
{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
body{
margin: 0 auto;
background: #cccccc;
}
#header{
background: #FF9900;
height: 160px;
width: 100%;
}
#header-container{
width: 960px;
height: 160px;
margin: 0px auto 0px auto;
}
.nav{
width: 100%;
height: 70px;
background: #000000;
margin-top: 0px;
margin-bottom: 0px;
}
.nav .nav-container{
width: 960px;
height: 62px;
margin: auto;
margin-top: 5px;
}
.nav .nav-container ul{
margin-top: 0px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
.nav .nav-container ul li{
display: inline-block;
padding: 0px;
border-radius: 10px;
margin-right: 20px;
margin-left: 7px;
background: #000000;
}
.nav .nav-container ul li a{
color: #FF9900;
text-decoration: none;
font-weight: bold;
font-size: 22px;
display: inline-block;
width:150px;
text-align: center;
height: 58px;
line-height: 250%;
}
.nav .nav-container ul li a:hover{
background:#FF9900;
color: white;
border-radius: 10px;
}
.main-body{
width: 960px;
background: white;
margin:auto;
margin-top: 0px;
}
Change margin-top: 5px; to margin-top: 0; in .nav .nav-container.
.nav .nav-container{
width: 960px;
height: 62px;
margin: auto;
/* margin-top: 5px; becomes */ margin-top: 0;
}
Demo: http://jsfiddle.net/ue65t3gh/

Add pop up with background disabled in MVC 4 Jquery Mobile

How do i add pop up to an anchor tag with background disabled in MVC 4 Jquery Mobile? I am new to the MVC 4 and JQuery
Put this content in your style sheet
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 80%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
and in the code use the following
Open Modal
<div id="openModal" class="modalDialog" data-theme="c">
<div>
X
<h2>Pop up</h2>
<p>Pop up content. You can add your controls here</p>
</div>
</div>
this logic worked for me. Hope it works for you also.

input::-webkit-outer-spin-button sets margin-left and only shows up in Chrome

Ok...this is very weird.
Here is the code for all of my inputs:
#sign_in input#submit {
height: 56px;
background-color: #88b805;
font-weight: bold;
text-decoration: none;
padding: 5px 40px 5px 40px; /* top, right, bottom, left */
border: 0;
width: auto;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
-webkit-border-radius: 25px;
}
#sign_in input#submit:hover {
-moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
cursor: pointer;
}
input, textarea {
font-size:20px;
display: block;
width: 365px;
height: 40px;
background: #273243;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #ffffff;
/* margin: 0 0 0 100px; top, right, bottom, left */
padding: 5px 5px 5px 15px; /* top, right, bottom, left */
border: 0px;
}
input:focus, textarea:focus {
background: #313131;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
My issue is with the submit button:
<div id="sign_in" align="center">
<form>
<input id="name" type="text" value="Email address" required class="clearField curved" /> <br />
<input id="password" type="text" value="Password" required class="clearField curved" /><br />
<input id="submit" type="submit" value="Log in" class="curved" align="center">
</form>
</div>
Even though I have the div set to align=center, everything is centered in Chrome except the login button.
Btw, when I check it in Firefox, and Safari on a Mac it looks ok. It is just Chrome in both Windows and Mac that the submit button looks like it is flush against the left margin.
Also, when I check the properties in developer tools in Chrome, I notice something strange:
input::-webkit-outer-spin-button {
-webkit-appearance: outer-spin-button;
-webkit-user-select: none;
display: inline-block;
margin-left: 2px;
}
I am not sure why the margin-left is set to 2px. I guess I could target that specific pseudo class to override it, haven't tried that yet, but was wondering if there is another way to do it without having to do that? That seems a bit 'hackish'.
Why is it doing this and how can I fix it? I want the button to be center aligned.
Edit: I targeted that specific Pseudo selector, and tried to set the margin and nothing happened. It didn't change the layout of the button, even setting margin-left to 150px. So not sure what's happening.
Remove align="center" from your div element.
#sign_in {
width:960px;
margin:0 auto;
}
#sign_in input#submit {
height: 56px;
background-color: #88b805;
font-weight: bold;
text-decoration: none;
padding: 5px 40px 5px 40px; /* top, right, bottom, left */
border: 0;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
-webkit-border-radius: 25px;
}
#sign_in input#submit:hover {
-moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
cursor: pointer;
}
input, textarea {
font-size:20px;
display: block;
width: 365px;
height: 40px;
background: #273243;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #ffffff;
/* margin: 0 0 0 100px; top, right, bottom, left */
padding: 5px 5px 5px 15px; /* top, right, bottom, left */
border: 0px;
margin:0 auto;
}