Develop Reference

White space under footer page on website

I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.

Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.

you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.

The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}

Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}

asp.net 4 change selected menuitem color

The menuitem's background color of asp.net 4 (developed via Visual Studio 2010)can't be change after be selected (I want the selected menuitem's background color is YellowGreen). I google this issue and try all ways found from internet. But they don't work. The menu is in a master file and uses the project's default menu css style:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="Statistics.aspx" Text="Statistics"/>
<asp:MenuItem NavigateUrl="Change.aspx" Text="Change"/>
<asp:MenuItem NavigateUrl="HistoryData.aspx" Text="History Data" />
<asp:MenuItem NavigateUrl="ChangePassword.aspx" Text="Change Password"/>
<asp:MenuItem NavigateUrl="About.aspx" Text="About"/>
</Items>
</asp:Menu>
The menu css in Site.css is
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 0px 0px 0px 0px; /*padding: 4px 0px 4px 8px;*/
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 2.0em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
font-size:medium;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color:#ADFF2F;
color:White;
text-decoration: none;
}
I can see the color change when I click a menuitem but the color is back to dark blue after release the mouse button. I tried change its static selected/dynamic selected style; change the menuitem's select status as true in MenuItemClick event; add selected css style;etc. But the selected menuitem's back color can't be changed. Thanks for your help

use following style:
a:active{background-color:color;}

C# Menu Control places an arrow that is beyond the menu item

I have created a menu control. There are main menu items and then static items. The menu control places a default arrow head pointing to the right. I wanted to change the direction, pointing downwards and also, it seems like the default menu control creates a separate td for the placement of the arrow. I didn't like this, because this actually places the arrow beyond the menu item.
So I disabled the default arrow and added my own.
// Create a new Menu control.
_MainNav = new Menu();
_MainNav.StaticEnableDefaultPopOutImage = false;
_MainNav.DynamicEnableDefaultPopOutImage = false;
_MainNav.StaticPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
_MainNav.DynamicPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
This fixed the direction of the arrow. From pointing to the right, now it points downwards.
However the arrow is still placed in a new td.... there is a gap between the menu item and the arrow indicating that there are child items. Visually it looks like that the arrow for one of the menu item is placed at the beginning of the next menu item.
Here is my css:-
div.nav
{
border: 1px solid #fff;
width: 960px;
border-bottom-width: 2px;
clear: both;
}
.menu
{
padding: 0;
margin: 0;
width: 960px;
background-color: #71cd7b;
display: inline-block;
border-bottom: 1px solid white;
font-size: 15px;
}
.menu tr
{
text-align: left;
padding: 0;
margin: 0;
list-style: none;
float: left;
}
.menu td
{
float: left;
padding: 0;
margin: 0;
white-space: nowrap;
}
.menu td a
{
float: left;
width: 134px;
height: 25px;
padding-top: 10px;
text-indent: 15px;
color: #fff;
font-weight: bold;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
background-image: url(Images/divider.jpg);
background-position: right;
background-repeat: repeat-y;
}
.menu td a:hover
{
background-color: #7156a4;
font-size: 15px;
}
.menu td a.active
{
background-color: #7156a4;
font-size: 15px;
}
.subMenu
{
border:1px double Black;
border-width: thin;
}
.subMenuItem
{
background-color : white;
width: 160px;
margin-left:5px;
margin-top:2px;
margin-bottom:5px;
font-family:#Arial Unicode MS;
color:Black;
}
.subMenuItem:hover
{
background-color :#7156a4;
margin-left:5px;
margin-top:3px;
margin-bottom:2px;
margin-right:5px;
font-weight:bold;
color:White;
}
My HTML:-
<div id="nav" class="nav">
<asp:PlaceHolder ID="MenuPlaceHolder" runat="server" />
</div>
<div class="body_block">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
How can I move the arrow back a little bit to the left so that it falls in the same section of the menu and not at the beginning of the next section.

Setting stylesheet for one element

I have a style for a web user control, I placed it in the form element in my masterpage. but the stylesheet of the webuser control affect all other elements that come in the content place holder.
Here is a picture of what happened:
* { box-sizing: border-box; padding:0;}
body {
background: #333 url(../images/bg.jpg) repeat top left;
font-family: Arial;
color:white;
font-size:12px;
}
form {
background:#111;
width:300px;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.inset {
padding:20px;
border-top:1px solid #19191a;
}
form h1 {
font-size:18px;
text-shadow:0 1px 0 black;
text-align:center;
padding:15px 0;
border-bottom:1px solid rgba(0,0,0,1);
position:relative;
}
input[type=text],
input[type=password] {
width:100%;
padding:8px 5px;
background:linear-gradient(#1f2124, #27292c);
border:1px solid #222;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius:0.3em;
margin-bottom:20px;
}
label[for=remember]{
color:white;
display:inline-block;
padding-bottom:0;
padding-top:5px;
}
input[type=checkbox] {
display:inline-block;
vertical-align:top;
}
input[type=submit] {
padding:5px 20px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius:0.3em;
background:#0184ff;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:13px;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:#27292c;
}

You can add class or Id through html code to the specific control you want to override and write separate css for that like:
<form class="form-class"></form>
.form-class{
background:#FFF;
width:500px;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
Then check your output it is still showing the same result then you have add important to the required property like:
.form-class{
background:#FFF !important;
width:500px !important;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
This will help you to override specific css on html controller.

Use InLine CSS or else give ID or class to the element and Write its CSS in the same page.

Applying css on asp.net FileUpload Control's Browse Button only

I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?

Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle

This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
It's done.

apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html