I have a large number of template files I am printing with Chromium. They all rely on the same CSS file. On a good number of them I need to just make everything a little smaller. If I adjust the scale in Chromes print options to 75% I get the desired result.
I need a way to get a similar result in CSS?
The only browser compatibility I need is Chrome.
This question was asked before, but wasn't really answered as the person asking the question was only using this as a workaround and found a better solution to the problem. In my case I really want to know the answer to the asked question.
Css to emulate scaling in Chrome
I have tried all the suggestions proposed in this post and none of them worked.
Related
I know it's a topic that has been answered several times, but I'm playing with css "background-attachment:fixed" property, and I wanted to make it work on mobile devices.
The answer is: it's not possible, because it is forced to "scroll" for performence reasons.
Knowing that, I still tried, and I found these examples on w3schools : example 1, example 2.
These two examples both work on my chrome mobile browser (running on Android 7.0). No matter how hard I try, I can't reproduce this behaviour.
I inspected the code and it seems based solely on background-attachment to work.
How is it possible, and how can I reproduce this?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to help a friend with a blog on wordpress.com http://mpiedgeworldclass.wordpress.com/.
They have the css editing option paid for/turned on so we can edit css but can't touch the theme itself.
There is a vertical image repeating between the sidebar and content area. It runs too high in Safari but works fine in Chrome.
If I could access the theme / html I think this would be easy to fix, but trying to do it only from the css.... I'm not sure if this one is even possible.
Any CSS wizards got any ideas?
(I sincerely wish I had more css skills, but it doesn't seem to come easily nor after 6 years very quickly either.) :(
The whole thing is a bit of a mess, but the best solution I can find (which has no effect on Chrome), is to set height: 187px; on #header.
It's an interesting issue, where Safari treats margins differently depending on whether you defined the height or not, even though the calculated height for auto comes out to the same value. I had a similar issue the other day.
Safari and Chrome are both based on WebKit and, as such, have no inherent differences when it comes to css rendering. However if your chrome browser is using a different version of webkit than your safari's you could potentially see some issues. This problem looks to be either a position or display issue...which havent really changed as far as I know.
What I would do is check to see if the css is doing anything new or weird in order to place that element which is the likely cause of the problem. Code would really help, but I can suggest checking the respective versions of safari and chrome and perhaps update them both to their latest builds. At the very least you'll know it is a backwards compatibility issue if updating them fixes the problem.
I am making a website, where when i preview it in safari. It turns out exactly as i want it to be. But when i test it out with firefox.
In my page i have a element that is aligned on the page using
Padding-left and Margin-top. Which works perfectly when i preview it in safari. But when i open the file in firefox. The element's Margin-top increases by a few pixels.
How do i code my css file so that i can have the same page for different browsers. I have tried looking on the web for a solution, but none of them so far has helped with the problem.
Reply's will be much appreciated.
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step.
If you are having an issue with FireFox, you are probably going to die when you look in IE. Bookmark this link! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
You have a lot to learn and google will help: https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8
In future, use stackoverflow for specific questions with code examples. You will find that you get specific answers quite quickly.
Also, don't forget to tick the answer that you find most useful, and also vote some up a level. That's why people spend the time answering your questions.
Enjoy the long road ahead :)
Specify all four margin and all four padding values explicitly. That will eliminate the diffferences in the browsers' built-in default stylesheets.
There can be several reasons why your finding your layouts aren't cross-browser compatible, so it would take a considerable amount of info of the markup and css to make any kind of determination on how to help you code a 100% W3C valid web page.
I would suggest using a css framework like blueprint or 960 for your layouts, so you have less issues in this way. It's a good way to start and maintain projects, and learn how to create layouts if you choose not to use a framework.
Also, I would suggest testing all of your projects in chrome and firefox first, then safari, simply because of the amount of users that use those two browsers compared to safari. I would also say, if it looks good in chrome, it will probably look good in safari and firefox, but it's always worth testing.
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
After fiddling around with an issue I am having I have come to this conclusion:
my list Elements are displaying smaller in Safari on my Macbook than they are on Safari on my PC. IE, and Firefox are displaying properly also.
What might be causing this difference? It is hindering my ability to complete this design.
www.christopherbier.com/gbg
Please let me know if there are any css tags that might be causing this.
Here is my previous question that includes my css etc. CSS spacing issues with Safari?
Any help is appreciated.
You might want to consider including css reset stylesheet. You can find a good one here:
YUI CSS Reset
This basically "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers".
Hopefully that will solve your problem!
My guess is that it may well not be a css tag that's causing the issue, but just a difference in defaults on the two different browser versions. Each version is probably tailored to the OS to some extent, and may look different, which is expected.
Overriding this default behavior should raise a warning flag, because you're changing the overall look and feel, and it may not match well with the OS layout in general. It doesn't mean don't do it, but it does mean that you might want to proceed with caution.