Question

I recently added a tiny bit of jquery to a website to fix a rendering bug in IE7. Unfortunately for some reason this tiny show script broke some divs on the bottom and I can’t for the life of me figure out why. I’ve already spent too many hours playing messing around with it, making sure divs are aligned properly, etc.

Could anyone tell me why this script would change the way my code is displayed?

<script type='text/javascript'>
$(document).ready(function() { $('#hide').show() })
</script>

Below are links to versions with the hide and without the hide so you can see what I’m talking about, along with all the code.

http://alecsanger.com/shipcarsnow/index_nohide.html

http://alecsanger.com/shipcarsnow/index.html

If anyone has any clues as to how I could fix this, I would greatly appreciate a push in the right direction.

Thank you.

Answer 1

your widgets are getting set to height 0px, the script that adds them must be looking at container height, and display none is effectively height 0px width 0px;

$('.widget').height(120) after the .show() should fix it.

Moving main.js below $(document).ready(function() { $('#hide').show() }) might do the trick too.