Problem Matching Up Logo With Background Color

Discussion in 'HTML & Website Design' started by HideIp, Aug 21, 2008.

0
  1. #1
    *Mods, I apologise if this is in the wrong forum. I thought it would best fit it since it is more of a design issue than graphics problem.

    Hi all,
    Just a few days ago I installed a brand new logo onto my site. At the time I was using Internet Explorer and the logo was off in color compared to the page. So I changed the background color and reuploaded the logo to my blog. However after getting reviews of the site, people have commented that the logo is off in Firefox 3. So I checked it out and and the color was off. I don't understand since in Internet explorer it looks fine. Not sure as to how to solve this. Can someone please give advice? The site is www.theenergystate.com/blog Any and all help is greatly appreciated. Thanks
     
    HideIp, Aug 21, 2008 IP
  2. Larke

    Larke Peon

    Messages:
    175
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can try 2 things.

    1. save the image as a GIF and make the background transparent to the HEX color in the CSS (style sheet). BOTH the image and the style sheet HEX (#000000 is black, for example) must be the same.
    2. alter the image to 16 colors and then save the png with a transparent background.
     
    Larke, Aug 21, 2008 IP
  3. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I am pretty sure it has something to do with the @import of the brown css file within the main style sheet.

    @import url("style-brown.css");
    Code (markup):
    Not sure, but I think IE may not like this. Try commenting that line out, then reference this stylesheet in the Head section following the reference to the the main stylesheet. Then tweak as needed.
     
    Dodger, Aug 21, 2008 IP
  4. ferman

    ferman Well-Known Member

    Messages:
    968
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    140
    #4
    try to use PNG format for logo and to work it properly in IE use javascript
     
    ferman, Aug 22, 2008 IP
  5. princessa

    princessa Active Member

    Messages:
    761
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    70
    #5
    I would recommend making the background of the logo transparent and saving it as a PNG file. Although IE6 and under do not support transparency in PNG files without the proper fix, which can be found here.

    I've found that it's nearly impossible to match unique hex codes in both IE and FF. If you don't want to go the transparent route, I'd suggest picking a simple background color like a default. (#000000, #FFFFFF, #CCCCCC ect)
     
    princessa, Aug 22, 2008 IP
    Dodger likes this.
  6. Technical Magic

    Technical Magic Peon

    Messages:
    47
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    your logo would look much better if it was aligned to the line just about the top menu rather than the top of the page - just my 2 cents worth
     
    Technical Magic, Aug 22, 2008 IP
  7. HideIp

    HideIp Active Member

    Messages:
    509
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #7
    thanks for the tips all. i was able to fix the background color issue, and it now works in both IE and Firefox. There is still a small issue of alignment but it's not as bad as the colors not matching up like before. thanks everyone
     
    HideIp, Aug 22, 2008 IP