8 replies [Last post]
jeff_way
jeff_way's picture
Offline
Enthusiast
Nashville
Last seen: 12 years 25 weeks ago
Nashville
Timezone: GMT-5
Joined: 2007-05-07
Posts: 137
Points: 0

I'm baffled with a site that I'm working on. I have a standard 100px background that I've placed in my html element with a repeat. It works perfectly fine in Firefox, Netscape, and Opera. ...But in IE6/7, it doesn't show up.

My HTML and CSS validate....so what is the problem. Any ideas?

Visit: www.detacheddesigns.com

-Jeffrey Way | My Blog

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Moving the image to the body

Moving the image to the body will probably fix it. As to why it's happening, it could be that:

a) IE doesn't like bg-images on HTML
b) it does accept images on HTML but not with transitional doctypes
c) or because there's extra characters at the beginning of your stylesheet that could be causing problems

They're all just guesses.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jeff_way
jeff_way's picture
Offline
Enthusiast
Nashville
Last seen: 12 years 25 weeks ago
Nashville
Timezone: GMT-5
Joined: 2007-05-07
Posts: 137
Points: 0

Unfortunately, that didn't

Unfortunately, that didn't fix it. I've never had a problem with IE backgrounds before...I have no idea what the problem is now.

-Jeffrey Way | My Blog

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 7 min ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The background is the same

The background is the same in both FF and IE7 from my work machine.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jeff_way
jeff_way's picture
Offline
Enthusiast
Nashville
Last seen: 12 years 25 weeks ago
Nashville
Timezone: GMT-5
Joined: 2007-05-07
Posts: 137
Points: 0

...Strange. Do you have

...Strange. Do you have Firefox 1 ...or 2 installed?

The correct background should be a brown gradiant with a green stripe running through the middle.

-Jeffrey Way | My Blog

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 7 min ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

jeff_way wrote:...Strange.

jeff_way wrote:
...Strange. Do you have Firefox 1 ...or 2 installed?

The correct background should be a brown gradiant with a green stripe running through the middle.

Oh you mean the horizontal green stripe at the top. Nope, don't see that in IE7.

.. but I could be wrong.

Ed Seedhouse

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 4 years 45 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Hi Jeff,

Hi Jeff,
I had a bit of a play with your site and got the image working in IE7.

All I did was put a space between the url address and the 'repeat-x top left' and it worked - don't ask me why it didn't work as it was. Old IE is a sensitive beast.

Anyway the updated code looks like this:

body
{
background: url(http://www.detacheddesigns.com/img/background.jpg) repeat-x top left;
background-color: #1b0e00;
margin: 0;
padding: 0;
font-family: Georgia, Times New Roman;
font-size: 1em;
}

Life's a journey. Enjoy the trip.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Rob has it right, there has

Rob has it right, there has to be a space between the closing ')' and the following property value, otherwise IE will trip up, it's a bug that rears up elswhere as well, if you do not leave a space between a pseudo class and opening '{' IE6 will skip the ruleset.

This is why it's best practise to always set spaces which the specs say you can do or not so for readability and IE it's best to set spaces.

selector:hover{background url()no-repeat;} should work but written as :
selector:hover {background url() no-repeat;} is safest and clearer.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jeff_way
jeff_way's picture
Offline
Enthusiast
Nashville
Last seen: 12 years 25 weeks ago
Nashville
Timezone: GMT-5
Joined: 2007-05-07
Posts: 137
Points: 0

Thanks!

Thanks, guys. I don't know if I would have figured that out. I spent hours last night trying to figure that out. It is so irritating how the answer is always something as random as adding a space. Either way...it is a good tip for the future. Thanks, again! I appreciate your help.

-Jeffrey Way | My Blog