background image showing on FF not IE

background image

[skmbede]

Hi, i'm new here and think this is a great site...esp for newbies like me.

I have the css class that has a background image. the image shows in FireFox but does not on IE7.
Please help, i'd appreciate it very much.
Relevant css code:

/* styles for contact form */
#contactForm {
background-repeat: no-repeat;
width: 580px;
background-image: url(../images/smokeSignal.jpg);
}
#name, #email, #phone {
width: 200px;
}
#message {
width: 300px;
height: 150px;
}
label, .warning {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
}
.warning {
color: #F00;
}

[SilverLining]

Hi there skmbede. Welcome to Webmaster World!

For backgrounds I generally use the following CSS;

background: url('../images/smokeSignal.jpg') transparent 0% 0% no-repeat;

This is a combination of (or short hand for)

backgound-image

,

background-color

,

background-position

and

background-repeat

. As far as I know it doesn't matter which order you use them in.

If that doesn't fix it, try specifying a height, if your situation allows.

[rocknbil]

Presuming that #contactForm is actually assigned

<form id="contactForm">

<div id="contactForm">

Either of those solutions should work fine, which leaves four good guesses:

Are you using a valid document type [webmasterworld.com]?

Does the page validate [validator.w3.org]? The slightest code error can cause IE 7 to choke.

Put a border on #contactForm - does the border appear as a single double-line at the top, or does it surround the entire area? If it's only a double border at the top, it's not "clearing" to the entire form area, you will need to use some method of forcing #contactForm to expand over the entire area (clearing div, float it with floated children, overflow:hidden, something.)

Lastly, if the styles are in the head of the page, ignore this. But if they styles are in an external style sheet, all versions of IE are temperamental in respect to reloading cached files,including CSS. Try clearing the cache - in IE7, this means just the files button, not "all."

[4css]

I'm not sure if this matters or not, but try going like this:
{
background-image: url(image file path);
background-repeat: no-repeat;
}
The reason why I am telling you to reverse this is because you are saying not to repeat something before you are stating what you don't want repeated.

Some css rules do need to be in a certain order, yet, I'm not sure if this is one of them. (its been a while since I have been around ;) )