Background Doesn't Appear On Certain Browsers

HTML & CSS
1

Here is the page…

LINK-
http://www.securehostserver.info/anderson/

The background appears in the Mac versions of Safari, IE 6,7 and 8, Firefox, Chrome, Camino, Opera but the problem appears when I use Adobe Browser Lab to view the site in Firefox 3.0 and also on the iPhone. The same page when viewed on the iPhone does not have the backgrounds and it also does not center within the viewport. It appears locked to the left.

Can someone take a look and tell me what is going on and what I can do to fix it? Thank you in advance!

Todd

2

To which image(s) are you referring? Please provide a link or links to the images that are not appearing, so we can compare them as they are used in your CSS. For example… this image? or [URL=“http://www.securehostserver.info/anderson/i/gfx_bkg_slideshow.png”]this image? both?

3

It appears to be every background image. Here is the snapshot from my iPhone.

http://securehostserver.info/anderson/i/photo.PNG

4

What’s going on with this on the h1?

background: url(../i/gfx_logo.png) no-repeat 0 0; _bac\\kground: url(../i/gfx_logo.gif) no-repeat 0 0;

Jigsaw doesn’t like it, and my guess is that some browsers may also be having a strop about it.

5

The H1 uses a transparent PNG for replacing the logo and in IE6 the PNG did not show up at all. So I found an article here (http://www.ejeliot.com/blog/63) that showed how to add a CSS rule that would target IE6 browsers only. So that is the weird property… it is supposed to use the GIF to replace the logo.

I am guessing that I should use a separate stylesheet just for IE6?

6

If you need to use CSS hacks to target IE6 then yes, you should put those hacks into a separate stylesheet and use conditional comments to ensure that only IE6 sees it. That way, you’re less likely to get into trouble with the hacks causing problems for other browsers. You don’t need to replicate the whole stylesheet for IE6, only the bits that are different.

7

Could I use the same stylesheet and just add a selector for that one rule? Something like this?

USING THIS FOR IE6 ONLY-

  • html h1 { text-indent: -9999px; display: block; height: 71px; width: 267px; margin: 22px 0 0 93px; background: url(…/i/gfx_logo.gif) no-repeat 0 0; }

USING THIS FOR ALL OTHER BROWSERS-
h1 { text-indent: -9999px; display: block; height: 71px; width: 267px; margin: 22px 0 0 93px; background: url(…/i/gfx_logo.png) no-repeat 0 0; }

8

Yes, that should work as well. * html is considered a ‘safe’ hack, and shouldn’t break anything else, whereas the split word you’d used before is not a ‘safe’ method.

9

What images are missing on that screenshot? I keep looking but can’t spot anything missing. Or am I being thick again?

10

Here are the background images that repeat-x and do not appear… I have them circled in red.

http://www.securehostserver.info/anderson/i/missing.jpg

11

Hi,

Ok, I see :slight_smile: The background images are actually showing they are just not going to 100% width.

I don’t know if this will make a difference but try setting a min-width on those 100% wide elements that match the largest element in your page.

e.g.


#header-container,#slider-container,
#footer-container,#scroll-container,
#main-container,#nav-container {min-width:1100px;margin:auto}

Worth a try :slight_smile:

12

Works now. I wonder why it was doing that? I haven’t had that problem before. Of course, I seem to run into a CSS stumbling block daily and that is nothing new… Also, it seems that you are the one that has the best fixes! Thanks again!

13

The iphone scales layouts based on a 960px width I believe and as the minimum width of your page was 1100+ then you get the same effect as shrinking your browsers window to 960px and then scrolling to the right. In your previous set up you would notice that the 100% background all stop short when you scrolled right because 100% wide is only viewport wide and not the the part that needs to be scrolled to.

Adding the min-widths to the 100% elements ensure the background is always as wide as the widest element that will ever be scrolled to. This seems to fix the display in the iphone also.

Also, it seems that you are the one that has the best fixes! Thanks again!

A lucky guess I suppose :slight_smile:
(Mind you the more I practice the luckier I get ;))

14

Paul,

I have modified the page per the clients request and now when I add the min-width to the appropriate DIVs I am getting the same problem on the iPhone and now in Firefox 3. Can you take one more look please? I would appreciate your help!

LINK-
Home » Anderson Media Corporation

Todd

15

Hi Todd,

It looks like you increased the width of #main so now its 1190px in total width so you need to adjust the min-widths to match.


#header-container, #logos-container, #banner-container, #nav-container, #slideshow-container, #main-container {
  margin: auto;
 [B] min-width: 1190px;
}[/B]
16

Hmmmm, I obviously cannot add correctly. I saw the container that was exceeding the 1100 pixel target width and was able to correct it. Thanks again and sorry to bother you with these silly mistakes…