Images in CSS Not Showing In IE (But fine in Chrome)

**GameForAdult** · 05-21-2013, 05:28 PM

IE sucks

I see no images on IE and FF, there are non!?

maybe another URL ?

**sarettah** · 05-21-2013, 06:07 PM

Originally posted by GameForAdult

IE sucks

I see no images on IE and FF, there are non!?

maybe another URL ?

Yeah, I see the same presentation in all 3 browsers also. Only image is a big ass background image that is taking a long time to load.

Here is what I am seeing:

IE:

FF:

Chrome:

Hope that helps.

.

**sarettah** · 05-21-2013, 06:20 PM

Btw, your background image bg98.png is 1.25MB, that is way too big. You need to knock that down a whole bunch. If you ever get a bunch of traffic you will be paying for a bunch of bandwidth that does nothing for you. Plus it is slowing your page load way the hell down.

You need to get those pages to just pop into place.

If you feel you must keep that image then optimize it as a jpg. Doing it on a medium setting you can knock it down to 55k or so. The PNG is doing nothing for you (imho).

On that background image you have text which is hidden by the rest of your page. That again makes the image bigger (storage wise) and the text is doing nothing for you.

My opinion, kill the background image completely. You will get a much better page load. You have a couple of seconds max to grab someones attention on the net, if they spend that time waiting for your page to load you have lost them.

I did a test in IE and I did a slow count to 7 before the background image showed in the browser. Wasted time.

Just imho, of course.

Hope that helps.

.

**sarettah** · 05-21-2013, 06:26 PM

This is the image you have as the background, al 1.25 MB of it:

This is the same image optimized as a jpg at around 60kb:

Do you see any noticeable difference that would warrant using the png image which is taking 19 times more space and bandwith?

.

**sarettah** · 05-21-2013, 07:20 PM

never mind

.

**Tent Pitcher** · 05-21-2013, 08:23 PM

Originally posted by amanda36c

I just don't understand, for the life of me, why the images are showing up fine in Chrome but not in IE.

I want to make my site browser-friendly (and yes, unfortunately, that means IE-friendly as well). So, can anyone have a look and tell me how to get IE to display the images, loike Chrome is doing. This tells me it's not the path that is the problem. What is, then?

Layman's terms, please. I'm really super new to css.

Thanks for any help.

camgirlclubs.com/CamGirl%20Clubs/index.html

