PDA

Click to See Complete Forum and Search --> : 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.

<!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:

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.