Browser Incompatibilities

[Aperture]

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

 

[Photomax]

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

 

[angelwatt]

Looks like it's working now, I don't see any difference between Safari and Firefox.

 

[Aperture]

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!!

 

[Photomax]

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...

 

[covisio]

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.