Grow your CSS skills. Land your dream job.

body background not working in IE6

  • # October 14, 2008 at 8:12 pm

    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
    # October 14, 2008 at 8:23 pm

    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.

    # October 15, 2008 at 1:11 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".