Jump to content

Recommended Posts

www.americanbeautytools.com/site

 

The header image is picked from 6 images randomly.  The paths are always correct and it always appears in Opera/FF/IE7.  In IE6, the image just doesn't appear some of the time.  Anyone have any clue what I might be doing wrong or is it just IE?

Link to comment
https://forums.phpfreaks.com/topic/89841-background-image-and-ie-6-problems/
Share on other sites

Are you using php?

 

Just have php grab a random number from 1 to 6 and then depending on the # grab that image. You would need to declare all background images in the css file and then just have different class for each background image and apply it through php.

That's quite possibly the worst idea I've ever heard.

 

This is all I should have to do:

 

<div id="logotest" style="background-image: url('../images/header/header<?=rand(1,6)?>.jpg');"></div>

 

Using inline css? Not a much better idea.

That is really strange.  I opened the page with IE6.  Hit refresh about 30 times and viewed the generated source between refreshes.  I managed to get a missing image about half the time!!  I also noted that all 6 of the images do appear as the background during my testing, so (as you already knew) there isn't anything intrinsically 'wrong' with any image.

 

Heaven only knows what causes that!

I just refreshed your page 25 times in IE6 and the header images show up every time. Perhaps you have already fixed the problem?

 

But looking at your code there are a few things you should consider:

 

- Put your code through a validator and fix the errors that are getting flagged (some are very simple ampersand errors). Whenever something goes wrong check that it isn't a little coding error first.

 

- Eventually you should get rid of the inline styling and remove the use of print media pt units in a stylesheet for screen media.

 

- It is not semantic or necessary to be using an empty div to contain a background image. Either use an actual image (and store the path, alt text, dimensions in your php array) or apply the background image to an existing "header" div that contains your top level navigation. You can get php to assign different classes to the header div that correspond to different background images.

 

- You don't need to be using {vertical-align:middle;} on a div element and I also never put ' ' around the paths to the background images in my css. It doesn't seem to be invalid but it also might cause problems for some browsers?

 

Things will probably get easier with time as you get used to ditching some of the "table layout" coding concepts (and to be fair everything that has gone wrong for you has been in IE6...no surprise!). Anyway, I had no problems looking at your site headers with IE6!

I just ran through it and couldn't get it to appear about 50% of the time, so it's definately not fixed.

 

1) I will validate ... haven't gotten around to that.  Either way, I really doubt that is the issue in this case.

2) Get rid of inline styling?  No offense, but I'd have a very hard time believing you put EVERYTHING in your css file.  I do agree with swapping out the pt usage.. but we've been around that block.

3) ... yeah, again, not sure this would fix anything.

4) not sure where that is being used but I'll look into it.  I don't normally put the '' in there either but someone else suggested it so I was desperate.  It doesn't seem to make it any worse.

 

And I'm not sure what you mean by "table layout coding concepts"... I haven't used a table for layout in close to 5 years.  Maybe you can explain that one further?

I just ran through it and couldn't get it to appear about 50% of the time, so it's definately not fixed.

 

I can't replicate your problems in IE6 so I can't suggest any solutions other than those I already made (like using an image).

 

I will validate ... haven't gotten around to that.

 

Whenever you have a problem it is a good habit to check your html/css for errors first.

 

No offense, but I'd have a very hard time believing you put EVERYTHING in your css file.

 

Why would I recommend something if I do it another way? I have yet to find a situation where I needed to use an inline style, and I'm not bothered what you believe because I'm only wasting my time here to help. You're using inline styles in places where simply adding declarations to the stylesheet would be more efficient, give you greater flexibility, and helping you to avoid digging around in html files when all you want to do is alter the presentation.

 

If you want to keep using inline styles, be my guest, I'm not here to beat people over the head.

 

yeah, again, not sure this would fix anything.

 

It is the most widely used method of achieving what you are trying to achieve. Surely spending 5 minutes trying it out is worthy of your time?

 

And I'm not sure what you mean by "table layout coding concepts"... I haven't used a table for layout in close to 5 years.

 

Using an empty div to display a background image, using divs with classes like "sidemenu_header" or "productTitle" to display headings...that is what I'm talking about. A heading should be wrapped in a heading tag, an element should not be empty. It's not going to solve your current problem but it will help you to create cleaner, more semantic, html documents that will prove easier to style and debug.

 

Anyway, I helped you fix your other problems but perhaps someone else will help you with this one. Good luck.

The problem lays in the way IE6 caches the webpage. For those who are using IE6 and don't have a problem have cache turned off.

 

To solve this issue, I would recommend using php headers to tell IE6 that the content is not cache-able.

 

Or you could just do what I said in the very beginning, and that is to create separate css declartions for each bacground image and have php pull out the proper css class.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.