I've got an element in an HTML page (an image button), that has a css that shows something when a mouse hovers on it.
I would like the css to be activated only for certain users - that is, I've got a login control on the page as well, so I want the css to be activated only for specific usernames.
Is there a way to do that?
Thanks!
You could use different stylesheets, and load them up depending on which you want:
<%
if user=thisguy then
%>
<link href="css/style_thisguy.css" rel="stylesheet" type="text/css" />
<%else%>
<link href="css/style_thathuy.css" rel="stylesheet" type="text/css" />
<%end if%>
Related
I have a page1 including page2 with "iframe" tag,both of these two pages link to the same stylesheet,everything works fine,until i press "F12" to toggle developer tool in IE10,some of the classes miss styles defined in the css file suddenly,and the two pages go into a wrong display. Can anyone help?
there are two methods to solve this problem, change the class name or add a timestamp after style url. Why?
This is a bug in IE10.
You can add a query string in page2 to fix this bug:
page2:
<link rel="stylesheet" href="css/base.css?t=2013" />
<link rel="stylesheet" href="css/layout.css?t=2013" />
page1:
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/layout.css" />
My website structure is as follows
/Style.css
/MasterPage.Master
/Default.aspx
/Member/
member.master
member.aspx
The /MasterPage.Master points to style.css as follows
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
and it works like a charm.
After adding the member.master as a nested master page of MasterPage.Master i noticed that both the VS2010 and the rendered webpage, could not apply the formatting at the child member.master
After some googling i found that i could use the following code
<link rel="stylesheet" href="<%= ResolveUrl("style.css") %>" type="text/css" media="all"/>
The webpage is rendered correctly now, but how can i have the same result in design mode with the visual studio?
As I see, all paths should go as relative paths.
If you have the style sheet as
<link href="~/Style.css" rel="stylesheet" type="text/css" />
the pages should work well. At the same time you need to have master pages referred as:
In your member.master:
MasterPageFile="~/Site.master"
In member.aspx:
MasterPageFile="~/Member/member.master"
Hope this will help you.
I have a web application that produce some reports in HTML format. I have different styling options to display these forms. Normally whenever I want to print these pages, I lose all CSS styling features. How can I make a print without any change in appearance?
<link rel="stylesheet" href="./public/css/print.css" type="text/css" media="screen, print" />
As far as I know the print-out should use the same css-styling as the screen unless you specify something else.
Do you specify "media" in the css link?
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You could try to either make sure there is no media specified or to set media="screen, print"...
If you use some JavaScript plugin (like: jQuery-Print) you would lose your appearance in the other way if you use CSS correctly it's impossible to have a change in your print usually?!
if your problem don't solve tell me which language do you use for your application?
I have observed that, very infrequently, Internet Explorer (7 or 8, it does not matter) displays our web pages (www.epsitec.ch) a short time without applying the CSS. The layout appears completely broken, with everything displayed sequentially from top to bottom. When the page has finished loading, everything finally gets displayed properly.
Our web pages do not use any fancy scripting, just two javascript inclusions for QuantCast and Google Analytics, done at the end of the page. By the way, we already had the issue before adding the QuantCast script. The CSS gets linked in the <head> section:
<head>
<title>Crésus Comptabilité</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.epsitec.ch/favicon.ico" />
<link href="../../style.css" rel="stylesheet" type="text/css" />
...
</head>
and then follows static HTML up to the final chunk which includes the JavaScript:
...
<div id="account">
<a class="deselect" href="/account/login">Identifiez-vous</a>
<script type="text/javascript">
_qoptions={qacct:"..."};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js">
</script>
<noscript>
<img src="..." style="display: none;" border="0" height="1" width="1"/>
</noscript>
</div>
<div id="contact">
Contactez-nous
</div>
<div id="ending"><!-- --></div>
</div>
<script type="text/javascript">
...
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("...");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
As this is a very short visual glitch, I have no idea what provokes it. Worse, I cannot reproduce it and it appears only on seldom occasions. How can I further investigate the cause of the glitch? Are there any best practices I should be aware of?
This is called a FOUC, a Flash Of Unstyled Content, and is well documented and explained here: http://www.bluerobot.com/web/css/fouc.asp/
FOUC has to do with the order of loading external assets like CSS and JS files.
Inline script snippets block downloading of subsequent assets until they are interpreted. This is one of the causes for FOUC.
A best-practice for front-end performance as well as avoiding FOUC is to have your CSS files referenced in the <head> of your document and your JavaScript right before the closing </body> tag.
This makes the browser download styles, render the page, then apply JavaScript.
I did not have the problem, usually has to do with internet connection. CSS loading slowly.
I was having this same problem. I simply switched the order in which stylesheets and javascript were getting loaded in the head of layouts/application.html.erb. So now the stylesheets get loaded first and then the javascript.
Like so:
<head>
<title><%= full_title yield(:title) %></title>
<%= stylesheet_link_tag :application, media: "all" %>
<%= javascript_include_tag :application %>
<%= csrf_meta_tags %>
</head>
I'm just curious how most people make their ASP.NET pages printer-friendly? Do you create a separate printer-friendly version of the ASPX page, use CSS or something else? How do you handle situations like page breaks and wide tables?
Is there one elegant solution that works for the majority of the cases?
You basically make another CSS file that hide things or gives simpler "printer-friendly" style to things then add that with a media="print" so that it only applies to print media (when it is printed)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Our gracious host wrote a good blog post on this topic:
Coding Horror: Stylesheets for Print and Handheld
I am a php user, but the point must be that the result no matter what is HTML and HTML is styled with CSS and there is an option for your style sheets for just using the style for printing. This should be the way to do it, imho. About big tables, there isnt really a magic "fix" for that. Page will break where it breaks, dont really understand the problem here either.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />