Browser Incompatibilities

Discussion in 'Web Design and Development' started by Aperture, May 12, 2008.

  1. Aperture macrumors 68000

    Aperture

    Joined:
    Mar 19, 2006
    Location:
    PA
    #1
    Hi Everyone. I am helping a school setup a simple Wordpress-based blog/website type deal. (This isn't going to be used as the main website, though) I tweaked the original theme a bit until I got it to look right before checking for compatibility in other browsers.

    Anyway, the site looks fine in Safari and that's it. Firefox & IE both do not display the entire header. I looked through the error log for any clue as to why they wouldn't be displaying and I'm clueless. The site is PBSDOnline.com. If anyone could take a look it would be greatly appreciated.

    Thanks
     
  2. Photomax macrumors regular

    Joined:
    Nov 26, 2007
    Location:
    Seattle
    #2
    It looks fine in Safari and Zylescope

    The body element CSS looks like this:
    body {
    margin: 0;
    padding: 0;
    background: #7F7772 url(images/img01.gif) repeat-x;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    color: #FFFFFF;
    }

    I tried using the Firebug plugin for Firefox and the body element adds a scroll=0% to the background declaration. This is odd. The body background image is not showing. The logo is the same brown as the background color so it looks like it is missing.

    This page has no wrapper or container div. But I think the body CSS needs tweaking. I would try redoing the body so it reads like this:

    body {
    margin: 0;
    padding: 0;
    background: #7F7772 url(images/img01.gif) repeat-x left top;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    color: #FFFFFF;
    }


    Max
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Looks like it's working now, I don't see any difference between Safari and Firefox.
     
  4. Aperture thread starter macrumors 68000

    Aperture

    Joined:
    Mar 19, 2006
    Location:
    PA
    #4
    Thank you Max & Angelwatt for your help. I decided to try to to access the one image that isn't displaying via it's direct URL and only Safari could load it. Firefox and IE refused to show the GIF. I tried opening the problematic GIF in Photoshop and it gave me some error. (can't remember exactly)

    It then became apparent there was a problem with the image itself so I just recreated the image as a PNG. (I had a few problems with the GIF file format) Now that the problematic GIF has been replaced with the PNG it loads in Safari, Firefox, and IE. Not sure how the image got corrupted in the first place but it is working now.

    Thanks Again!!
     
  5. Photomax macrumors regular

    Joined:
    Nov 26, 2007
    Location:
    Seattle
    #5
    Interesting. This seemed like a puzzle for sure.

    Be sure to check for both versions of IE as sometimes IE does not render PNG files well. PNG files can look great and you get better alpha transparency effects but there is always the "IE" issue. PNG files are usually bigger than Gifs or Jpegs so you might want to look at re-saving the file as a Gif and compare the appearance and file sizes...
     
  6. covisio macrumors 6502

    covisio

    Joined:
    Aug 22, 2007
    Location:
    UK
    #6
    missing image

    He He, I had similar problem just now. Background image applied to <h1> tag wouldn't display on Windows but looked fine on Mac. Discovered I had saved the image as JPEG file format but had copied an old file name and inadvertently put a .gif file extension on it. Doh!
    Therefore the Mac recognised the file (doesn't need file extensions) but Windows got confused.
     

Share This Page