body background not working in IE6

[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/&gt;

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:

Code:

#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:

Code:

#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.

[Author]

Posts