SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Background Image doesn't display in IE 6 (or below i assume) but does in every other

    Hi all,

    Can IE 6 interpret css such as this correctly: #div.class{blah:blah;} ?

    It doesn't seem to want to play. Firefox, IE 7 and Opera 9 works as should.

    I have a div which has an ID and a class and I want to set backgrounds to the div depending on the class of the div. The 'content' and 'content-bottom' divs have the same repeating and bottom image, respectively

    html:
    <div id="content">
    <div id="content-top" class="home" >
    <div id="content-bottom">
    <p> some content etc...</p>
    </div>
    </div>
    </div>

    i have a home page, about page etc, all with a different image and a different class applied.
    here is the css:

    #content {
    float: right;
    width: 530px;
    background-color: #FFFFFF;
    margin-right: 20px;
    margin-bottom: 10px;
    padding: 0px;
    background-image: url(../images/graphics/content-bg/content-repeat.gif);
    background-repeat: repeat-y;
    display:inline; /*fixes ie6 and below double margin bug*/
    }
    #content-top {
    padding-top: 85px;
    background-repeat:no-repeat;
    background-position: left top;
    }
    #content-top.home { /*Classes to change image at top of page, depending on page type */
    background-image: url(../images/graphics/content-h-pics/content-top-home.jpg);
    }
    #content-top.about {
    background-image: url(../images/graphics/content-h-pics/content-top-about.jpg);
    }
    #content-bottom {
    background-image: url(../images/graphics/content-bg/content-bottom.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding: 5px;
    }

    I've got another 6 or so variants but you get the idea

    The weird thing is it displays correctly on the home page but not the others.

    Any ideas please?!

    Dave

  2. #2
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks.

    but I need an ID and a class... will this still work....?

    Ive done the same as I already have but changed #content-top.about{}

    to #content .about {}

    IE seems to like this, but obviously anything now in #content (including #content-top) with the class .about will be given the background image. I only want the div to have the background and thought my original method was the correct way of specifying where the background should be applied?.. Is this an IE 6 problem or have I coded incorrectly?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •