I'm trying to make a warning banner for a web page. I'm using a label inside a div inside a panel with some css styles declared on the page. I don't want to declare those styles on every page, so I moved them to my Site.css file, (which is used by the master page). The problem that when I do that, the css styles aren't applied. Everything on the master page is formatted correctly, but the controls declared in the content page are not.
Hear's what I've go on the content page:
<asp:Content ID="Content2" ContentPlaceHolderID="ErrorMessages" runat="server">
<asp:Panel ID="WarningBanner" runat="server" CssClass="warningPanel" Visible="true">
<div class="warningDiv">
<asp:Label ID="testLabel" runat="server" Text="test" CssClass="warningLabel"></asp:Label>
</div>
</asp:Panel>
<style>
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</asp:Content>
and hear's what I've got on the master page:
<head runat="server">
...ext...
<link href="~/Content/Site.css" rel="stylesheet" />
...ext...
</head>
<body>
...ext...
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
...ext...
<body/>
and this is what my Site.css file looks like:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
.warningPanel {
margin: auto;
width: 1000px;
background-color: red;
border: 10px solid red;
}
.warningLabel {
display: block;
color: white;
font-size: large;
}
.warningDiv {
margin-left: auto;
margin-right: auto;
text-align: center;
}
...ext...
What am I doing wrong?
CSS files are often cached by browsers. When that happens, changes made to the styles will not show up in the HTML display.
You can clear your browser cache after changing the CSS contents to see the modified styles. Another way to do it, which also ensures that your clients will see the updated CSS without having to clear their browser cache, is to append a query string to the link:
<link href="~/Content/Site.css?version=2.5" rel="stylesheet" type="text/css" />
Every time the CSS file is modified, you set a new version number to force the updated CSS file to be downloaded.
There's nothing wrong with your code. You probably haven't specified the correct file path to your CSS file. Double check that. Also, you've got a typo:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
<div/>
It should be:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="ErrorMessages" />
</div>
Related
I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.
Code - a part of _Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RazorTest</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav>
<div>
<img src="" alt="">
</div>
</nav>
</header>
<div class="container">
<form action="">
<input type="text">
</form>
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
_Layout.chstml.css:
body {
background-color: #444;
}
header {
border: 10px solid red;
}
form {
border: 10px solid cyan;
}
input {
border: 10px solid greenyellow;
}
nav {
border: 10px solid blue;
}
div {
border: 10px solid black;
}
main {
border: 10px solid green;
}
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
Let me show that on SS's:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Why styles for some tags are not working when added in scoped CSS file?
If you use .AddRazorRuntimeCompilation() for hot reload, try build without it.
Beside the tag-helper issue mentioned above, it is a build step.
Just one thing to note, CSS isolation is a build step, so it doesn't work with Razor Runtime Compliation
Beside tag-helper issue mentioned above, scoped css is build time
Faced the same issue and found this article.
I encountered similar behavior a few times when testing CSS isolation in ASP.NET 6 with Razor pages.
I noticed that not all HTML element receive a scope identifier and therefore are not affected by the scoped CSS file.
Here's a part of my final [PROJECT_NAME].styles.css file (included as link element in the page layout):
form[b-l6oslukat8] {
background-color: orange;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
And here is related part of the final HTML file where the identifier (b-l6oslukat8) should be but isn't:
<section b-l6oslukat8="" class="full page">
<form data-form-type="login">
<input b-l6oslukat8 type="text" id="Username" name="Username">
<input b-l6oslukat8 type="password" id="Password" name="Password">
</form>
</section>
Looks like this is a case with your final HTML/CSS as well. It seems to me it's a bug in the implementation of CSS isolation in .NET 6.
Why styles for some tags are not working when added in scoped CSS file?
Maybe iy is not enough tou take precedence.
You can try to use either specificity or the natural cascade to override the styling,so that it may be enough to take precedence.For example,you can change:
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
to
body > div > img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
And if you want to change the style which cannot use either specificity or the natural cascade,you can try to add the style into the view,for example:
<style>
body {
background-color: #444;
}
</style>
MY PROBLEM is why it is showing different output[Hyperlink Named HOME]
in browser( going above the div part )
when compared to design page in visual studio!!!
please Help me, i Don't know much about HTML, LEARNING.....
***<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="project.login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.back {
background-color:chocolate;
width:inherit;
height:65px
}
.images{width:426px;
height:65px;
}
.hyperlinks {position:relative;
float:right;
margin-top:-20px;
margin-left:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="back">
<asp:Image ID="Image1" runat="server" CssClass="images" ImageUrl="~/images/images.jpg" />
<asp:HyperLink ID="HyperLink1" runat="server" CssClass="hyperlinks">Home</asp:HyperLink >
</div>
</form>
</body>
</html>***
The problem occurs only in Internet Explorer, and then only in compatibility mode. So apparently, the designer in Visual Studio emulates IE's compatibility mode.
If you boil the issue down to the minimum required to show it, you get this
.back {
background-color: chocolate;
height: 65px;
}
.images {
height: 100%;
}
.hyperlinks {
float: right;
margin-left: 10px;
}
<div class="back">
<img id="Image1" class="images" src="http://lorempixel.com/195/65" />
<a id="HyperLink1" class="hyperlinks">Home</a>
</div>
This puts the floating link in the top right corner of its parent in all standards compliant browsers. But switching IE to compatibility mode will put the link below the orange bar.
(If you then give the link a negative top margin, it moves up a bit, but that doesn't change the issue.)
Now a makeshift solution is to use CSS that is handled the same by all browsers, compatibility mode or not. Something like this, for instance.
.back {
background-color: chocolate;
height: 65px;
text-align: right;
}
.images {
height: 100%;
float: left;
}
.hyperlinks {
line-height: 110px;
margin-left: 10px;
}
<div class="back">
<img id="Image1" class="images" src="http://lorempixel.com/195/65" />
<a id="HyperLink1" class="hyperlinks">Home</a>
</div>
A more permanent solution would be to make sure that Visual Studio's designer would show things in standards compliance mode rather than compatibility mode. However, I haven't found a way yet to do that.
I'm trying to design a webpage using Asp.net and CSS in Visual Studio 2010. the problem is simple but i have no idea how to fix it. Im creating a header in my page, this header is a div, its linked to my stylesheet for coloring. I put an image in the div, and i added a label. Now after some time to put the image in the middle of the div and text under it, when i run the website, the Label leaves the div completely and sits outside. How do i fix this? and for future reference, what technique or method do i follow so that the webpage before running always looks the same after running? I've decided to create a stylesheet for every page and put all my styles in there.
Sorry, here it is.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="LoginStyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="MECIT_Logo.png" />
<asp:Label CssClass="Title" ID="WelcomeLabel" runat="server" Text="SSS">
</asp:label>
</div>
</form>
</body>
</html>
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
}
.Logo
{
position:absolute;
left:40%;
}
.Title
{
position:absolute;
left:38%;
bottom:83%;
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
I don't understand why you are absolutely positioning the elements inside the container, all this can be handled with margins and alignment. Here is my suggestion:
Click here to view the fiddle
CSS:
body
{
background-color:Gray;
}
.HeaderDiv
{
background-color: #0099FF;
height: 121px;
text-align:center;
}
.Logo
{
margin:5 auto;
}
.Title
{
font-size:xx-large;
font-family:Cambria;
font-weight:bold;
color:Navy;
width: 336px;
}
HTML:
<div class="HeaderDiv">
<img alt="" class="Logo" longdesc="http://localhost:17260/MECIT_Logo.png"
src="http://www.mecit.edu.om/images/MECIT_Logo.png" /><br />
//Used a <span> for the Label, as I believe that is what it renders as
<span class="Title" id="WelcomeLabel">Some Title</span>
</div>
I have a master page with a background and 3-column layout. The start page "default.aspx" is a content Web Form and is linked to the master page. At the design time, everything looks great but when run, the master page background is invisible. It disappears.
How to fix this?
** Edited **
Master Page Form Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Live</title>
<link rel="Stylesheet" type="text/css" href="../Stylesheets/MasterStyleSheet.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="masterform" runat="server">
<div id="divBanner" class="BannerDiv"></div>
<div id="divMain" class="MainDiv">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<div id="divMasterContent" class="MainContentDiv">
<div id="divMainSideBar1" class="MainSideBar1Div" style="margin-left: 610px;"></div>
<div id="divMainSideBar2" class="MainSideBar2Div" style="margin-left: 811px;"></div>
</div>
</asp:ContentPlaceHolder>
</div>
<div id="divFooterMenu" class="FooterMenuDiv"></div>
</form>
</body>
</html>
StyleSheet Code
body
{
padding-left: 100px;
background-image: url("../../App_LocalResources/wood.jpg");
width: 1000px;
}
.BannerDiv
{
border: thin solid Brown;
padding-left: 50px; padding-right: 50px;
background-color: White;
height: 150px; width: 895px;
}
.MainDiv
{
padding-top: 10px;
height: 600px; width: 1000px;
}
.MainContentDiv
{
background-color: White;
border: thin solid Brown;
height: 600px; width: 600px;
}
.MainSideBar1Div
{
padding-left: 10px;
position: relative;
background-color: White;
border: thin solid Brown;
height: 600px; width: 170px;
top: -2px;
}
.MainSideBar2Div
{
padding-left: 10px;
position: relative;
background-color: White;
border: thin solid Brown;
height: 600px; width: 170px;
top: -605px;
}
.FooterMenuDiv
{
border: thin solid White;
height: 30px; width: 997px;
background-color: Gray;
padding-top: 10px;
}
At present I am running it on my local machine.
Are you sure that the App_Localresources are added to the output directory when you publish the site? Right-click the wood.jpg in solution explorer and check that "Build option" is set to "Content".
http://msdn.microsoft.com/en-us/library/0c6xyb66(VS.80).aspx
Btw...If your masterpage and content pages resides in different folders, I would recommend using site-root relative path instead of relative paths:
http://msdn.microsoft.com/en-us/library/ms178116.aspx
Once the page loads, click View Source to view the exact path of the background image it renders.
Another option: To check whether the path mentioned in the css is correct and reachable, replace it by an inline background setting of the head tag in the master page. If it works, the path is incorrect.
the App_LocalResources is a protected folder and asp.net not let the image readed from.
Place your background image, and other images in an other folder, eg on /images/
To verify that just try to see the folder...->
www.yoursite.com/App_LocalResources/
I am sure you have placed MasterPage & Default.aspx at different folder location. Try to place them at same level and see the difference.
As stylesheets path are considered according to webpage at runtime and according to Masterpage at design time.
The Ohter solution you can use is
Replace this line with
<link rel="Stylesheet" type="text/css" href="../Stylesheets/MasterStyleSheet.css" />
this new one
<link rel="Stylesheet" type="text/css" href="Stylesheets/MasterStyleSheet.css" />
I hope this will resolve your issue.
i think you need to make sure that, server can read your your BG path properly, as you can view it on your local PC, but when running on server the path may not be relative, or even the image isn't uploaded to the directory
I am upgrading part of a very old website. One of the pages that I own uses controls and dlls that I do not. There is one dll that puts a textbox (input field) on the page. This field is concepually a label but the person chose to use a textbox. Anyways, I can't change the dll.
Is there a way in my asp.net page that uses the dll to say all the textboxes on this page should have a transparent background?
This is the code I have access to. Any changes I make have to be made here.
<asp:Content ID="Content1" ContentPlaceHolderID="bodyContent" Runat="Server">
<style type="text/css">
.heading { color:#007DC3; font-weight:300; font-size:1.5em; line-height:1.22em; margin-bottom:22px; }
</style>
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</asp:Content>
Thanks!
like this?
<div style = "input[type='text']{
border: none;
background-color: transparent;
}
">
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</div>
It doesnt seem to work...
Tried this too:
<style input [type='text']{ border: none; background-color: transparent;} >
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</style>
I can see your problem.
Change your code to
<style type='text/css'>div.tbwrap input[type='text']{ border: none; background-color: transparent;}</style>
<div class='tbwrap'><cc1:wizard id="wizCtl" runat="server"></cc1:wizard></div>
Your style tag was a bit off and I do not thing the 'cc1:wizard' tag should have been within the style tag either.
Try this
input[type='text']{
border: none;
background-color: transparent;
}
Is this what you're after:
<style>
input {border:0;}
</style>
input[type='text']
{
border: none;
background-color: transparent;
}
Try this:
In the head part of the doc:
<style type="text/css">
div#someDiv input[type='text']{
background-color: transparent;
}
</style>
Then wrap your textbox with div and give it an ID
<div id="someDiv">
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard>
</div>
<asp:Content ID="Content1" ContentPlaceHolderID="bodyContent" Runat="Server">
<style type="text/css">
.heading { color:#007DC3; font-weight:300; font-size:1.5em; line-height:1.22em; margin-bottom:22px; }
input[type='text']{
border: none;
background-color: transparent;
}
</style>
<cc1:wizard id="wizCtl" runat="server"></cc1:wizard> <!-- if this does transform into a text input, check the page source just to be certain -->
</asp:Content>