We have begun using CFWindows extensively on our website, ever since our upgrade to ColdFusion 9. Today one of our users pointed out that they cannot print a page with an active CFWindow. The CFWindow prints out transparent with the background page showing through.
We had a color issue a while ago and styled the back of the CFWindow to a solid color:
<style>
.x-window-mc { background-color: #FFFFFF; }
</style>
We tried both with and without this style, but with no success. Our target browser is IE8 at this time.
How can we make our CFWindows opaque so that they will appear correctly when the user initiates a browser print command?
Related
I am trying to style the nickname of users in discord for myself (local changes). I added a border to the nickname style ".username-1A8OIy" I tried it and it worked. The problem is when I add simple line of code in my override file the whole CSS in the website stops working like there is no styling sheet at all.Here is the code I am trying to add:
.username-1A8OIy {
border: 2px solid #fff;
}
Whenever I refresh the page, I should see my changes still there. But the only thing I see is just HTML website with no styling sheet at all. And when I remove the code I added, everything comes back to normal.Is there a problem in my code or something? What exactly I am doing wrong?
I'm having a difficult time removing blue borders on my images. I have created several links on the images that I have made for my employer's website. We inserted some new code that resolved this; however, I still have another user in the company seeing the same thing. They have a different version of IE than me so I can't verify this. I've tried to update my IE, but can't find updates past my current one.
His version of IE is: 11.0.9600.18314. His update version is 11.0.31. We are using Umbraco. We used this code to remove the borders on the previous versions: img { border-style: none; }.
Ideas?
It's simple, remove the border from the link, not the image
a{
border: none;
}
We figured out that it must have been his cache and cookies. Because the next day. It started working for him.
We've just purchased a Primeface Theme&Layout Sentinel. However I've noticed a strange styling on tables in Chrome. The Table header and footer has an orange border. My colleagues don't see this and if I change my chrome profile I don't see it either.
The original can be seen here: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38
I've noticed that Chrome is injecting a stylesheet:
.ui-widget-header {
border: 1px solid rgb(231, 143, 8);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
color: rgb(255, 255, 255);
font-weight: bold;
}
Where is this injected stylesheet coming from? How can I stop it? I know that chrome extensions can inject stylesheets but this stylesheet has a url to primefaces, or is that just a red herring and the extension just modified an existing valid stylesheet?
Update:
.ui-widget-header {
/* border: 1px solid #3f7506; */
/* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
color: #ffffff;
font-weight: bold;
}
This is the normal style sheet (it is being overwritten by some other styles, that's why some part is commented out). This style sheet is present in both profiles. As one can see from the URL, the styles normally use relative URIs but the injected one is using an absolute URI.
Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!
Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.
I had the same issue with injected stylesheet, hiding social buttons from my website.
It turned out my Adblock plus was blocking Facebook and YouTube social buttons.
Just had this with the 'Save to Pocket' extension overriding rules in a print stylesheet.
Also assuming your Google 'incognito' (privacy mode) browser isn't running your extensions viewing the page 'incognito' can be a quick way to check if a browser extension is the issue.
If someone stumbles on this as of 24-Feb-2022 because most web pages have black colored background due to color-scheme: dark right at the element by injected stylesheet, the culprit is 'Adobe Acrobat: PDF edit, convert, sign tools' - https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj
Worked fine after disabling the extension.
For Brazilians (especially) who are going through this, check if you have the Méliuz extension (chrome://extensions/?id=jdcfmebflppkljibgpdlboifpcaalolg) and disabled it.
How to debug "injected stylesheet" in Chrome
Open develop console, goto Network tab
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page
In mi case I have disabled the chrome extension called "Nimbus Screenshot & Screen Video Recorder"
remove your newly installed browser extensions and cache, that may solve your problem.
The same thing happened to me, the links disappear from the navigation bar because of an extension in chrome called "EPUB READER". I disabled it and the links show up.
For me the Shield feature was causing such a styling problem. Once disabled, the styling was as expected.
This problem seems to be caused by mostly recorder extensions. Mine was caused by "Screen Recorder" chrome extension.
I currently am using the Login Styles for Joomla module as the login module for a Joomla 2.5.9 site with the JS Elated template. This module displays a drop down box for logging in when a user clicks the login image.
In every browser but Internet Explorer 8, the login module will display with no problems. However, in IE 8, the Login module's button image will not appear, but the module will still be there.
By talking to the module's support team, I learned that the file causing this problem was the file ie.css. Removing the file helped, but resulted a button in the drop down to appear too dark.
Looking at ie.css, I found the following styles:
button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
behavior: url('./templates/js_elated/css/PIE.php');
background: #eee url(../images/button-light.png) repeat-x;
background: gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
border: 1px solid #ccc;
color: #000;
}
Commenting out the lines defining the background or the lines that defined the color resulted in either the login image not appearing, or the image for the button labeled "Log in" appearing too dark.
What would you recommend that I do? Thank you.
ie up to version 8 doesn't have proper support for many CSS3 properties and functions, such as gradient and border-radius.
the library PIE.css is a very effective solution as it goes around most limitations; on occasion it will require either position:relative or zoom:1 be added.
So your code should work. But since it obviously doesn't you may:
fiddle with position:relative and zoom:1 and see if it's solved, or something along these lines: http://css3pie.com/documentation/known-issues/
drop the gradient for IE, and use the background image that's provided. You might want to write the shorthand background in a different order for this to work: despite this being correct as per http://www.w3.org/TR/CSS2/colors.html#background I have to note that FF and chrome write it differently in their inspectors with color at the end
just use a fixed-color background, in the end if they're using IE they don't deserve pretty interfaces.
I have an issue where the screen goes white for a millisecond on a redirect when rendering the new page.
This causes the screen to flicker and annoys me so.
I have had a little scoot round the web and have found this IE solution which works on IE however it does not on chrome or FireFox.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
Plus I'm sure using this method will have some knock on effects on update panels and Ajax controls.
Is there a way of setting the server to render the full page before giving it the client so not to have this white millisecond that works for all browsers.
Any ideas will be welcomed.
Is there a way of setting the server to render the full page before giving it the client
short answer: no. that's how a web browser works.
even with the fastest possible servers (using statically cached pages as you describe them), you're only decreasing the average "white" time, not eliminating it all together. as you're seeing with IE, that default page transition is part of the browser code, not something the server-side gets control over. if you write your own browser, you can write it to wash black, wash white, or hold the transition until the entire page is loaded, like IE does.
as other people mention, getting your page size down will decrease the "white" time. this time is not only the time the server takes to generate the page, but also all the network travel time for the page, images, javascripts, css, etc. that's why you can never fully get rid of it - only hide it using browser tricks.
and i'm not talking about "client-side" anything. that won't work. the "client-side" code isn't even downloaded, much less running, when the browser decides to white-wash the canvas. it's kind of a standard part of "the internet" that everyone just gets used to; it wasn't designed to be a slide show viewer or a graphically perfect renderer. unfortunately, if you care about transitions that much, HTML is probably not the right medium for your work.
The MSDN examples recommends to set
Response.BufferOutput
before calling
Response.Redirect("http://www.mydomain.com/default.aspx");
You may also want to try to use
Server.Transfer("default.aspx", true);
What you're seeing is a normal occurrence. Here is what happens during a redirect:
The server sends a response to the browser (redirects are done on the client side).
The browser loads the response, sees that there is a redirect and stops the page load
The browser loads the new page
The meta tags you are using are IE only, and will not effect any other browser. The only things that will remove the flicker all together will be one of the following:
You said that the redirect occurs when the user clicks on a button or on a grid row or something. If this were to trigger a change to location.href instead of a post-back, then the user would not see the browser flicker.
Use Server.Transfer (this will result in the browser's address bar showing the old page instead of the new page (a redirect will change the address bar). This will only work if you are redirecting the user to a page on the same server.
Send an HTTP 301 response (Moved Permanently). Tis will remove the flicker, but use this method with caution. It has other effects (it may effect search engine rankings).
To do #3, use this code on the server.
Response.StatusCode = 301;
Response.StatusDescription = "Moved Permanently";
Response.AddHeader("Location", "NewLocation.aspx");
By default the server will buffer the complete response before sending it. The "white" will be a result of the content of the HTML possibly its size. Use a tool such as firebug or IE Developer Tools (my preference is Fiddler) to examine the generated content. At a guess you have some very large ViewState.
Sorry, am late at party! I have been grappling with this on my apps for long. The solution I have devised works for me. Very much like what #Pike65 suggested...
Create a holder for an overlay:
<div id="overlayContent" class="overlay">
<div id="loaderContent" class="loader">
Loading...
</div>
</div>
CSS for this holder:
.overlay {
position: fixed;
border: 0; margin: 0; padding: 0;
height: 100%; width: 100%;
top: 0; left: 0;
background-color: #272727;
text-align: center; vertical-align: middle;
z-index: 900; display: none;
-moz-opacity: 0.1; opacity: 0.1;
filter: alpha(opacity=10);
}
.overlay .loader {
position: relative;
width:40%;
margin: 20% auto;
padding: 10px;
background-color:black;
border: solid 1px gray;
color: #cccccc;
font-weight: bold;
}
Javascript (jQuery):
$('a, input[type=button]').live("click", function (e) {
$("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8);
});
That's it. You may modify the 'js' to your liking. It will cause a translucent overlay to appear whenever any link or button is cliked. By browser's nature, it will wait until it gets a response for the new page (headers). So it won't vanish the current page until at least something is returned for the new page. Once new page starts appearing, it will automatically remove the overlay!
Probably best to do it on the client side. For example, you could have a div that covers the entire page and fades out once the DOM has been fully put together. In jQuery, something like this:
$(document).ready(function() { $('#overlay').fadeOut(); });
From a UX perspective though it might be a little disconcerting. I actually prefer a little bit of flicker so I know things are happening.