my page doesnt have a scrollbar - c#

i don't know whats wrong but my page doesnt have a scrollbar, when the page exceeds, i cant scroll below it. what seems to be the probblem with my code?
i am new to ASP.NET so yeah, i do not know much yet. thanks in advance!
here is my full aspx page.
<form id="form1" runat="server">
<div style="width:100%;height:100%;overflow:scroll;overflow-y:auto;">
<div class="body">
<div class="pull-right">
<br />
<div class ="dropdown" runat="server">
<asp:Label ID="hideID" runat="server" Text="#" Visible="false"></asp:Label>
<asp:Label ID="lblLogged" runat="server" CssClass="dropbtn" Text="Name" />
<div class="dropdown-content">
<asp:LinkButton ID="btnMain" runat="server" OnClick="btnMain_Click">Main Menu</asp:LinkButton>
<asp:LinkButton ID="btnLogO" runat="server" OnClick="btnLogO_Click">Log Out</asp:LinkButton>
<%--<a id="btnLogOut" runat="server" href="LogIn.aspx">Log Out</a>--%>
</div>
</div>
<%-- Current User: --%>
 
and here is my CSS, i dont know if its correct
<style type="text/css">
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.body{
position:absolute;
left:24%;
width:800px;
height:400px;
z-index:0;
}
.home{
position:absolute;
top: 200px;
left: 38%;
z-index: 2;
}
.yusenlogo{
position:center;
left:40%;
}
.exist{
position:absolute;
height:10%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.added{
position:absolute;
height:8%;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: forestgreen;
border-top:5px;
}
.well2 {
position:absolute;
width:40%;
top: 310px;
left: 30%;
z-index: 2;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
/*background-color: #f5f5f5;*/
/*border: 1px solid #e3e3e3;*/
border-radius: 4px;
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);*/
}
.well3 {
position:absolute;
width:70%;
top: 80px;
left: 13%;
z-index: 2;
}
.buttons{
cursor:default;
}
.banner{
position:absolute;
top: 50%;
left: 50%;
z-index:2;
}
.character{
position:absolute;
height:60px;
width:40%;
top: 250px;
left: 30%;
z-index: 2;
background-color: darkred;
border-top:5px;
}
.lowerleft {
position: fixed;
bottom:8px;
left:16px;
width:100%;
}
.lowerleftuser {
position: fixed;
bottom:8px;
left:16px;
width:100%;
z-index:1000;
}
.forGridView {
position:fixed;
top:30%;
left:30%;
z-index:1000;
}
.container {
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
.dropbtn {
background-color: cornflowerblue;
color: white;
padding: 12px;
font-size: 13px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: cornflowerblue;
}
#txtFrom
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
/*padding: 3.5px 10px;*/
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#txtTo
{
background-image: url(Images/Calendar2.png);
background-position: right;
background-repeat: no-repeat;
padding: 6px 12px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
</style>


In your CSS:
.*{
width:auto;
height:auto;
overflow-y: hidden;
overflow:auto;
}
remove "overflow-y: hidden;"
overflow-y is the vertical scrollbar, this CSS is suppressing it, see http://www.w3schools.com/cssref/css3_pr_overflow-y.asp for more information.

Related

How Can I Convert My Html Radio Button To ASP .NET

I Created a radio button in HTML:
.wrapper {
display: inline-flex;
background: #fff;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
#import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: inline-flex;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
<div class="wrapper">
<input type="radio" name="select" id="option-1" checked>
<input type="radio" name="select" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>MP3</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>MP4</span>
</label>
</div>
I want To convert this into asp radio button and validate user input. Like if user selected mp4 then do this else do that.
I Tried To Do The same But Failed. Please HElp Me With This
Please help me. I am new in this Field
Adding Loream Ipsum For The Platform To Allow ME To Post This Question Because of less Words.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Drop-down menu between ul and li tags doesn't appear

Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* 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;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* 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;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}

in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}

Styling asp:DropDownList with CSS

I have created a small CSS, which I wanted to use to make my own styled DropDownList. I don't know if there is some sort of incompatibility and I'm still learning CSS and ASP.net, but when I tried my code in an online CSS tester, it worked perfectly.
.select {
padding: 3px;
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #212121, 0 -1px #191919 inset;
background: #333;
color: #fff;
border: none;
outline: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
padding-right: 18px;
}
}
label {
position: relative;
}
label:after {
content: '<>';
font: 11px "Consolas", monospace;
color: #fff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 8px;
top: 2px;
padding: 0 0 2px;
border-bottom: 1px solid #ddd;
position: absolute;
pointer-events: none;
}
label:before {
content: '';
right: 6px;
top: 0px;
width: 20px;
height: 20px;
background: #333;
position: absolute;
pointer-events: none;
display: block;
}
This is my DropDownList:
<asp:DropDownList CssClass="select" id="DropPoke1" Width="80" runat="server" AutoPostBack="true" ViewStateMode="Enabled" EnableViewState="true" OnSelectedIndexChanged="DropPoke1_SelectedIndexChanged" />
Unfortunately, this does not work. Have I done something wrong or is it just not possible?
Edit: After adding the following line to my aspx, it worked:
<link href="CustomDropDown.css" rel="stylesheet" type="text/css" />

This is working fine. Please make sure you have properly included style sheet.

IF you are not calling your element by own created classes, you may need to inspect with chrome (or similar) your html.
calling the css by generic tags as "label" often won't work as a asp:Label use to be translated into an html span, not a html label

styling the asp:fileupload control

I have a file upload control in asp.net like so:
<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />
For some reason the Browse... button does not apply the standard CSS that I have applied to any input[type="button"] controls.
How can I apply the same CSS to the Browse button of that control?

