Positioning divs, browser compatibility, doctype?

**cridley** · 05-02-2007 09:04 AM

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?

**toicontien** · 05-02-2007 10:20 AM

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";
}

**cridley** · 05-02-2007 10:39 AM

Thanks, that makes sense.

Thread: Positioning divs, browser compatibility, doctype?

Thread Tools

Display

Positioning divs, browser compatibility, doctype?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions