I am doing a print functionality. The problem I am getting is that the page, which is being printed, is not retaining it's CSS formatting. I am getting plain text on print without CSS. Does anyone know how to print page with all it's CSS formatting unchanged.
Most likely the site you are trying to print has a custom stylesheet for printing. This stylesheet is often simplified and made to fit onto a printable page. I don't think there is much you can do about it unless you have the ability to modify or remove the print CSS file.
Intro to print style sheets.
Example markup for one.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Perhaps there is some way to use javascript to programmatically remove the style sheet, but I am not sure.
In simple terms for anyone who is still wondering, you can have a CSS stylesheet that has 'media="screen" ' in the link markup as follows:
<link id="Link1" href="../Styles/MainStyleSheet.css" rel="Stylesheet" type="text/css" runat="server" media="screen" />
this will style what is seen in the browser screen.
You can also have another CSS stylesheet that has 'media="print" ' in the link markup as follows:
<link rel="stylesheet" href="../Styles/print_voucher.css" type="text/css" media="print" />
this will style what is seen when a user views a Print Preview / when it is printed on the paper.
If you put something like:
.inprintdisabled
{
display: none;
}
in your print_voucher.css file. Everywhere in your HTML code where there is a
<div class="inprintdisabled">
it will show the contents of that div in the browser window but WILL NOT print out / show it in a print preview window.
Likewise, if you put
.inprintOnly
{
display:none;
}
in your MainStyleSheet and
<div class="inprintOnly">
in your HTML code, you can have objects (text, images, etc) that don't appear on your browser screen , but will appear when print previewed / printed out.
Hope this helps.
Related
I've got a popup which is in a user control and then registered inthe header of my aspx page. In the header I've indluded the javascript for the pop up to function and this works well. However, I've also got a css file included which doesn't seem to get applied. I've tried to include the css file in the user control like this:
<link rel="Stylesheet" media="screen" type="text/css" href="<%=ResolveUrl("../css/shared.css") %>" />
But it didn't work. Any suggestions how I can include the css file? Am I right in assuming I have to do this in the user control?
Remove .. and Add ~ in css path.
<link rel="Stylesheet" media="screen" type="text/css" href="<%=ResolveUrl("~/css/shared.css") %>" />
I have a doubt that in asp.net I am using CssClass class attribute for web server controls. And i am writing all the css code in style.css which will be in style folder of my project
<asp:TextBox ID="UserName" runat="server" CssClass="textEntry"></asp:TextBox>
The above is the example of the textbox.
Now the question is do i need to use link tag to say that my css file is located in style folder of my project?
Yes, you have to link the style sheet file (.css) by adding the link tag.
You can also simply drag the css file into the html section of the .aspx code right under head tag, that will work too - that will create the link for you.
Of course you need to link to your css file just like you do in regular html:
<link rel="stylesheet" type="text/css" href="style/mystyle.css">
While writing .aspx file just think as if you are writing an HTML file with the ability to pre-process the page through the ASP.NET view engine (which is where the additional asp tags come into play).
No, the tag is only used to apply a class within your CSS file. Just make sure you link your CSS file with your page as follows:
<head>
<link rel="stylesheet" type="text/css" href="path_to_your.css">
</head>
I'm writing a ASP.NET Web Application and I'm running into trouble getting the CSS styles to be applied. Currently I have a Master Page and one Content Page. My Master page is getting the CSS style applied to it, but the Content page is not. The funny thing is in design view the style is being applied to the Content page but once it is ran the browser doesn't apply it. I've tried internal and external style sheets. Inline does work but I'd like to avoid inline. Here is some sample code of what I have and tried
Master Page:
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Styles/MasterStyleSheet.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
<!-- <link href='<%= ResolveUrl("~/Styles/LoginStyleSheet.css") %>' rel="stylesheet" type="text/css" /> I tried this as well-->
</asp:Content>
I've added the simple css file just so people could see that the syntax is correct:
LoginStyleSheet.css
#usrLabel {
color:Blue;
background-color:Aqua;
}
#Label4 {
background-color:Black;
}
Any help would be greatly appreciated
Update #1
HTML output for header:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
<!-- <link href="<%= ResolveUrl("~/Styles/MasterStyleSheet.css") %>" rel="stylesheet" type="text/css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
<!-- <link href='/Styles/LoginStyleSheet.css' rel="stylesheet" type="text/css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="/Styles/LoginStyleSheet.css" /> -->
</head>
A lot of <link> elements are currently commented out but those are all different ways I've tried.
Update #2
First I appreciate the many responses. They have all been geared towards figuring out why my external css file won't work. However, if i try internal css style sheet it still doesn't work. Only inline css works. Perhaps if we could figure out what was wrong with why internal css styling wont work that would solve the same issue with external css style sheets
As you have already realised, the following won't translate into an absolute path, because it is not an asp.net object...
<link rel="stylesheet" type="text/css" href="~/Styles/LoginStyleSheet.css" />
Instead, try using this...
<link rel="stylesheet" type="text/css" href="<%=VirtualPathUtility.ToAbsolute("~/Styles/LoginStyleSheet.css")%>" />
UPDATE (after updated question)...
If the HTML sent the browser is as follows, then I believe LoginStyleSheet.css is either in a different location, or has some file permissions that are stopping it being served correctly...
(I have removed commented out lines, and added the line starting with **... the ** should NOT be included)
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/MasterStyleSheet.css" />
**<link rel="stylesheet" type="text/css" href="../Styles/LoginStyleSheet.css" />
</head>
ALSO #aRsen49 highlights a possibility in his answer... and that is that the CSS file is loading correctly, but the CSS is incorrect. Have you double checked that the CSS matches as it should (remembering that # denotes an id where as . denotes a class)?
FURTHER UPDATE
If #Trisped is correct in his assumption, I think I might have an idea what is going wrong...
If usrLabel and Label4 are asp objects (such as <asp:Label>), the fact you're using Masterpages means that the actual id of the controls in the HTML sent to the browser will not be usrLabel and Label4, but in fact they'll be something like ct100_Content1_usrLabel and ct100_Content1_Label4... so your CSS as you currently have it will not link up correctly.
So I would recommend you either update your CSS to use the id's sent to the browser, or (and this would be my preference) you should add CssClss="usrLabel" attributes to each of the objects, and then update your CSS to .usrLabel instead.
Ok so here was the fix. So in my html the id was label4. However, because it was in a content page with a contentplaceholder id of ContentPlaceHolder1 once the html was actually generated the label's id was being changed from label4 to ContentPlaceHolder1_Label4. Therefore i had to change my css code. BTW f12 on ie works wonders. Thanks again for all the help. Sorry it was something as simple as an id being wrong.
In your master page, define a HEAD element and then mention the link for CSS classes. Then it would work on all your content pages. I have found a good reference for you here
If you use Visual Studios "drag and drop" the CSS sheet in your code.
If it still wont work, double check your CSS.
For example:
Did you create CSS Classes (CssClass = ) for ASPX Elements?
Are Class names right?
etc.
UPDATE
I know this might sound odd.. But Close down VS and restart it. Then Display the Page again. Furthermore.. When you display the page press F5! I believe your cache or similar might be the problem.
Try:
Open the page in Chrome
Right click on an element which is applying the style (something in the master page) and select "Inspect element".
In the window that pops up copy everything in the "Styles" panel (this panel is usually on the right side, just under computed style).
Right click on an element which is not applying the style and select "Inspect element".
Compare what is in the Styles with what you copied earlier.
If that does not get you on the right track then we will need one or both of the following:
The rendered html of a page which is not working. This should be the complete file. The page should not reference external resources like CSS or JS files.
A master page and content page which exhibit the issue.
Please note that these should be basic pages which exhibit the issue (not a production page with multiple controls on it).
I our application we have image patches set in CSS file as shown below
.HeaderShodow {
background:url('../../App_Images/HeaderShodow.gif') repeat-x top left;
height:5px;
}
when we move this application to iss6 server the images or not rendered
we have sent css/image/script links with in the aspx file as below
<link href="<%= Url.Content("~/App_Themes/Common.css")%>" rel="stylesheet" type="text/css" />
but how to set when the image links are with in the css file
Thanks
The reason this doen't work is because there's the virtual directory name appended in IIS. To avoid this problem make sure you always include your CSS file using proper helpers and do not hardcode the location:
<!-- Notice the ~ in the href attribute which points to the root of the application -->
<link rel="stylesheet" href="<%= Url.Content("~/styles/somestyle.css") %>" type="text/css" />
then in the css file make sure that image paths are relative to the location of this CSS file.
My recommendation, as CSS image URL's are relative to the CSS file itself, is to have an images folder in the same directory as the CSS file itself.
so your directory would look like:
/Content/site.css
/Content/Images/blah.png
that means in your CSS file you can reference the images like:
.myClass
{
background-image: url('Images/blah.png');
}
and if in your HTML you reference the CSS with the Url.Content() code, you will always get the correct path.
<link href="<%: Url.Content("~/Content/site.css") %>" rel="stylesheet" type="text/css" />
I have two masterpages. A main.Master and a search.Master.
The search.Master is a nested masterpage, which is "inside" the main.Master.
To get my CSS files work with masterpages, I had to place the runat="server" atribute. Like this:
<link runat="server" href="~/mp/css/master.main.css" rel="stylesheet" type="text/css" />
And is working wonderfull in the masterpage.
However, this nested masterpage has her own styles, so I tried to do the runat="server" trick again. I made sure that my asp:content was inside the and typed:
<link runat="server" href="~/mp/css/master.search.css" rel="stylesheet" type="text/css" />
However, when I checked the source code of my website, the path shown there was:
~/mp/css/master.search.css
Insetead of the
../../mp/css/master.search.css
Anyone know why this is happening? And how to solve this?
PS: I do not want to use the <%= ResolveClientUrl("bla bla bla") %>, because it is messing arround with the mastrepage/theme relationship.
And I would prefer not to insert the CSS stylesheets in the header from the ServerSide code.
The reason it is happening is because the ASPX processor converts it to a GenericControl unless it is in the head region, then it converts it to a HtmlLink control.
For the generic controls it sets the href as an attribute. The HtmlLink has a Href property that is used and will resolve the url.
The only solutions I can think of off the top of my head are:
<%=ResolveUrl("blah")%> or <%=ResolveClientUrl("blah")%>
Create a custom control that renders the link and resolves the url using one of the above methods.
I see the issue you're having. The only workaround I could come up with was to create a System.Web.UI.HtmlControls.HtmlLink object in the code behind, set the Href property and the rel attribute (and any other attributes you want) and add it to the controls for the head ContentPlaceHolder.
If all your CSS declarations are inside of the head tag (either directly or through a ContentPlaceHolder control) then all you should have to do it specify your CSS links relative to the location of the master page. The URLs should get rebased automatically to the correct locations. You don't need the runat attribute, nor do you need to add ~.
In my case this is the code I have in my master pages:
<link href="../../res/css/styleForThisParticularMasterPage.css" rel="stylesheet" type="text/css" />