I am using gimp designs to style my web pages. For some reason the dimensions are always off between chrome and gimp.
For example a div selected in gimp yields 200x450.
If I enter:
.some_div {
width: 200px;
height: 450px;
}
The div that shows up in chrome is always smaller.
Can I enable some feature in gimp to make the exact?
The number of pixels of an image in GIMP is exact. I simply can't be "off by 1" - the file save plug-in, for example, would crash, if it got informed the wrong image size.
Now...pixels as defined for CSS are not that exact - so, it possible the browser is off due to some settings or preferences (like ZOOM) - anyway, post a screenshot along with your question - maybe someone can get a better clue of what is oging on there.
Have you tried simply using another browser to check this issue?
Make a screenshot of your div in chrome and paste it into gimp, so you can get the exact size of it.
Related
I have used the online Swiffy tool to convert a SWF file.
It all looks perfect when I use the code supplied, however I wanted it to be responsive, so changed the fixed size of the container to 100% width, and auto height.
Now when I view the file the whole canvas seems to slowly zoom in from tiny until it fills the page.
Whats happening here? Why does it insist on animating itself into position rather than just appear filling the screen width?
Many thanks in advance
I experienced similar problem. Check this line carefully:
<div id="swiffycontainer" style="width: 176px; height: 208px">
Make sure not to add anything after "208px".
I'm working on a printing template in the browser for print-to-pdf, and am using a transparent .png overlay in one section.
This happens both with transparent .png files and transparent .gif files:
Chrome, when printing (both to .pdf, and in the print preview window), seems to outline transparent images with a 1px gray line:
Exhibit A:
I've tried this in several other browsers (including Safari) and none appear to do what Chrome does. Has anyone seen this before? I need to find a way to disable it or hack it on the Chrome side so that this will work across browsers.
To see this in action, click here: http://jsfiddle.net/brandonscript/nELwd/ (just an <img /> tag) and press Cmd/Ctrl+P to bring up the print preview. You'll see this in the preview and if you print to .pdf. Make sure you have "Background colors and images" enabled, or you won't see any images.
Note: I'm not looking for workarounds after it's been printed and I'm aware that if you size the image to 100% and view the .pdf at 100% zoom you don't see the gray line. I need to programmatically (or otherwise) remove the gray line prior to printing the .pdf.
I have experimented enough and considered all the answers above while doing so.
Suspiciously, Upon saving your image and opening in gimp and some pokes into it, What I found was this.
Which makes me think that your image in truth, containing the gray border around it. My suggestion is you remove that layer and make that empty space around the actual image to transparent.
EDIT(response to #remus comment)
I do not know if my claim is correct, but I am believing that the image is not what you are expecting it to be. You need to correct that image. I have tested with another image of mine, pasted on the fiddle is not having any border around it in screen and print preview. (And the final pdf too). Sorry if this Answer is correct and hurts you.
Though I haven't come across this exact issue, I do a lot of work with css printing (for pdf and browser printing) and more often than not I have to use 2 images: 1 for screen and 1 for printing (do not use transparency for the printing one in yuour case):
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay.gif' width='300' height='400' class="screen"/>
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay_print.gif' width='300' height='400' class="forPrinting"/>
in your main css file:
img.forPrinting { display:none }
in your print css file which should be declared after your main css file:
img.screen {display:none }
img.forPrinting { display:block; }
Short Answer:
Change your PDF printing preset to a higher resolution.
you'll get:
The Long version:
I noticed you have re-sized the image by changing its width height properties in the HTML code.
So I made sure your image is exactly in the size you need it and it will not have this strange contour.
See Link: jsfiddle.net/cyVqw/
I have a print preview:
PDF screenshot:
To verify that in any size the PDF will keep your image transparency I checked
PDF saved in a Higher resolution preset i.e. "Print Quality". this resulted in a large file but with better zooming quality:
Here is High Resolution 33% preview:
High Resolution 200% preview
So, what you need to do is to adjust your PDF quality preset.
I've never created a custom cursor before, and I'm having a little trouble with it. Maybe I'm doing this completely wrong, but I tried opening up an icon in photoshop, and saving it as .gif and .cur, but it still isn't working on my webpage. Does it need to be a specific size like the favicon? How would I go about doing this?
My code in the css:
body{
cursor:url('cursor.gif'), pointer;
}
The image format should be icon (.ico). And the normal size should be 32x32.
But it depends on the requirement.
See the MDN Documentation on that. It says:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
Following image formats are supported:
The footer on our website is displaced by 1px on mobile browsers, and we don't understand why.
Here's a screen shot of what it looks like on the iPad. The 1px green line at the top of the footer doesn't appear in desktop browsers -- only on mobile ones (tested on iPhone & iPad Chrome and Safari).
If you would like to see this for yourself, visit www.panabee.com.
Can anyone explain why this is happening?
Thanks!
This is a funky problem. I see it differently on different zoom levels.
Change the last div in #page_box to the following style:
#all_icons {
margin: 60px auto 54px auto
}
And that fixes it for me on iPad at default zoom level.
However, I am seeing it come back at different zoom levels. I'd try swapping out that image with a transparent pixel to see if it goes away. I suspect it is something to do with that image.
I can see the issue on my iPhone 4S running iOS 6.1.3, it does disappear when I zoom in. But I can also reproduce the issue using Google Chrome Version 26.0.1410.64 m. When I zoom in to anywhere above 110% (obviously it is easier to spot at even higher zoom levels) I can see a green line appear for just a little while, which then disappears as the image becomes sharper within a few seconds. At 300% the line doesn't disappear anymore, it will always be visible, and at the same time the image does not become sharper anymore, but then at even higher zoom levels, the line is never there.
Seeing the image becoming sharper and then seeing the line disappear is leading me to believe that the problem might be with the image being saved as an interlaced image. Obviously you might have done this on purpose, as it is not really a bad thing. And in that case you would also know that interlacing an image enables it to be shown as a degraded copy of itself while it has only partially been received by its intended recipient (in this case a visitor on your website).
Now I have never heard of any issues with interlaced images in mobile safari, but doing a Google search did turn up some results. Including a result to a question with some useful answers here on SO. Problems seem to have started with the iOS 6 update. Most problems seem to be fixed by either turning off transparency on the image or by saving the image with the interlacing option turned off.
So I'd suggest you try those options and see if that fixes it. Or if you really need interlacing, maybe use a different image format which supports interlacing (browsers may handle it differently between formats?).
What I find quite interesting is that it seems like Google Chrome doesn't use interlacing on higher zoom levels, I guess it doesn't make sense to try to get the image to be even sharper when you're zoomed in that much already?
I would find it interesting to read some documentation on how different browsers handle interlacing for the different formats which support it. I couldn't really find any (but I didn't have a very good look). It might shed some light on why some issues have started to appear in iOS 6 and higher, to me it looks like mobile safari on iOS 6 does not support interlacing PNG images at all, and since I could reproduce the issue in Chrome, I thought that it might be an issue with WebKit based browsers across the board, but my Safari 5.1.7 does do the right thing on all zoom levels.
Anyway, I hope one of the suggestions will solve your problem.
This looks to me like a rounding error as a result of your web page being scaled.
If you haven't set a viewport metatag on your page, the default viewport width is set to 980 pixels, regardless of orientation. This means that in landscape orientation, when the device width is 768 pixels, the page has to be scaled down to around 78%.
If your page design relies on various parts being aligned with pixel perfect precision, this is bound to fail from time to time. I would expect newer versions of webkit to deal with this sort of thing better, since they recently moved to subpixel layout units, but that won't always help.
Assuming this is the problem, you should be able to fix it by adding a viewport metatag to your page like this:
<meta name="viewport" content="width=device-width">
You would then need to use media queries to adjust your layout to better handle different device widths, since you can't rely on the browser scaling your pages for you anymore.
Even then, though, you can't guarantee that your css pixels necessarily translate to exact device pixels, since some mobile devices may have non-integer device pixel ratios. It should at least fix your problems on the iPad, though, since it has a device pixel ratio of either 1 or 2 (depending on whether you have a retina display or not).
If media queries seem like too much effort, I was going to suggest you just move your #footer_top down a pixel, but it looks like you've already done that. Has that not helped?
I cannot reproduce the problem on my iPad (perhaps you've tweaked something already) but I think you might solve this problem with background-origin: border-box; on #footer_top and #footer.
Try changing your CSS for #footer_top to:
#footer_top{
background: transparent url(/images/footer_header.png) repeat-x center -1px;
height: 72px;
position: relative;
top: 1px;
}
Basically if you pull up the background image by 1px pixel and pull down the div panel by 1px, it should help fix the problem.
Here's the fix:
#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}
It has to do with the fact that the backgound is repeating, although oddly enough adding repeat-x does not fix it as it appears to be a repeating the bottom pixel to the top. I've run across something similiar at the edges of images, and I think it's an error in the way webkit does interpolation at the edges of an image. In any rate, all I've done is hide the top pixel, but you might find that placing a single repeating transparent pixel along the bottom MAY fix your issue as well (although in my other project it did not).
I have very strange situation and I really can't see why ... and how to overcome that.
So I have to place the backgroung image on web site of size 1920x860.
The image ends differently - like: if it is not extended over the whole window, the corners of the image looks strange.
When I tested this in FF, it does not look ok. I tested this on 22'' monitor (thus resolution 1680x ..).
when I test this in Chrome, the image extends good, the corners of the image are not seen.
BUT: I have two monitors, the second is 23'', thus the resolution is not much different of the first one and if I test this page on Crome, is ok, on FF also.
Then I used firebug tool and try to get the innerWidth of the window.
The 22'' monitor has innerWidth 2124px, the 23'' monitor has 1776px.
I would really appreciate if someone can tell me - why this is happening? If someone could have an idea how to place this image to let it extend well on every monitor ... would be even better.
The point is - that I have to extend image from corner to corner and while testing on my monitors, I cannot be sure that other users will see this as I can see :(
Thanks.
I'll make the comments here ... as all of you are so kind I just tried many different solutions. the point is that the image is not cover for whole background - should be seen and at the bottom should just have some color ...
Now I'm using simple background: url() no-repeat top center ..
if I use -cover- the image is extended - but I needed to extended only vertically. I used JS as well, but is not working ok, as the footer is a part of that bg-image ... and become all wired.
Maybe, I'll just use #media .. to set bigger image for bigger screens (and of course will use bigger image) but also this will work only for a bit bigger screens, if not the design will crash, I think.
Let me google that for you (first result for 'css window background'):
http://css-tricks.com/perfect-full-page-background-image/
In a nutshell:
html {
background: url(bg.jpg) no-repeat center center fixed;
background-size: cover;
}
See also: http://caniuse.com/#search=background-size