Clever Geek Handbook

IE background image display problem

I am creating a site for my church and I am having problems displaying it in IE. It seems that my "boxbox" div has its background position, overridden by "margin: 0 auto"; as background images are centered instead of right, which moves the site to the right.

Here's the code:

.sidebox {
margin: 0 auto;
background-image: url(images/bg-container-right.jpg);
background-repeat: no-repeat;
background-position: bottom right !important;
position: absolute;
left: 0px;
width: 960px;

}

.boxhead {
    background-image: url(images/bg-container-top.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    height: 37px;
}

.boxbody {
    background-image: url(images/bg-container-left.jpg);
    background-repeat: no-repeat;
    background-position: bottom left !important;
    width: 25px !important;
}

.boxtopcorner {
    background-image: url(images/bg-container-top-right.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    width: 25px;
    height: 37px;
}

<div class='sidebox' style='border: 1px solid;'>
I'm in the box
    <div class='boxhead'>
        <div class='boxtopcorner'></div>
    </div>
    <div class='boxbody' style='height: 750px;'>
        <!-- Content Goes Here -->
    </div>
</div>

Below is a link to the current site. You can see that it works fine in FF and Safari, but not IE. My code above is without content and removing it does not fix the problem. Current page

+1


source to share


2 answers


Looking at the IE developer toolbar it gives the .sidebox a center alignment. Changing this to the left seems to fix it.



.sidebox {
  ...
  text-align: left;
}
+1


source


I would use a completely different approach to how you slice the background image.

  • Create the top and bottom image for the rounded shadow. Use them as backgrounds for the top and bottom (as if it weren't obvious already).
  • Create a "long" 1px tall image for the shadow on both sides. Use this to background the entire content area for the page.
  • Try not to use absolute positioning. The same layout can be created using floats. For example:

.container {width: 960px; margin: 0 auto; }



.header { width: 960px; height: 20px; background: url(top.jpg) no-repeat; }

.footer { width: 960px; height: 20px; background: url(bottom.jpg) no-repeat; }

.body { width: 960px; background: url(body.jpg) repeat-y; }

<div class='container'>

  <div class='header'>&nbsp;</div>

  <div class='body'>

Content goes here ... use floats to create columns instead of absolute positioning.

  </div>

  <div class='footer'>&nbsp;</div>

</div>
+2


source






More articles:


All Articles