Background-image problem

[alvinchipmunk]

Hi,
i'm just starting out with CSS and i nevertheless managed to create a site in DW that worked fairly well on mac and pc, with a few things i will iron out soon...
i uploaded the site and have discovered that that old background image issue seems to apply to me too...

So far i've tried a few potential solutions, which haven't worked, unfortunately:
- changing background... to background-image
- adding "" to the img url
- verifying that that paths were correct
- removing the ../ paths to ensure document relative-ness
- going to Tim Horton's for iced cappuccino and cookies

here is the link to my pg in progress:
www.oise.utoronto.ca/crefo
as well as my CSS (forgive the redundancy -- still working this out)
THANK YOU so much for any suggestions you might have!!!

/* CSS pour site web du CREFO */

body {
	width: 750px;
	margin-left: 5%;
	margin-right:5%;
	padding: 5px;
	background: white;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 11px;

}

#container {
	margin-left:auto;
	margin-right:auto;
	}

#entete {
	text-align:right
}

#recherche {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 9px;
	color: #663300;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #666600;
	border-right-color: #666600;
	border-bottom-color: #666600;
	border-left-color: #666600;
	margin:5px;
	top: 20px;

}


#contenu {
	background-image:url(../images/collage-CREFO.gif);
	background-repeat:no-repeat;
	height:200px;
	text-align:right;

}

#precontenu {
	background-image:url(../images/bannierepagesint.gif);
	background-repeat:no-repeat;
	height:121px;
	text-align:right;

}


dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	position:absolute
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666633;
	text-align: center;
	z-index:100;
	width:96%;
}

#menu dl {
float: left;
width: 25%;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: normal;
	background: #E2E2C2;
	height: 26px;
	border: 1px #999966;

}

#menu dd {
display: none;
border: 1px solid #CBCBB1;
}

#menu li {
	text-align: center;
	background: #E2E2C2;
}

#menu li a, #menu dt a {
color: #666633;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
	background: #999966;
	color:#660000}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}

#menuinterieur {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666633;
	text-align: center;
	z-index:100;
	width:100%;
}

#menuinterieur dl {
float: left;
width:25%;
}

#menuinterieur dt {
	cursor: pointer;
	text-align: center;
	font-weight: normal;
	background: #E2E2C2;
	height: inherit;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #999966;
	border-right-color: #999966;
	border-bottom-color: #999966;
	border-left-color: #999966;
}

#menuinterieur dd {
display: none;
border: 1px solid #CBCBB1;
}

#menuinterieur li {
	text-align: center;
	background: #E2E2C2;
}

#menuinterieur li a, #menu dt a {
color: #666633;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menuinterieur li a:hover, #menu dt a:hover {
	background-color: #999966;
	color:#660000}


#boite1 {
	float:left;
	}

#boite2 {
	float:left;
	padding-left:250;
	padding-top:-250px;
	}

#boite3 {
	float:left;
	padding-left:500;
	padding-top:-250px;
	}

#bas {
	top:600px;
}


#banniere {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 11px;
	width: 750px;
	height: 180px;
	background-image:url(../images/bannierefondmenu.gif);
	background-repeat:no-repeat;
}

#text {
	top:400px;
	}

ol {
	list-style-type: upper-roman;
	list-style-position: outside;
}

.small {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
}

.big {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.bodystyle {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}


.box1 {
	padding: 3px;
	border-width: thin;
	border-style: solid;
	border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
	border-width: 3px;
	border-style: solid;
	padding: 5px;
}


.chocolat {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 11px;
	background-color:#DAD8AD;
	color: #666633;
	margin-right: 10px;
	margin-left: 10px;

}


.crefoentete2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 11px;
	border-color: #CCCC99;
	background-image:url(../images/bannierepagesint.gif);
	background-repeat:no-repeat;
}

.contenu {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 11px;
	width: 220px;
	margin: 10px;
	padding: 10px;
	border: thin solid #CCCC99;
}


.gradue {
	filter: Alpha(Opacity=80, FinishOpacity=20);
}

.recherche {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 9px;
	background-color:#DAD8AD;
	color: #663300;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #666600;
	border-right-color: #666600;
	border-bottom-color: #666600;
	border-left-color: #666600;
	margin:5px;

}


.tableau {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
	font-size: 11px;
	background-color:#FFFFF3;
	width: 200px;
	height:300px;
	padding: 10px;
	margin: 10px;
	font-weight: normal;
	border: 1px solid #CCCC99;
	list-style-type: disc;
	list-style-image: url(dis);
	color: #666633;
}


a:link {
	color: #CC6633;
}
a:visited {
	color: #CC6633;
}
a:hover {
	color: #CC6633;
}
a:active {
	color: #CC6633;
}

- i also noticed that some people had tried changing the DOC version to Strict from Transitional... not sure what the difference is... will read more...

p.s. This is a beautiful site! Thank you so much for creating and maintaining it!! Congratulations on the accomplishment!

[Jen]

alvinchipmunk: First I'd like to say Welcome to WLC, glad you have found us! I moved your existing post to new thread. Next time please create new thread, thank you.

[WebMistress]

Your path to the images is incorrect.

I put the following into my browser to see the image you are trying to use and it came back "not found: http://www.oise.utoronto.ca/crefo/im...lage-CREFO.gif

Same thing for the other image you're trying to use for a background.

In your css when I took out the path completely and just referecned the image, it showed up on the page:
#contenu {
background-image:url(collage-CREFO.gif);
background-repeat:no-repeat;
height:200px;
text-align:right;

Check your path and your folder structure on your host to be sure it's exactly the way it is on your development machine.

[alvinchipmunk]

Thank you very much, Designgraphy, for moving my message to a new thread - much better.

Thank you very much WebMistress for your feedback! I sincerely appreciate you taking the time out to look into this!

Well, I updated the image file paths as you have suggested but this did not work.

In trying to puzzle through other possible reasons why the background images do not display, i have considered:
- the body background color overrides the CSS?
- the image folders' permissions block visibility somehow?

CSS appears to be applied correctly in other <div>s without images, so the stylesheet is being accessed and read...

I will try to upload the files to another server to see what happens...

[alvinchipmunk]

... oh, one more thing that makes me think that this is a CSS issue with my code rather than a server issue: one image (the logo in the top right-hand corner) DOES appear while the other images residing in <div> tags don't appear... why would this be?

[WebMistress]

Ok, I went and re-created your apparent site structure with a separate folder for images and one for css.

This works in both IE 6 and FF

#contenu {

height: 200px;
text-align: right;
background: url(../images/collage-CREFO.gif) no-repeat;
}

#banniere {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633;
font-size: 11px;
width: 750px;
height: 180px;
background-image: url(../images/bannierefondmenu.gif);
}

Do a little shorthand. Instead of this:

#rechercheint {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, #666633; (this is incorrect)
font-size: 9px;
color: #663300;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #666600;
border-right-color: #666600;
border-bottom-color: #666600;
border-left-color: #666600;
margin:5px;
top: 10px;

}

Write it this way:

#rechercheint {
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #663300;
border: 1px solid #666600;
margin:5px;
top: 10px;

}

[funkyprem]

Originally Posted by alvinchipmunk

So far i've tried a few potential solutions, which haven't worked, unfortunately:
...
- going to Tim Horton's for iced cappuccino and cookies

There's your problem chap... having an iced cappuccino! Bleurgh!!!

[Fix Johnson]

Very nice looking site

Roger Frost