You seem to have some conflicting directives in your CSS, one of which is likely confusing IE (it isn't hard to do). I see what you are trying to do with the background image here:

Code:

background-clip: border-box, border-box, border-box;
background-color: #FFFDEA;
background-image: url("images/img01.jpg"), url("images/bg98.png"), none;
background-origin: padding-box, padding-box, padding-box;
background-position: 0 0%, 0 0%, 0 0;
background-repeat: repeat-x, no-repeat, repeat;
background-size: auto auto, cover;

But this is the way I would do it (and I am using exactly this on some sites that work across all browsers):

Code:

background-image: url("images/img01.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

Several of your directives specify multiple definitions (like background-image: url("images/img01.jpg"), url("images/bg98.png"), none;)...that is CSS3 which is not fully supported or supported at all depending on the browser that you are using.

**amanda36c** · 05-22-2013, 09:35 AM

Originally posted by GameForAdult

IE sucks

I see no images on IE and FF, there are non!?

maybe another URL ?

That's really odd. Besudes myself of course, you're the only one (of dozens that have responded here and on Twitter) who doesn't see the images or bg. Hmmm.

Thanks for your feedback. I'll figure this out, eventually. I think. I hope.

**amanda36c** · 05-22-2013, 09:40 AM

Originally posted by sarettah

This is the image you have as the background, al 1.25 MB of it:

Do you see any noticeable difference that would warrant using the png image which is taking 19 times more space and bandwith?

.

It won't let me quote you because there are urls in your post and me being a newbie, am not yet old enough to post urls. lol Oh c'mon GFY!!! Anyway ...

I didn't know it was the background that was taking the page so long to load. I do much prefer the png output over any jpeg, so perhaps I'll cut the image in half, use just the left half, fading to black so that on the right side, you can't tell it isn't part of the image, rather just a plain black background.

Thanks so much for your help. Really appreciate it.

**amanda36c** · 05-22-2013, 09:44 AM

Originally posted by Tent Pitcher

You seem to have some conflicting directives in your CSS, one of which is likely confusing IE (it isn't hard to do). I see what you are trying to do with the background image here:

Code:

background-clip: border-box, border-box, border-box;
background-color: #FFFDEA;
background-image: url("images/img01.jpg"), url("images/bg98.png"), none;
background-origin: padding-box, padding-box, padding-box;
background-position: 0 0%, 0 0%, 0 0;
background-repeat: repeat-x, no-repeat, repeat;
background-size: auto auto, cover;

But this is the way I would do it (and I am using exactly this on some sites that work across all browsers):

Code:

background-image: url("images/img01.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

Several of your directives specify multiple definitions (like background-image: url("images/img01.jpg"), url("images/bg98.png"), none;)...that is CSS3 which is not fully supported or supported at all depending on the browser that you are using.

Now I'm terrified to change the css. I've done it 30x too many and well, you see what happened! lol Lemma try what you suggested and maybe I'll get lucky. Thanks for your help.

**sarettah** · 05-22-2013, 10:26 AM

Originally posted by amanda36c

Now I'm terrified to change the css. I've done it 30x too many and well, you see what happened! lol Lemma try what you suggested and maybe I'll get lucky. Thanks for your help.

I you are not doing it already, when you go to change your css make a quick backup copy of your current css so that if you get lost you can start your trip over easily.

.

**amanda36c** · 05-27-2013, 10:19 AM

Originally posted by sarettah

I you are not doing it already, when you go to change your css make a quick backup copy of your current css so that if you get lost you can start your trip over easily.

.

Always make backups. I make backups of backups! lol Thanks for your advice above, Very helpful. I'm going with an entirely different template though which has a small area in the top left corner for a background image, which will definitely cut down the download time.

3 more posts till I'm at 30 and can post a url

**CPA-Rush** · 05-27-2013, 02:12 PM

why u have space on ur url ?. this can break ur links

css can be tricky at first sexy girl lol it's not as easy as it seem to be

u can look at my website i have been trying to get full width footer but no luck ,

**amanda36c** · 05-27-2013, 03:51 PM

Originally posted by rosx

why u have space on ur url ?. this can break ur links

css can be tricky at first sexy girl lol it's not as easy as it seem to be

u can look at my website i have been trying to get full width footer but no luck ,

What do you mean "'space on my url"? Are you referring to this page? http://camgirlclubs.com

**CPA-Rush** · 05-27-2013, 03:59 PM

no i mean the directory "CamGirl%20Clubs/"

**sarettah** · 05-27-2013, 05:56 PM

Originally posted by rosx

no i mean the directory "CamGirl%20Clubs/"

Yeah, the %20 indicates a space. You should never have spaces in urls or filenames even though systems will let you. It can screw some programs up.

Originally posted by amanda36c

Thanks for your advice above, Very helpful.

You are quite welcome.

.

**CPA-Rush** · 05-27-2013, 07:52 PM

its standard on web that links sent over http use ASCII characters mostly . urls shouldn't contain spaces
in your case javascript probably encode it for u because its not acceptable to have spaces

**amanda36c** · 05-27-2013, 09:42 PM

Thanks guys but this page was very temporary. The site itself doesn't have 'spaces' or funky characters. It's actually fine. That was just to show everyone what the site would look like. I've decided to go with this instead http://camgirlclubs.com --- without spaces. Thanks a bunch for your help everyone. You guys are great!

Images in CSS Not Showing In IE (But fine in Chrome)

Images in CSS Not Showing In IE (But fine in Chrome)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment