Why is my input button not doing my actions (ASP.NET)? - c#
I have a <asp:Button> button in a <form> and it is "connected" to the C# code. My C# code should redirect users to the homepage (Homepage.html). Something like this:
protected void Inlog_button_Click(object sender, EventArgs e)
{
Response.Redirect("~/Homepage.html");
}
But, instead redirecting to the Homepage, the action will reload the page with: Login.aspx?ctl00=Inloggen.
Why is the app "ignoring" my written C# action?
Here is the whole HTML code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="OSGS_KANTINE_WEB.login" %>
<!DOCTYPE html>
<html class=" j-feature-js j-feature-no-touch j-feature-opacity j-feature-csstransitions" lang="nl-NL"><head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="https://u.jimdo.com/">
<link rel="dns-prefetch" href="//assets.jimstatic.com/">
<link rel="dns-prefetch" href="https://image.jimcdn.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://u.jimdo.com/" crossorigin="anonymous">
<link rel="preconnect" href="//assets.jimstatic.com/" crossorigin="anonymous">
<link rel="preconnect" href="https://image.jimcdn.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta property="st:section" content="">
<meta name="twitter:card" content="app">
<meta name="twitter:app:id:iphone" content="588950703">
<meta name="twitter:app:id:ipad" content="588950703">
<meta name="twitter:app:id:googleplay" content="com.jimdo">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="logo_lyceum.ico" />
<link rel="canonical" href="http://osgs-kantine-site-design.jimdo.com/login-1/">
<style>
html,body{margin:0}.hidden{display:none}.n{padding:5px}#cc-website-title a {text-decoration: none}.cc-m-image-align-1{text-align:left}.cc-m-image-align-2{text-align:right}.cc-m-image-align-3{text-align:center}
.subbutton {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.subbutton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.subbutton span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.subbutton:hover span {
padding-right: 25px;
}
.subbutton:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #f4511e;
}
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=password]:focus {
border: 3px solid #f4511e;
}
</style>
<link href="https://u.jimdo.com/www400/o/s2080dbef3339dc21/layout/dm_0daae465c1d01048b40b213ad7efcc70/css/layout.css?t=1456656473" rel="stylesheet" type="text/css" id="jimdo_layout_css">
<script src="//www.googletagmanager.com/gtm.js?id=GTM-WDBL3P&l=_jimdoDataLayer" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script src="//www.googletagmanager.com/gtm.js?id=GTM-WDBL3P&l=_jimdoDataLayer" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script> /* <![CDATA[ */ /*! loadCss [c]2014 #scottjehl, Filament Group, Inc. Licensed MIT */ window.loadCSS = window.loadCss = function(e,n,t){var r,l=window.document,a=l.createElement("link");if(n)r=n;else{var i=(l.body||l.getElementsByTagName("head")[0]).childNodes;r=i[i.length-1]}var o=l.styleSheets;a.rel="stylesheet",a.href=e,a.media="only x",r.parentNode.insertBefore(a,n?r:r.nextSibling);var d=function(e){for(var n=a.href,t=o.length;t--;)if(o[t].href===n)return e.call(a);setTimeout(function(){d(e)})};return a.onloadcssdefined=d,d(function(){a.media=t||"all"}),a}; window.onloadCSS = function(n,o){n.onload=function(){n.onload=null,o&&o.call(n)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in n&&n.onloadcssdefined(o)} /* ]]> */ </script> <script>
// <![CDATA[
onloadCSS(loadCss('//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css') , function() {
this.id = 'jimdo_web_css';
});
// ]]>
</script><link media="all" href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet"><link id="jimdo_web_css" media="all" href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet">
<link href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="preload" as="style">
<noscript>
<link href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet"/>
</noscript>
<script>
//<![CDATA[
var jimdoData = {"isTestserver":false,"isLcJimdoCom":false,"isJimdoHelpCenter":false,"isProtectedPage":false,"cstok":"b7572c81c13157a7c0f12ff29ba267b86ecc2b30","cacheJsKey":"5142cd437b8c2d4dc78374d706a685d16d36a82e","cacheCssKey":"5142cd437b8c2d4dc78374d706a685d16d36a82e","cdnUrl":"\/\/assets.jimstatic.com\/","minUrl":"\/\/assets.jimstatic.com\/app\/cdn\/min\/file\/","authUrl":"https:\/\/a.jimdo.com\/","webPath":"http:\/\/osgs-kantine-site-design.jimdo.com\/","appUrl":"http:\/\/a.jimdo.com\/","webserver":"http:\/\/web403.jimdo.com\/","cmsLanguage":"nl_NL","isFreePackage":true,"mobile":false,"isDevkitTemplateUsed":true,"isTemplateResponsive":false,"websiteId":"s2080dbef3339dc21","pageId":2147754849,"packageId":1,"shop":{"deliveryTimeTexts":{"1":"Levertijd: 1-3 dagen","2":"Levertijd: 3-5 dagen","3":"Levertijd: 5-8 dagen"},"checkoutButtonText":"Naar de kassa","isReady":false,"currencyFormat":{"pattern":"\u00a4 #,##0.00;\u00a4 #,##0.00-","convertedPattern":"$ #,##0.00","symbols":{"GROUPING_SEPARATOR":".","DECIMAL_SEPARATOR":",","CURRENCY_SYMBOL":"\u20ac"}},"currencyLocale":"nl_NL"},"tr":{"gmap":{"searchNotFound":"Het ingevoerde adres kon niet worden gevonden of bestaat niet.","routeNotFound":"De route kon niet berekend worden. Mogelijke oorzaken: het vertrekadres is niet precies genoeg aangegeven of te ver van het aankomstadres verwijderd."},"shop":{"checkoutSubmit":{"next":"Volgende stap","wait":"Een moment geduld"},"paypalError":"Helaas is er iets verkeerd gegaan. Probeer het nog een keer!","cartBar":"Naar de winkelwagen","maintenance":"Deze webwinkel is tijdelijk helaas niet bereikbaar. Probeer het later nog eens.","addToCartOverlay":{"productInsertedText":"Het product is aan de winkelwagen toegevoegd.","continueShoppingText":"Verder winkelen","reloadPageText":"Opnieuw laden"},"notReadyText":"Het opzetten van deze webwinkel is nog niet volledig afgerond.","numLeftText":"Er zijn op dit moment niet meer dan {:num} exemplaren van dit artikel beschikbaar.","oneLeftText":"Er is helaas nog maar \u00e9\u00e9n exemplaar van dit product beschikbaar."},"common":{"timeout":"Er is een fout opgetreden. De door jou gekozen actie werd onderbroken. Probeer het later nog een keer."},"form":{"badRequest":"Er is een fout opgetreden. De invoer kon helaas niet verzonden worden. Probeer het later nog een keer!"}},"jQuery":"jimdoGen002","isJimdoMobileApp":false,"bgConfig":{"id":82641349,"type":"color","color":"rgb(255, 255, 255)"},"responsiveBreakpointLandscape":767,"responsiveBreakpointPortrait":480,"copyableHeadlineLinks":false};
// ]]>
</script>
</head>
<body style="background-color: rgb(255, 255, 255);" class="body cc-page j-m-flash-styles j-m-gallery-styles j-m-video-styles j-m-hr-styles j-m-header-styles j-m-text-styles j-m-emotionheader-styles j-m-htmlCode-styles j-m-rss-styles j-m-form-styles j-m-table-styles j-m-textWithImage-styles j-m-downloadDocument-styles j-m-imageSubtitle-styles j-m-flickr-styles j-m-googlemaps-styles j-m-blogSelection-styles j-m-comment-styles j-m-jimdo-styles j-m-profile-styles j-m-guestbook-styles j-m-promotion-styles j-m-twitter-styles j-m-hgrid-styles j-m-shoppingcart-styles j-m-catalog-styles j-m-product-styles-disabled j-m-facebook-styles j-m-sharebuttons-styles j-m-externalSource-styles j-m-formnew-styles j-m-callToAction-styles j-m-turbo-styles j-m-spacing-styles j-m-googleplus-styles j-m-dummy-styles j-footer-styles cc-pagemode-default cc-content-parent jqbga-container jdbga-web--color" id="page-2147754849">
<div id="cc-inner" class="cc-content-parent">
<header><div class="navigation-colors">
<div class="tpl-topbar-wrapper">
<div class="tpl-title-wrapper">
<div id="cc-website-title" class="cc-single-module-element"><div id="cc-m-10956465649" class="j-module n j-header"><h1 class="cc-within-single-module-element j-website-title-content" id="cc-m-header-10956465649">OSG Schoonoord Kantine Website</h1></div></div>
</div>
<nav class="tpl-navigation"><div data-container="navigation"><div class="j-nav-variant-nested"><ul class="cc-nav-level-0 j-nav-level-0"><li id="cc-nav-view-2147752549" class="jmd-nav__list-item-0">--- Home ---</li><li id="cc-nav-view-2147754849" class="jmd-nav__list-item-0 cc-nav-current j-nav-current jmd-nav__item--current">Login</li><li id="cc-nav-view-2147754949" class="jmd-nav__list-item-0">Voorwaarden</li><li id="cc-nav-view-2147755049" class="jmd-nav__list-item-0">Contact</li></ul></div></div>
</nav><div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="logo-wrapper">
<div id="cc-website-logo" class="cc-single-module-element"><div id="cc-m-10956474449" class="j-module n j-imageSubtitle"><div class="cc-m-image-container"><figure class="cc-imagewrapper cc-m-image-align-1">
<img srcset="https://image.jimcdn.com/app/cms/image/transf/none/path/s2080dbef3339dc21/image/i2d821423f9ea4bff/version/1456656485/image.png 184w" sizes="(min-width: 184px) 184px, 100vw" id="cc-m-imagesubtitle-image-10956474449" src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2080dbef3339dc21/image/i2d821423f9ea4bff/version/1456656485/image.png" alt="" class="" data-src-width="184" data-src-height="144">
</figure>
</div>
<div class="cc-clear"></div>
</div></div>
</div>
<div class="clear"></div>
</header>
<div class="content-wrapper content-options-box cc-content-parent">
<section class="content-options-css content-options-inner cc-content-parent"><div class="breadcrumbs breadcrumb-options">
<div data-container="navigation"><div class="j-nav-variant-breadcrumb"><ol><li itemscope="true" itemtype="http://data-vocabulary.org/Breadcrumb" class="cc-nav-current j-nav-current"><span itemprop="title">Login</span></li></ol></div></div>
</div>
<div id="content_area" data-container="content">
</div>
<div id="content_start">
</div>
<div id="formDiv">
<div id="form_div" runat="server" class="j-module n j-htmlCode ">
<form>
Stamnummer:
<p></p>
<input class="stname"type="text" />
<p></p>
Wachtwoord:
<p />
<input class="pass" type="password" />
<p />
<asp:Button ID="Inlog_button" runat="server" Text="Button" click="Inlog_button_Click"/>
</form>
</div>
<div id="cc-m-10956595049" class="j-module n j-callToAction ">
<div class="j-calltoaction-wrapper j-calltoaction-align-1">
</div>
</div>
</div>
</section>
</div>
<aside class="sidebar-options-box"><section class="sidebar-options-css sidebar-options-inner"><div data-container="sidebar"><div id="cc-matrix-2937969949"></div></div>
</section></aside><footer class="footer-options"><div class="tpl-footer-wrapper">
<div id="contentfooter" data-container="footer">
<div class="copyright-footer"> <p class="pull-left"> <strong>Copyright 2016 - Hugo Woesthuis</strong></p> </div>
</div>
</div>
</footer><aside class="tpl-shoppingcart">
</aside>
</div>
<script> /*<![CDATA[*/ (function(){ if (!window.GoogleAnalyticsObject) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','_jc_tracker'); } else { window._jc_tracker = window[window.GoogleAnalyticsObject]; } _jc_tracker('create', 'UA-54647672-2', { name: 'JC_TRACKER', alwaysSendReferrer: true, cookieDomain: location.hostname, cookieName: '_jc_tracker', siteSpeedSampleRate: 50, anonymizeIp: true }); var cParams = { 'page': location.hostname }; if (location.hash.indexOf('jc=') > -1) { var source = "garbled"; var passedSource = location.hash.match(/jc=([^&$]+)/); if (passedSource && passedSource[1]) { source = decodeURIComponent(passedSource[1]); } cParams = { campaignName: 'jimdo internal campaign', campaignMedium: 'link', campaignSource: source }; } _jc_tracker('JC_TRACKER.send', 'pageview', cParams); if (window.addEventListener && window.performance && performance.timing) { window.addEventListener('load', function() { if (performance.timing.domContentLoadedEventStart > 0) { var timeToContentLoaded = performance.timing.domContentLoadedEventStart - performance.timing.domLoading; _jc_tracker('JC_TRACKER.send', 'timing', 'page speed', 'time to content loaded', timeToContentLoaded); } }); } }()); /* ]]> */ </script><!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WDBL3P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
//<![CDATA[
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','_jimdoDataLayer','GTM-WDBL3P');
// ]]>
</script>
<!-- End Google Tag Manager -->
<script id="" type="text/javascript">(function(){try{var a=Math.max(document.documentElement.clientWidth,window.innerWidth||0),b=Math.max(document.documentElement.clientHeight,window.innerHeight||0);_jc_tracker&&_jc_tracker("JC_TRACKER.set","metric1",a);_jc_tracker&&_jc_tracker("JC_TRACKER.set","metric2",b);_jc_tracker("JC_TRACKER.send","event")}catch(c){}})();</script>
</body>
</html>
Thanks in advance.
1) You must send the whole page in <form> attribute. There is no partial send in asp.Net.
2) Input element cannot reach codebehind this way. You can easily do what you want to do by using asp.Net button object instead.
1.from should be <form runat=server>
2.Your click event should be onclick.
Then it will work.
<form runat=server>
Stamnummer:
<p></p>
<input class="stname"type="text" />
<p></p>
Wachtwoord:
<p />
<input class="pass" type="password" />
<p />
<asp:Button ID="Inlog_button" runat="server" Text="Button"
onclick="Inlog_button_Click"/>
</form>
Related
Why default style of asp.net core is like this
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
I'm coding on asp.net core and I just realized that the top navbar of _layout.cshtml isn't on top of the , Then I opened a new project to find out why it's behaving like that. then I found out that when I add code in Body of _layout page it'll float on left side of screen and it hurt the actuall template , Could you guys help me to put the navbar on top of the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - PadshahOnlineShop</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/bootstrap/Bootstrap-rtl.css"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">PadshahOnlineShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - PadshahOnlineShop - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
enter image description here
In the css code you shared I find this:
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
display: flex may affect the top navbar of _layout.cshtml , you can try to remove it to see if it works fine.
How to use colored circles in ASP Dropdownlist ListItems? (without jQuery)
Goal: I would like to have a Dropdown list that shows the color green if someones if Availability is True, and red is someones Availability is False.
NOTE: I need to do it without jQuery (I was just told we are not allowed to use jquery in our project).
Problem/Background:
The only way I could get anything to show was with CSS and placing it on the Dropdown list itself, as seen in the first row of this image for Prof Smith. You'll see the next row with Prof. Jones is displaying the actual boolean value from the database in the dropdown, although I want a colored circle.
I'd like it to be within the dropdown box itself. It should also (eventually) be able to update the value in the DB if they make a change.
How can I get these circles to show inside the dropdown box?
What I want it the dropdown to look like:
What it actually looks like:
What I've done:
Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.
I have also tried SVG but that didn't insert into the ListItem at all
I've tried adding CSS through the C# code but couldn't get it to work that way
CSS:
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
}
.greendot {
background-color: #89C742;
}
.reddot {
background-color: #fe0505;
}
aspx/html:
<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
<asp:ListItem ID="LT1"></asp:ListItem>
<asp:ListItem ID="RT1"></asp:ListItem>
</asp:DropdownList>
<asp:DropdownList runat="server" id="ddl2">
<asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>
C#:
LT2.Text = professorStatsList[1].Available.ToString();
I don't think you can create rounded option element without creating a complete copy of the DDL with div elements like in this example. But the closest you can get is something like this.
Give the DDL a class, in this case RoundedDDL
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="RoundedDDL">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="" Value="True"></asp:ListItem>
<asp:ListItem Text="" Value="False"></asp:ListItem>
</asp:DropDownList>
Then with CSS make it round and remove the arrow with appearance: none;. You can style the select elements by value with option[value="True"]
<style>
.RoundedDDL {
appearance: none;
width: 30px;
height: 30px;
border-radius: 15px;
border: 1px solid black;
background-color: white;
cursor: pointer;
}
select option {
background-color: white;
}
select option[value="True"] {
background-color: green;
}
select option[value="False"] {
background-color: red;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
And then some javascript to add the correct class to the DDL when a specific value has been selected.
<script>
$('.RoundedDDL').bind('change', function () {
var $this = $(this);
$this.removeClass('green');
$this.removeClass('red');
if ($this.val() === 'True') {
$this.addClass('green');
} else if ($this.val() === 'False') {
$this.addClass('red');
}
});
</script>
I would just create some images and implement these CSS classes:
.available {
background-image:url('images/available.png');
}
.unavailable {
background-image:url('images/unavailable.png');
}
and would make sure that the items have the class you expect (set the CssClass attribute)
Also, you may want to implement a new Control class which extends ListItem, has a logical value for available and in the correct event (maybe PreRender, but I'm not sure) you set the CssClass to the correct value. That would separate your concerns.
I'm not sure if I misunderstood your question, but I understand that you want to put the circle inside each ListItem.
One way to do this is to use a customizable selectmenu using jQuery UI, but if you want to keep the circle in the selected item you will have to make a small change, for this I have used the answer to this question as a base: Keep picture with Selectmenu of jQuery UI
ASPX/JS/CSS Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#<%=dpwTest.ClientID%>")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="status-selected"> ').html(" ").appendTo(widget);
// Keep always the selected item class (for example, when the page load a specific item)
$span.attr("style", $(this).children(":selected").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons status");
});
</script>
<style>
.ui-selectmenu-menu .ui-menu.status .ui-menu-item-wrapper {
padding: 15px 10px 0 30px;
padding-bottom: 10px;
}
.ui-selectmenu-menu .ui-menu.status .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-selectmenu-text {
padding-left: 2em;
}
.status-selected {
position:absolute;
right:auto;
margin-top:-12px;
top:50%;
}
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
.ui-selectmenu-button.ui-button {
text-align: left;
white-space: nowrap;
width: 7em;
}
</style>
<form id="form1" runat="server">
<div>
<label for="dpwTest">Prof. Smith</label>
<asp:DropDownList ID="dpwTest" runat="server">
<asp:ListItem Text="Yes" Value="True" data-class="status" data-style="height: 25px; width: 25px; background-color: green;border-radius: 50%; display: inline-block;" />
<asp:ListItem Text="No" Value="False" data-class="status" data-style="height: 25px; width: 25px; background-color: red;border-radius: 50%; display: inline-block;" />
</asp:DropDownList>
</div>
</form>
</body>
</html>
Result:
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">person1    </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person3</a>
</div>
</li>
</ul>
</div>
</nav>
<Script>
var avaliability = [true, false, false];
var x = document.getElementsByClassName('dropdown-item');
for (var i = x.length; i--;) {
if (avaliability[i] === true) {
x[i].innerHTML = `person  <span class="badge badge-success"
style="border-radius: 100%;">  </span>`
} else {
x[i].innerHTML = `person  <span class="badge badge-danger"
style="border-radius: 100%;">  </span>`;
}
}
</Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check
https://jsfiddle.net/yubeog4c/
just get the values into availability array and it should converted to boolean types.
Thanks!!!!
DataTables pagination could be over the Bootstrap Fixed Footer of the ASP.NET Core MVC project template
I am working with ASP.NET Core 3.1 MVC and Bootstrap 4.4.1 and the default project template with DataTables.js (1.10.20 and css twitter bootstrap).
The first thing I must say is that I'm not good at all with css, so I think this could be the reason of this problem.
The following problem occurs when the screen has a lower resolution: (Tested resolution: 400x500)
I would like to know why this happened with the Fixed Footer and if there is a fix for this.
Thanks in advance for any assistance.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js"></script>
</body>
</html>
I used CSS flex to reduce the change to your markup.
The change I did were:
I added class content to your main content.
I changed the style for body to have these styles
body {
display: flex;
flex-direction: column;
height: 100vh;
}
Then I added these, and also updated the style for your .footer
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="content container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="footer border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
</body>
You can see it working here:
https://jsfiddle.net/8ba9cdxe/
you can change the position of the footer to static then it will be fixed.
Try remove posistion:absolute in footer class
.footer {
/*position: absolute;*/
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
.net core web not rendering CSS
I am building an application in .net core 2.0 Razor pages and cannot get the site.css file to render what I want it to. I am string to customize the _layout.cshtml file by changing the nav bar. When I run the project the CSS does not apply going so far as to when I inspect the page the css that is being rendered is not even the file that I have changed.
The CSS code is:
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
background-color: blue;
color: white;
float: left;
width: 20vw;
height: 100vh;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
div.table {
display: table;
}
div.table > div.thead {
display: table-header-group;
}
div.table > div.tbody {
display: table-row-group;
}
div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
display: table-row;
}
div.table > div.thead > div.table-row > div.table-heading {
display: table-cell;
font-weight: bold;
}
div.table > div.tbody > div.table-row > div.table-cell {
display: table-cell;
}
/* Hide/rearrange for smaller screens */
#media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none;
}
}
and the _layout.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - AdeptFrontEnd</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" runat="server"/>
<link rel="stylesheet" href="~/css/site.css" runat="server" type="text/css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
</head>
<body>
<nav class="nav flex-column navigation">
<ul class="nav flex-column">
<li><a asp-page="/Network/Index" class="navbar-brand">Adept</a></li>
<li><a asp-page="/Network/Index">Network</a></li>
<li><a asp-page="/Network/Index">Network</a></li>
</ul>
</nav>
<div class="container body-content">
#RenderBody()
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
When I run the solution I get page that looks like:
How do I get the CSS to render properly?
You put the site.css in the environment exclude. Comment that out and see if it works.
Extra blank page on print
I have an image to print on a web form. The image control loads the image dynamically at runtime. There is a print button on the page which gives me print to pdf option. The pdf which gets created generates an extra page along with the image to print
The size of the image is 649*602 in px.
the javascript code for print is as follows
function printDiv(divName) {
var title = document.title;
document.title = '';
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
document.title = title;
return false;
}
The aspx page contains the following
<body style="background: none; padding-top: 8%; padding-left: 2%;">
<form id="form1" runat="server">
<div style="float: left; padding: 1%; width: 55%;" id="divInstructions">
<asp:Image ID="imgInstructionSheet" runat="server" />
</div>
<div style="padding-left: 3%; float: left;">
<asp:ImageButton runat="server" ID="imgBtnPrint" SkinID="Print" OnClientClick="return printDiv('divInstructions')"
ToolTip="Print" />
<%-- <asp:ImageButton runat="server" ID="imgBtnPrint" SkinID="Print" OnClientClick="return window.print();"
ToolTip="Print" />--%>
</div>
<div class="wrapper" style="float: left; width: 36%; padding-top: 1%;">
Display Instructions
<div style="display: none; padding-top: 8%; margin-left: -8%; float: left; overflow: hidden;"
id="printinstruction">
<table style="background-color: lightgray; padding: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;">
<tr>
<td>
<img src="../Images/PageSetUp.jpg" />
</td>
</tr>
<tr>
<td>
<ul>
<b style="font-family:Verdana;font-size:14px;"><u>For Proper Printout Follow The Instructions:</u></b>
<br />
<li class="cssLi">Click on File Menu Goto Page Setup.</li>
<li class="cssLi">In Page Setup Dialog Box.</li>
<li class="cssLi">Set Paper Size To Letter (8.5x11").</li>
<li class="cssLi">Set Left Margin as 0.5 and Right Margin as 0.5.</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
Is there any way I can eliminate the extra blank page?
I tried reducing the image size but no effect.
the rendered html is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Instruction Sheet
</title>
<script type="text/javascript" src="../Javascript/jquery-1.7.2.min.js"></script>
<style type="text/css">
a:hover + div#printinstruction
{
visibility: visible;
}
.cssLi
{
position: relative;
left: 16px;
font-family: verdana;
font-size: 14px;
}
</style>
<script type="text/javascript">
function HideFromAnchor() {
setTimeout(function () {
$('#printinstruction').slideUp();
}, 1000);
}
$(document).ready(function () {
$('a.instrulink').mouseover(function () {
$('#printinstruction').slideDown();
$('#printinstruction').css('margin-top', '26px')
$('#printinstruction').css('width', '395px');
$('#printinstruction').css('height', '510px');
});
$('div.wrapper').mouseleave(function () {
$('#printinstruction').slideUp();
});
});
function DisplayInstruction() {
$('#printinstruction').slideDown();
$('#printinstruction').css('margin-top', '26px')
$('#printinstruction').css('width', '395px');
$('#printinstruction').css('height', '510px');
}
function RemoveInstruction() {
$('#printinstruction').slideUp();
}
function printDiv(divName) {
var title = document.title;
document.title = '';
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
document.title = title;
return false;
}
</script>
<link href="../App_Themes/default/1.9.1-jquery-ui.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/Default.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/form-field-tooltip.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/InquiryStyles.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/iqbackoffice.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/IQGLInputControl.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/jquery.ui.autocomplete.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/jquerydcss.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/default/popup.css" type="text/css" rel="stylesheet" /></head>
<body style="background: none; padding-top: 8%; padding-left: 2%;">
<form name="form1" method="post" action="InstructionsSheet.aspx?CompanyId=evh&CheckRequestType=CHECKREQUESTFAX" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MjQwOTYzMTgPZBYCAgMPZBYCAgEPDxYCHghJbWFnZVVybAUqQ2hlY2tSZXF1ZXN0SW1hZ2UvQ2hlY2tSZXF1ZXN0SW5zdF92ZWcuanBnZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFC2ltZ0J0blByaW50Ibf/odbg0lrXs/vlUgzr3pUnWxPgOvUSkGEiBBhsVNk=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAIycRPb8aWzu8amhADzp9D7vxA7O73wp6e8dR9A7rKNQ6U+XW+JbgNalutolAAvvabl2zSBHocsK8wmZxrQUUtL" />
</div>
<div style="float: left; padding: 1%; width: 55%;" id="divInstructions">
<img id="imgInstructionSheet" src="CheckRequestImage/CheckRequestInst_veg.jpg" style="border-width:0px;" />
</div>
<div style="padding-left: 3%; float: left;">
<input type="image" name="imgBtnPrint" id="imgBtnPrint" title="Print" class="Buttons" onmouseout="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_over.png';" onmouseover="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_on.png';" onfocus="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_on.png';" onblur="this.src=window.location.protocol + '//' + window.location.host + '/' + 'ClientWeb/Images/Print_over.png';" src="../Images/Print_over.png" alt="Print" onclick="return printDiv('divInstructions');" style="border-width:0px;" />
</div>
<div class="wrapper" style="float: left; width: 36%; padding-top: 1%;">
Display Instructions
<div style="display: none; padding-top: 8%; margin-left: -8%; float: left; overflow: hidden;"
id="printinstruction">
<table style="background-color: lightgray; padding: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;">
<tr>
<td>
<img src="../Images/PageSetUp.jpg" />
</td>
</tr>
<tr>
<td>
<ul>
<b style="font-family:Verdana;font-size:14px;"><u>For Proper Printout Follow The Instructions:</u></b>
<br />
<li class="cssLi">Click on File Menu Goto Page Setup.</li>
<li class="cssLi">In Page Setup Dialog Box.</li>
<li class="cssLi">Set Paper Size To Letter (8.5x11").</li>
<li class="cssLi">Set Left Margin as 0.5 and Right Margin as 0.5.</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>