Forums

jbope

Works in IE 7 but in IE 6 the "content" section does not show the background. Also, the menus don't respond the same either. Been working on this quite a while and just can't seem to get it. When I fix one problem it always creates another. I am hoping one of you experienced types can give me a clue. Thanks in advance.

Site is at <http://projects.drewpearceonline.com/AOC/>

JB

pab

try replacing background with background-image since yu are calling the rest of it like that,

background:url(images/bgtile.jpg);
background-color:#000;
background-repeat:repeat-x;
color:#666;
font-family:Helvetica, Verdana, Arial, sans-serif;

or do

background:url(images/bgtile.jpg) repeat-x #000;

let me know if that fixes it. sometimes ie needs to have everything declared separately same for font declaration.

Hope it helps you out.

cssgirl

Here's why I think that your content area isn't showing:

#content {
background:transparent url(images/content-bg.jpg) repeat-y scroll 0 0;
height:auto;
left:12px;
margin:0 auto;
position:absolute;
top:287px;
width:1000px;
z-index:1;
}

you have already positioned you entire content to be centered with your "#container" styles - so here you will not have to again tell the content to be centered. You also have this positioned absolutely with the height set to auto - which I think IE6 has problems with.

Working with the web developer toolbar I played with your CSS and changed the following to this:

#content
{
	width:1000px;
	float:left;
        margin-top:250px;
	background:url(images/content-bg.jpg);
	background-repeat:repeat-y;
clear:both;
margin-lefT:15px;
}

#content-top
{
	height:175px;
	width:870px;
	float:left
	clear:both;
margin-top:20px;
}

#content-bottom
{
	height:175px;
	width:870px;
	float:left;
	clear:both;
}

#homecontent1
{
	height:158px;
	width:525px;
	padding-left:17px;
	float:left;
	clear:left;
}

#homecontent1 p
{
	padding-right:25px;
	padding-top:20px;
	font-size:1.6em;
}

#homecontent2
{
	height:158px;
	width:151px;
	padding-left:13px;
float:left;
	clear:none;
}

#homecontent3
{
	height:158px;
	width:151px;
floaT:left;
	padding-left:13px;
	clear:right;
}

#homecontent4
{
	height:145px;
	width:705px;
floaT:left;
	background-image:url(images/round705.gif);
	clear:left;
}

Now, I can't tell if that fixes everything in IE, since this is Firefox plugin - but it replicated your content in FF. I'm pretty sure this will fix your issue with the background in IE6.

Can't hurt to try ;P It may screw up some stuff, but a few minor adjustments should be enough to fix.

I'm sorry I don't have time to check out the menu issue right now - but one recommendation is to find a javascript that allows your flash content to automatically play because in IE6 I got 3-4 warning asking if I wanted to play the content before I could even view the site.

treehouse : what would you like to learn today?

Forums

body background not working in IE6