Collapsable panel css position/browser compatibility

Question

i have browser position problem in my code.it displays well on firefox.but on explorer content div displays under the panel div.pls help me to fix this error.

and this is css code

<style>
#colleft   { width:175px;float:left; overflow:hidden; background:#333;}
#showPanel { position:inherit; z-index:2; left:0; float:left; padding-top:40px; display:none; width:0px; height:100px; cursor:pointer;}
#showPanel span{display:block; font-size:24px; height:30px; margin-top:20px; padding:10px 0 10px 10px; width:20px; background: #333;}
#colright {color:#1c1c1c; margin-left:175px}
</style>

and this my jquery code

<script type="text/javascript">
jQuery(document).ready(function(){
 $("#hidePanel").click(function(){
 $("#panel").animate({marginLeft:"-175px"}, 0 );
 $("#colleft").animate({width:"0px", opacity:0}, 0 );
 $("#showPanel").show("normal").animate({width:"0px", opacity:1}, 0);
 $("#colright").animate({marginLeft:"0px"}, 0);
 });
 $("#showPanel").click(function(){
 $("#colright").animate({marginLeft:"0px"}, 0);
 $("#panel").animate({marginLeft:"0px"}, 0 );
 $("#colleft").animate({width:"175px", opacity:1}, 400 );
 $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");
 });
});
</script>

html code

   <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999">
      <tr>
        <td><h1>HEADER GOES HERE</h1></td>
      </tr>
      <tr>
        <td><div id="colleft">
      <div id="panel">
      <h1>My Panel</h1>
      <ul>
        <li>item #1</li>
        <li>item #2</li>
        <li>item #3</li>
        <li>item #4</li>
      </ul>
      <div id="hidePanel"><a href="#">&laquo; Hide Panel</a></div>
      </div>
      </div>
      <div id="showPanel"><span>&raquo;</span></div>  <div id="colright">
        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#0066CC">
          <tr>
            <td>content div</td></tr>
        </table></div></td>
      </tr>
      <tr>
        <td><h4>Footer goes here</</td>
      </tr>
    </table>

score 0 · Answer 1 · answered Jun 15 '12 at 07:04

0

The hidePanel DIV is inside the panel DIV, but the showPanel DIV is outside the panel DIV. Are you certain this is correct?

answered Jun 15 '12 at 07:04

Dirk de Man

657
3
9

yes.it is.it workd well on firefox.when i click on hide panel link the content page goes down on explorer...that's my prob.. – DAM_86 Jun 15 '12 at 07:11
What version IE are you running? I'm on IE7 and it seems fine here. – Dirk de Man Jun 15 '12 at 07:37

score 0 · Answer 2 · answered Jun 15 '12 at 09:11

Can you elaborate on what it is that's not working the way you want it to be? The margins in the javascript are not really consistent with each other, if you change it to this:

<script type="text/javascript">
            jQuery(document).ready(function(){  
                $("#hidePanel").click(function(){  
                    $("#panel").animate({marginLeft:"-175px"}, 500 );  
                    $("#colleft").animate({width:"0px", opacity:0}, 400 );  
                    $("#showPanel").show("normal").animate({width:"28px", opacity:1}, 200);  
                    $("#colright").animate({marginLeft:"50px"}, 500);  });  
                    $("#showPanel").click(function(){  
                    $("#colright").animate({marginLeft:"200px"}, 200);  
                    $("#panel").animate({marginLeft:"0px"}, 400 );  
                    $("#colleft").animate({width:"175px", opacity:1}, 400 );  
                    $("#showPanel").animate({width:"0px", opacity:0}, 600).hide("slow");  
                }); 
            }); 
    </script>

You have a little button on the side, and if you click it the content in the panel moves in from the left, pushing the content in the panel right to the right.

On an unrelated note, I also noted that you're using tables to separate the header, content and footer. It won't help you with this issue, but it's considered bad practice. It's better to seperate them with CSS.

@ Dirk de Man Thank you for ur response Dirk.will check ur solution soon. and that table using thing, yea i knw it is not a good practice.but im not that much familiar with CSS.still learning. — DAM_86, Jun 15 '12 at 09:38

Collapsable panel css position/browser compatibility

2 Answers2