I have an issue where color is shown differently in FireFox, compared to Chrome and IE. And i have no idea how come.
What would you do in my situation to get the same color displayed in all the browsers?
See http://www.inoplay.dk/
The top v-sign background is another blue (in FireFox), compared to the rest of the header, even though i selected exact same color in photoshop.
I have limited possibilities to edit the theme/template in PrestaShop, so simple CSS solution all i can do.
Any suggestions is greatly appreciated.
There are a few things that affect how these images render against HTML hex color codes.
It could vary whether or not each browser is using hardware acceleration which would affect how colors are rendered
The compression of the JPEG can sometimes cause color shifting
Make sure all your web images are in RGB color space/profile
SUGGESTION: the easiest way to get around this is to create your menu element as .PNG - PNG allows you to have a transparent background. This way you won't need to try to match the blue with code. It will just be transparent.
https://en.wikipedia.org/wiki/Portable_Network_Graphics
Try saving the image in jpg format. i hope it should solve the issue
Related
Is there a possibility to make image colors exactly the same as HTML colors?
I have a rounded corners box, the corners are images and the background color is HTML, on my laptop it looks flawless, but on good monitors a difference in colors is noticeable.
Is it true that it isn't possible to have HTML generated colors exactly match image colors?
edit: I am using Photoshop and am using the exact hex equivalent of the RGB colors.
Another potential solution: you're seeing a color shift caused by color profiles.
These could be due to how those other monitors are configured (you can update your machine to use a specific profile; folks like designers will do this to make sure colors are accurate in photography or print design) or due to how your images are saved when exporting them from your favorite image editing tool (I'm looking at you, Photoshop). These issues can and will occur regardless of whether or not your hex colors are spot on and are ridiculously frustrating.
Give that link a shot; if you're dealing with an embedded color profile issue, that might get you going in the right direction.
Edit: That you're exporting from Photoshop makes me think this is the likely culprit.
If you use the same colors, e.g. #E1E1E1 in your CSS and your image (a tool like 'GIMP' will assist you with a color picker where you can directly enter these hex values) the colors will be identical.
My guess is your problem is most likely compression (by saving as .jpg and the artifacts it introduces). Use other formats (like the lossless PNG format) or save your JPG in a lossless way (with the quality slider up to 100 in most tools).
Browsers / monitors can look a tiny bit different for some colors. Matching up certain colors may prove to be a difficult task even if you are matching an image with the same hex value as the one you are using in your css. (this will work for most cases but not always) My recommendation is to use web safe colors where possible, these colors tend to render the same on multiple displays.
i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
freakin' out because i didn't manage to create a preloader, which is working in internet explorer. it is a real small preloader (10x10px), which is shown in a textfield after the user started a search.
i first implemented a css-spinner from here: http://cssload.net/ which looks good everywhere but doesn t work in ie at all.
afterwards, i generated one animated gif at http://ajaxload.info/ , but the results are looking pretty ugly in small size. it doesn t make a difference, if the gif is transparent or not...
anyone a good idea for that?
thanks,
k
EDIT: mootools is supported, but i do not want a small flash-preloader for that case!
have you tried this one?
preloaders.net
there are many modification possibilities and it looks nice in small size as you can scale the image to the size you prefer.
implementing a gif as part of a veil component you are viewing above the component you are loading or which is processing the request will work on every browser.
thanks for all comments and infos!
i guess the problem was the transparency of the preloader. the background of the text input is grey, so with transparent gif i had white pixel at the "corners" during the animation. i just choosed the grey color as background-color from the gif, and it looks ok. thanks eyerbody!
I know this seems like a simple question, but I'm really stuck. I am developing a website and Firefox is altering the image colors for the site. The issue is stemming from Firefox's use of ICC color profiles (I think).
I've done tons of research on the topic, and most of it boils down to sRGB when saving in Photoshop, but the color profiles are already set to sRGB.
These are the color settings I use when I save:
http://i.stack.imgur.com/jLJ5g.png
http://i.stack.imgur.com/OAx88.png - How it looks in Firefox 3, Chrome, and IE
http://i.stack.imgur.com/B7bcC.png - How it looks in Firefox 4
I can disable Firefox 4's color management through
about:config / gfx.color_management.enabled = 0,
but that is not a correct solution.
Wat do?
URL: http://development.smgwebdesign.com/riley
Thanks guys.
Well to help keep the colours correct, don't use an image to create the background.
As it is only one colour just set the background colour using css.
It accepts hexidecimal values.
eg #15253c would be your colour.
You can find different ones in photoshop by going to the colour selector tool.
It shows what the colour is in lots of different ways.
Then make the background of the logo transparent so there are no colour issues there.
I can't see how you're colouring the nav menu, but if you can use css and background colours directly,
as apposed to images, it will work better.
Use css wherever you can, it will work better and your website will load faster.
Check out http://www.w3schools.com/css/default.asp for help with CSS.
Also, for the images you do have to use, try the 'save for web' option in photoshop.
This is a bit out of my depth because I haven't been a Photoshop user for a long time, but the general solution to this is not to embed a ICC colour profile in the first place.
You should have a check box for that in your export dialog. Is that already turned off?
Hi bit of a silly question.
Are there any png transparency issues with backgrounds to submit buttons or inputs of type image? Or do they behave fine just like img tags with a png image as the source.
I understand for IE6 you need a hack for png transparency to work.
I ran into this issue recently and converted the button images to Gif. There is a minor loss of fidelity, as you have to get by with 256 colors, but transparency works without any hacks.
Yes, if you have png files and you are under IE6, you will witness such problems. But there are solutions too; one being as follows:
http://jquery.andreaseberhard.de/pngFix/
By the way there is no need to use png for input type buttons, etc unless you really need it.
Another issue is metadata which can be contained in png file. If png contains it, then in IE browsers you'll see a bit different colors.
It can be fixed easily. You just need to save your png correctly (disable metadata).