Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts

    Firefox background color bug?

    Hey.

    The other day i noticed something really weird with a website i created a while ago, it's not finished yet, but the last time i checked, it looked just fine. A friend of mine messaged me on msn telling me about it, and when i went to the site i saw that he was right.

    For some reason, this is only visible in firefox, but not all versions. If i check with my laptop it looks just fine. (but that might be because it has a smaller screen resolution, but i doubt that!)

    Below is a screenshot of how it looks like. You can check it out for yourself at blubbz.com, if you want to. Take a look in both Internet Explorer and firefox, and you'll notice a difference.

    Oh and i forgot; the "bug" is on the footer and the header. I'm using a .JPG extension on the background files. (for the header and the footer)

    Any ideas what's wrong? Thanks in advance.
    -Nike

    How it looks like for me:
    http://i.imagehost.org/0114/ScreenShot-71.png
    Last edited by nikee; 10-21-2009 at 06:00 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I can't view your screen shot image (hotlinking is disabled with that image host) and your page looks the same to me in IE7 and FF3. Can you describe the problem a bit more?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    2
    Thanked 1 Time in 1 Post
    I am assuming you are refering to the fact that the background colour that appears to the left and right of the logo is a different colour to the logo.
    This should not be about ie or firefox but about the monitor you are using.

    .jpg files do not give a perfect colour match, they use masks and so the colour may not be a perfect match with the web colour used in your css. if the image was a gif or png it should match the background colour more exactly. I would try to match the background colour to the jpg file. It looks like you put the header to the company colour and then the jpeg was created.

    Actually just found that there is thought that ie and firefox do reproduce images slightly differently so this may cause a difference in colour. Dark blue is one of those colours which is tempromental in reproduction as anyone who has tried to convert from rgb to cmyk or back will know. Again this should not happen with gif or png images as their colours are hard coded in the file. have a look at saving the image in gif with exact (rather than adaptive) colour reproduction and see how great the size difference is. if its not too bad I would go with this.
    Last edited by sillyfishyboy; 10-21-2009 at 03:55 PM. Reason: New Info

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    Thanks guys

    @Rowsdower!, You can't? I can!

    @sillyfishyboy, Thanks. I'll try changing format and i'll comment back after that.

    But, i'm pretty sure that wont solve the problem. I'm not sure why, but the image looks great in IE and most FF's. I'm not sure if it's because of the firefox version or what, but it works when i look at it on my laptop, and it my friends says it looks good too. Weird!

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    YES! It worked. I have no idea how, or why, but it did.

    It kinda looked like the image had more contrast before. It looks just fine now. This is the first time i ever see something like this. JPG's should be used for images with many colors, right? And gif for animations and in some cases transparency (even though it cant be like 50% transparent... u know what i mean :P). Am i right? So why did firefox render the JPG files wrong?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by sillyfishyboy View Post
    I am assuming you are refering to the fact that the background colour that appears to the left and right of the logo is a different colour to the logo.
    This should not be about ie or firefox but about the monitor you are using.

    .jpg files do not give a perfect colour match, they use masks and so the colour may not be a perfect match with the web colour used in your css. if the image was a gif or png it should match the background colour more exactly. I would try to match the background colour to the jpg file. It looks like you put the header to the company colour and then the jpeg was created.

    Actually just found that there is thought that ie and firefox do reproduce images slightly differently so this may cause a difference in colour. Dark blue is one of those colours which is tempromental in reproduction as anyone who has tried to convert from rgb to cmyk or back will know. Again this should not happen with gif or png images as their colours are hard coded in the file. have a look at saving the image in gif with exact (rather than adaptive) colour reproduction and see how great the size difference is. if its not too bad I would go with this.
    This is the opposite of what I understand the situation to be. The PNGs contain data for gamma settings based on the display that was used when creating them. The idea being that the image would be presented in its originally intended form to the end user.

    Some browsers ignore gamma data (FF, Chrome) and others use/misuse it (IE, Safari), which is why the CSS hex codes won't always make perfect matches with the same hex code color used in your image program. This is one reason web developers use PNGCrush (to remove gamma data from PNG images for maximum cross-browser compatibilty).

    Give this a read once:
    http://morris-photographics.com/phot...png-gamma.html

    To my knowledge jpg, gif, and bmp images are 1:1 for color matching to hex colors and do not have the same difficulties with gamma. I'm not saying it's impossible, but I have never heard of jpg images having this issue before.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    On the other hand, after googling, I find that apparently FF 3.5 has this problem (or as they are calling it, a "feature").

    See here:
    http://hacks.mozilla.org/2009/06/color-correction/

    FF 3.5 changed the default setting for color correction to "on" where it is (for all other browsers including older versions of FF) turned "off" in cases where it is even available.

    There are some tips here to "optimize" your image for FF 3.5 to alter the color profile and make image colors match CSS colors. This is an issue for JPG and PNG images at least, maybe more. If you want to fix this you will have to strip the color profile from all of your affected images and re-save/re-upload.

    And by the way, since when does Firefox do something this intrusive to web developers?

    Edit: Edit: Apparently this was an issue with 3.5.0 (or thereabouts) and was corrected in 3.5.2 and above. If you're seeing a difference check on your FF versions and update your browser where needed...
    Last edited by Rowsdower!; 10-21-2009 at 05:51 PM. Reason: Version control :D
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    New Coder
    Join Date
    Oct 2009
    Posts
    11
    Thanks
    2
    Thanked 1 Time in 1 Post
    As far as I am aware (I could be wrong though) these are 2 slightly different issues, yes png can have problems because of its gamma data which means that it can look different but the way the colour is encoded into the file is similar to how gif does it which is to list pixels row by row which is why large blocks of color and vector type graphics give such low file size with gif and png, jpeg is very different in that during compression it uses area masks to calculate areas of similar colour and uses interpolation in the areas in between which makes it so lossy and so the actual color can be different post compression to how it began especially with gradients and areas of high detail.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •