www.webdeveloper.com
Results 1 to 3 of 3

Thread: Positioning divs, browser compatibility, doctype?

  1. #1
    Join Date
    Jun 2006
    Posts
    384

    Positioning divs, browser compatibility, doctype?

    Hi All,

    The following (pretty basic) html/js works differently in ie7/ff than it does in ie6. I'm after getting it to work as it does in ie6 accross all the aforementioned browsers. The Doctype affects its behaviour.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <script language='javascript'>
    function Expand()
    {
    	var oDiv = document.getElementById("script_summary");
    	
    	oDiv.style.visibility = (oDiv.style.visibility == "visible")?"hidden":"visible";
    	oDiv.style.overflow   = (oDiv.style.overflow == "visible")?"hidden":"visible";
    }
    </script>
    </head>
    <body>
    
    	<a href='javascript:Expand()'><b><u>Click me to expand table :</u></b></a>
    	<br/>
    	
    	<br/>
    	<div id="script_summary" style="visibility:hidden; overflow:hidden; height:0px; border:thick #FF0000">
    	<table class="script_summary" border="0"  cellspacing="1" >
    	<th align="left">Col 1</th>
    	<th align="left">Col 2</th>
    	<th align="left">Col 3</th>
    	<th align="left">Col4</th>
    	<tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
    	<tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
    	<tr><td>31</td><td>32</td><td>33</td><td>34</td></tr>
    	</table>
    </div>
    <div>
    <table border="1" align='center' width='100%' cellpadding="0" cellspacing="0">
        <tr><td valign='middle' align='center' class='head'>
                Another Table
            </td>
        </tr>
    </table> 
    <div>
    </body>
    </html>
    Any ideas?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Internet Explorer 5 and 6 on Windows has a bug where it expands a box if its contents are too large. That's why it's "working" in IE6 but "not working" in IE7 and Firefox. In fact, IE7 and Firefox are working, and IE6 is not.

    The height of that DIV is 0 pixels. In Firefox and IE7, it respects that height. IE6 expands the DIV even though its height is 0. Add this line to your Expand() function:

    Code:
    function Expand()
    {
    	var oDiv = document.getElementById("script_summary");
    	
    	oDiv.style.visibility = (oDiv.style.visibility == "visible")?"hidden":"visible";
    	oDiv.style.height = (oDiv.style.height === "0px")?"":"0px";
    	oDiv.style.overflow   = (oDiv.style.overflow == "visible")?"hidden":"visible";
    }

  3. #3
    Join Date
    Jun 2006
    Posts
    384
    Thanks, that makes sense.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles