ansaurus

Question

Answer 1

+1 A:

The problem lies in your use of position: absolute for the bottom edge image, which IE7 seems to be messing up.

I think the best approach would be to simplify things a bit. For the main background, I would use a 1px high image which repeats vertically, that way you are flexible in the amount of content you can put in here, and you can do away with absolutely positioning the bottom edge image. With this approach, the bottom edge image will just sit at the bottom of the middle content, regardless of whether it is expanded or contracted.

The following should help (I've used red for the background of the middle content in place of the 1px high image to illustrate the fix - you'll need to create the image and put that in in place of the red).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html>

<!--

  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/ugaza/edit

-->

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

    <script type="text/javascript">

    $(document).ready(function() {
        $(".toggle_container").hide();

        $("span.trigger").click(function(){
         $(".toggle_container").slideToggle("slow");
        });
    });

</script>

<style type="text/css">

div#prog { width:250px; background: red; margin:0 auto; }
div#prog img { margin:0; padding:0; border:0; display: block; }
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px; }
div#prog img#prog_dots { margin: 10px 0; }
span.trigger { width: 100%;}
.toggle_container .block { padding: 5px; }
.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;}
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;}

</style>
</head>

<body>

<div id="prog">
    <img src="http://imgur.com/po7R1.gif"/&gt;
    <div id="prog_mid">
        <h1>Phase 1</h1>
     <span class="trigger"><a href="#">CLICK HERE</a></span>
        <img id="prog_dots" src="http://imgur.com/anDNd.gif"/&gt;

         <div class="toggle_container">
          <div class="block">
           <ul>
            <li><a href="">list item 1</a></li>
            <li><a href="">list item 2</a></li>
            <li><a href="">list item 3</a></li>
            <li><a href="">list item 4</a></li>
            <li><a href="">list item 5</a></li>
           </ul>
          </div>
         </div>

    </div>
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" />
</div>

</body>

</html>

bbodien 2009-07-17 20:10:44

It worked! Many thanks.

2009-07-20 16:34:34

ansaurus

tags:

views:

answers:

jQuery slideToggle and div in IE

related questions