try this
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Browse</div>
some css
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
JS
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
Demo

Since the OP was about ASP.NET and the accepted answer was HTML / javascript, I thought I'd answer it in ASP.NET terms:
ASP.NET portion:
<asp:FileUpload ID="fileUpload" runat="server" style="display:none" />
<input type="button" value="Select your file" id="browse"></input>
JQuery, with jQuery UI for .button() portion:
$("input:button").button();
...
$("#browse").click(function () {
$("#<%= fileUpload.ClientID %>").click();
});

in aspx form:
<div class="fileupload-group">
<button type="button" runat="server" id="btnFileupload" class="btnFileupload btnRed">
Select File <i class="fa fa-folder-open"></i>
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />
</button>
<input type="text" runat="server" id="txtFileuploadName" class="fileupload-name txtRight" readonly="readonly" />
</div>
and in javascript
$('input[id="<%= FileUpload1.ClientID %>"]').change(function () {
var names = [];
var length = $(this).get(0).files.length;
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
if (length > 2) {
$("#<%=txtFileuploadName.ClientID%>").attr("value", length + " selected files");
}
else {
$("#<%=txtFileuploadName.ClientID%>").attr("value", names);
}
});
and in css:
/* txtRight ----------------------------*/
.txtRight {
display: inline-block;
margin-bottom: 3px;
border: 1px solid #CCC;
background-color: #FFF;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
position: relative;
font-weight: normal;
padding: 2px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px #000000;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px #000000;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-ms-box-shadow: inset 0 1px 1px #000000;
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px #000000;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.txtRight:focus {
border-color: #52a8ec;
border-color: rgba(82,168,236,0.8);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-moz-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-ms-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
.txtRight {
font-family: iransans !important;
font-weight: normal !important;
direction: rtl;
text-align: right;
margin-right: 0;
top: 0;
right: 0;
}
.txtRight:disabled {
background-color: #f7f7f7 !important;
}
select.txtRight {
padding: 1px 2px !important;
font-size: 13px !important;
}
/* --------------------------------------*/
/* btnRed ------------------------------ */
.btnRed, a.btnRed {
-ms-text-shadow: none;
text-shadow: none;
background: #ed1c24;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.btnRed:hover, .btnRed:focus, .btnRed, .btnRed:visited, .btnRed:disabled,
a.btnRed:hover, a.btnRed:focus, a.btnRed, a.btnRed:visited, a.btnRed:disabled, a.btnMoulinexRed:link {
border: none;
color: white;
text-decoration: none;
padding: 5px;
font-family: iransans;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.btnRed:hover, .btnRed:hover:enabled, .btnRed:focus, .btnRed:focus:enabled,
a.btnRed:hover, a.btnRed:hover:enabled, .btnRed:focus, a.btnRed:focus:enabled {
background: #830022;
background-color: #830022 !important;
color: white !important;
}
.btnRed:visited, .btnRed:link, /*a.btnRed, */
a.btnRed:visited, a.btnRed:link {
background: #ed1c24;
background-color: #ed1c24;
color: white;
}
.btnRed:active, .btnRed:active:enabled,
a.btnRed:active, a.btnRed:active:enabled
{
background: #e6e6e6 !important;
background-color: #e6e6e6 !important;
color: #333 !important;
}
.btnRed:disabled,
a.btnRed:disabled, a.aspNetDisabled {
color: #333 !important;
background-color: #D6D1D1 !important;
}
/* --------------------------------------*/
/* FileUpload ---------------------------*/
.fileupload-group {
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
margin-top: 3px;
margin-bottom: 8px;
}
.fileupload-group .fileupload-name {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btnFileupload {
display: inline-block;
position: relative;
white-space: nowrap;
width: 17%;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fileupload-group .btnUpload {
width: 15%;
vertical-align: middle;
}
.fileupload-name {
padding: 0;
width: 100%;
white-space: nowrap;
height: 29px;
padding: 4px 12px;
font-size: 14px;
}
.fileupload-name.txtRight {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 0 ;
border-top-right-radius: 0;
-ms-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
display: inline-block;
margin-right: -6px;
}
.fileupload-name.txtRight {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ffaaaa;
}
.fileupload-name.txtRight:disabled {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ccc;
}
.fileupload-group input[type=file] {
display:inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-ms-opacity: 0;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --------------------------------------*/
Make sure to use the latest browser version to run

asp:menu with image has padding above

I have a menu bar in the site master in a table. For some reason I cant figure out there is always padding above it.
This is the css:
div.menu
{
padding: 0px 0px 0px 0px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
div.menu ul li
{
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}
div.menu a ul li a:visited
{
background-color: #25394B;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
text-align:left
}
and this is in the site master
<table style="background-color: #2E4459">
<tr>
<td>
<asp:Menu ID="SettingsMenu" runat="server" EnableViewState="True" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="menu">
<DynamicSelectedStyle ForeColor="#ef7c31" />
<Items>
<asp:MenuItem ImageUrl="Images/settings.png">
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Area.aspx" Text="Area" />
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Post.aspx" Text="Post" />
I don't know how to fix it there is around 30 px.
Its also happening with out the image, if I just put text.
This is the setting.png

div.menu
{
padding: 0px !important;
}
try that

I think this is what you need. Try this. Add this to your CSS
html,body
{
padding:0px;
margin:0px;
}

what I figured-out was there is a padding padding: 4px 20px; value for div.menu ul li a changing that will help you. change it to div.menu ul li ul li a
div.menu ul li ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}

Categories

Resources