[SOLVED] Non show in IE7, hidden class change

[laPistola]

Hello

 

I have this problem with a class change script. basicly on page load there is hidden sections under there building names and when you click a link javascript changes the class name to reveal what was hidden onload which is a div that contants a table that lists units available in the building

 

see http://www.units-to-let.co.uk/searchResults.php?pc=NG6+0EB

 

the first listing Testing 2 click the link "Click here to view units" and see what i mean, it works fine in IE8, firefox and other browers but not IE7 (strange thing is when i clicked print preview in IE7 it shown what it wasnt showing on the webpage in the print preview)

 

To make things easier below is the code.

 

CSS

.hiddenToU {
visibility: hidden;
height: 0px;
}

 

JS

<script type="text/javascript">
<!--
function hideReveal(id) {
var getDir = document.getElementById(id).className;
if(getDir=='hiddenToU') {
	document.getElementById(id).className = "";
} else {
	document.getElementById(id).className = "hiddenToU";
}
}
//-->
</script>

 

HTML

<div id="<?php echo $row_buildingsRS['bid']; ?>" class="hiddenToU">
                <table width="330" border="0" style="margin-left:42px;border:1px dashed #2C5380;">
                  <tr>
                    <th width="74" align="center"> </th>
                    <th width="49" align="center" bgcolor="#2C5380">Unit</th>
                    <th width="110" align="center" bgcolor="#2C5380">Size</th>
                    <th width="80" align="center" bgcolor="#2C5380">Rent</th>
                  </tr>
                  <?php 
                $bid = $row_buildingsRS['bid'];
                echo getUnits($database_utl, $utl, $bid); ?>
                </table>
               </div>

 

If i remove the height:0; from the CSS it shows what it should do on screen in IE7 but you get the large gaps between names where the hidden data should be when hidden which looks messy and is the reason i put height:0; in

 

Any help would be great thank you.

[KevinM1]

So what's the problem, specifically?  The only difference I can see in IE7 is the lack of dashed border.

[laPistola]

Once you click the link to open up what units are in the building buy pressing the "Click here to view units" javascript changes the class of the hidden div so it reveals what units are available in that business building, in IE7 when you click it makes the space for the hidden data but don't display it.

[laPistola]

So what's the problem, specifically?  The only difference I can see in IE7 is the lack of dashed border.

 

So image one is how it looks in IE7 while the units data are hidden before you click to view more units

 

This is what it looks like when you click view units

 

This is what it should look like and is working on FF3, IE8 and others

 

hope this helps more

[KevinM1]

Quick fix for your function.  Try:

 

function hideReveal(id) {
   var myDiv = document.getElementById('id');

   myDiv.className = (myDiv.className == "hiddenToU") ? "" : "hiddenToU";
}

[laPistola]

Quick fix for your function.  Try:

 

function hideReveal(id) {
   var myDiv = document.getElementById('id');

   myDiv.className = (myDiv.className == "hiddenToU") ? "" : "hiddenToU";
}

 

Thank you but this just did the same as my code, just what the images show

[laPistola]

Thinking about it this is probably more a CSS issue, if a mod would kindly move this thread to the css section i would be greatful

 

Thank you

[ngreenwood6]

Im not sure if the issue is that by not setting it a class it is keeping the same one or what...but you could try creating a class with the visibility set to visible and instead of assigning it "" assign it the visible class.

[laPistola]

Thank you, have tried that but no luck, im 100% sure it has something to do with the css rule height.

 

I set the height to 0px so it don't leave the spaces between buildings names but if i don't use the height rule at all in the hiddenToU class it works fine other then leaving the space where the div/table should be which looks messy.

 

On reveal i cant specify a height for it to then use as each building will have a different amount of units under it.

[laPistola]

further more i have just put some text inside the div that gets hidden but not in the table and this shows fine??

[laPistola]

after looking around the net for a work around it came to my attention that its a bug in IE and a work around was to use span tags around all the table cells and use some display css, as that wasn't a fix for me it gave me an idea though

 

CSS

.hiddenToU {
position:absolute;
left:-30000px;
}
.revealToU {
visibility:visible;
}

 

Thank you for any help