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
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 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>
I have a Web site which is working very fine. But when i am trying to use in the ipad it's giving me the scroll to the Right hand side. The site is not live so i am not able to give you the URL
I have used width: 953px for the container and i don't have used any width for the Body part.
Workaround
<meta name="viewport" content="width=953px"/>
<meta name = "viewport" content = "user-scalable=no, width=device-width">
HTML
<div class="maincontainer">
<div class="firstcontainer">
<div class="h1-fonts">
We understand your success
</div>
<div class="first-innertex">
<p>Our planning consultancy is built around our people. We recruit, develop and retain the best professionals. We build strong relationships with our clients to with</p>
</div>
<div class="clear"></div>
<input type="button" onclick="location = '/team'" class="buttonred button-fonts" value="Meet the team" />
</div>
<div class="secondcontainer">
<img src='/media/1004/success_people.png' width="555px" height="368px" alt='Banner Alt text' />
</div>
</div>
CSS
.firstcontainer {
width: 38%;
top: 147px;
margin-left: 25px;
float: left;
}
.secondcontainer {
float: right;
}
.maincontainer {
border: 1px solid #E2DEDE;
height: 368px;
margin-bottom: 20px;
width: 100%;
}
.button-red {
font-size: 16.18px;
font-family: "OpenSans";
color: rgb(255, 255, 255);
border-width: 1px;
border-color: rgb(229, 229, 229);
border-style: solid;
background-image: url('../images/arrow.png');
background-repeat: no-repeat;
height: 45px;
z-index: 97;
padding-right: 40px;
cursor: pointer;
margin-left: 0px;
background-color: rgb(182, 39, 29);
background-position: 90% 50%;
}
I have tried to put both of the thing but it's still not working.
Note: I don't want to change my css
If anyone can suggest me for this.
I have change meta tag and it's worked nicely.
<meta name="viewport" content="width=device-width; initial-scale=0.8; maximum-scale=1.5;" />
I have change initial-scale to 0.8 from 1.0. So It's reducing the zoom in the iPad and my site working very well without using any css
It is very tricky to answer without the code, but the width of an iPad is 768px in portrait view, using 953px for your container will make it wider than the device size and therefore you will get the scroll.
Try working with % on mobile devices
The width of an ipad is 768px.
So you need to use <meta name="viewport" content="width=768px"/>
And if you want a proper alignment you should give the img an %-width like this:
.secondcontainer {
float: right;
width: 55%;
}
.secondcontainer img {
width: 100%;
}
Had anyone got a problem with a:hover that has position: absolute and is above <img> under IE & Opera
a:hover has background, but <a> hasn't, both has display: block.
Thank you in advance for your help
...
To see the problem please check this webpage:
http://bckp.eu/test.html
or
use this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {
border: 1px solid black;
position: relative;
height: 200px;
width: 500px;
}
a.next {
right: 0;
}
a.prev {
left:0;
}
.withbackground {
background: yellow;
}
.nobackground {
background: transparent;
}
a.link {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border:0;
}
a.link:hover, a.link:focus {
background: url(/img/comment.gif) repeat !important;
}
</style>
</head>
<body>
<div id="t">
<a class="link nobackground" href="#"><a> without background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<p>Doesnt work under IE? Add background | This is not quirks mode #</p>
<hr />
<div>
<a class="link withbackground" href="#"><a> with background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<div> <a class="link nobackground" href="#"><a> without background, without img</a> </div>
<script type="text/javascript">
function a() {
document.body.innerHTML+='<style>#t a {background: pink;}</style>';return false;
}
function quirks() {
alert(document.compatMode); return false;
}
</script>
</body>
</html>
This is one seriously wacky bug. Now, if you really must organize your html the way you have, then IE needs to have the following placed inside the a tag to get it to register with the image.
<div style="position: absolute; filter: alpha(opacity=0); background: red; top: 0px; left: 0px"></div>
But this would be better (have not tested completely across browsers). Organize the html like (no need for a wrapper div):
<a><img /></a>
Make sure the a is not position: absolute (IE7 didn't work with it so), and then set the image to:
img {position: absolute; z-index: -1}
I hope these head you in a direction to solving your problem.
Scott, thank you for your answer. This is just example of the problem.
Of course my real code is bigger than that:
- 2 tags to navigate prev/next (so I cant put <a><img></a>)
- both 's has but with display: none (<a><span>prev</span></a>). display: block doesnt help
z-index doesnt help. position: absolute works, when <a> has background.
I cant have filter: alpha(opacity=0) or opacity=0 because not every browser supports that.
I found odd solution that solves the problem, but dont want to use it: a {background: url(filedoesnotexists);} or i can use for example transparent 1x1 gif file but i would like to find reason of my problem.
Solution with img{position: absolute; z-index: -1;} div{position: relative;} a{position: static;} works exactly the same - no hovering without background above img for ie & opera
I also met another odd thing with that in my main code - will try to reproduce it. (EDIT below)
This is another strange problem - IE works, but only when it has another "layer" and mouse is hovering above this layer. Opera works fine in every case:
http://bckp.eu/test2.html - click Exif info and move mouse over image/new "layer"