I am building a simple website and for some reason "zoom : 1" is added to the body, like this:
"style = 'zoom:1;'"
Needles to say I did not added this nor does this ever appears in the php file or the css file.
Spooky.
Thanks in advance!
sometimes browser add zoom:1 automatically, it doesn't do any thing.zoom:1 is a normal zoom and does not magnify anything in your website.
Related
I've been creating a website and a portion of the site is designed to be printed on tabloid paper in portrait mode. The problem I'm having is when the print dialog comes up in Chrome it's missing the "Layout" options.
In this screen shot, the left side shows how my dialog box looks vs. how it looks when I print other websites. The ironic thing is even other sites I've created have the option as shown on the right, which is the desired behavior.
My question is, what controls this behavior? How do I correct it? In searching the web the only mention I've see of this is when Chrome is displaying PDF files, but I'm displaying a web page.
Any insight you can give would be greatly appreciated.
Thanks in advance
If you have an #page size declaration in the print CSS, this will override (and hide) the orientation on the print dialog. To override a declaration that is set elsewhere (e.g. Bootstrap 4 does this) you can add:
#page {
size: auto;
}
Just a quick addition to the accepted answer..
For those who are unable to edit the css of the page you're trying to print, you can install the Chrome extension called 'Stylus' (link here), and create a new style with just the above suggestion:
#page {
size: auto;
}
This will enable the missing options from the print dialog on any/every web page..
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.
We have had an applet built for us in JSFiddle. It only works though when one ticks the box that says normalized CSS. How do we activate that on our website. I have never heard of it.
Any ideas?
Marvellous
http://doc.jsfiddle.net/basic/introduction.html?highlight=normalized#choose-framework
Next is the Normalized CSS checkbox, selected by default. If selected, the fiddle will be rendered with normalize.css which is removing most of the browser styling of many HTML tags.
You'd want to include the following file in your template/pages.
http://jsfiddle.net/css/normalize.css
I'd recommend copying it and referencing a local copy rather than referencing it on their server though, that's bad form :)
What the normalized CSS is on jsfiddle is a CSS Reset
To add it on your site, copy in paste the following code: CSS Reset
I have HTML page of few tables created by ASP.NET and when I do the "Page Setup" option before printing the paper size is already selected as "Letter" and I want that option to be in "A4". I changed the size of the table but its not working.
Is there any page setup information I can put in HTML so that "Page Setup" option can take it from there.
Please help.
Thanks
Anto
You have to use media type in CSS. This way you can specify a different set of styles for print and screen medias.
Here is an article about printer friendly pages. You can also read about media types in the W3C learning section.
You cannot change anything in the Print window from the HTML. You can just specify another CSS file for print media to make your page look better when you print it (like remove buttons, remove any content which is useless on a sheet of paper, change sizes, change fonts, etc.)
Hope this helps.
You could give it a try with CSS, using the #page rule. Mind that this is valid for CSS 2.0 and CSS 3.0 but not for CSS 2.1:
#page { size: A4 };
I'm not sure if this will change your default selected paper size though.
I've added a jpg file to the App_localResources folder and in the document properites specified the photo in the Background propery. In the designer it shows up as the background but when i run the page i still get the white page background.
There's no distinctly ASP.Net way of doing this.
The canonical HTML way is to include this CSS:
body { background-image: url('background.jpg'); }
If you defined the body tag with runat="server" you could add the style inline using the Attributes property, but this wouldn't be a good idea. Layout details like this should go in the Stylesheet.
Guessing that perhaps you have a stylesheet which might be overriding the background?
I would check if the built in web server was still running and stop it, then re-run your application.
* Right click on the tray icon and select "Stop".
The page is being cached, you should see your changes now.
I used fiddler to trace the calls on the image. App_LocalResources\*.jpg return an 403 error. The App_LocalResources folder is really for use for localization. If I move the image into an image folder it works fine.
Also rather than setting the Background property, use the Style property and the background property there.
Sometimes you need to clear the cache of the browser after making changes to backgrounds and colors in order for it to apply when you run the site the next time.
Take a look here:
http://www.wikihow.com/Clear-Your-Browser%27s-Cache