Jquery hide/show ruins my divs?

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开发者_Go百科 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.

---

You shouldn't use jQuery for this solution. Conditional commenting with an additional stylesheet to solve your IE7 issues is a better solution.

Make a new stylesheet that contains the css that fixes this problem just in IE7. Then, place it into a file called ie-7-fix.css and add this code to your HTML:

<!--[if lte IE 7]>
<link href="css/ie-7-fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

---

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.

---

Using Firebug I can see that the "working" page defines the divs in the widgetWrap div as having height 120px. Some JavaScript is injecting

style="height: 120px;"

into each of those widget divs.

In the "broken" page the same JavaScript is injecting

style="height: 0px;"

which results in the overlapping text you see. Now which JavaScript is doing this I don't know, but I'm guessing it's because the body style in the broken page defines a style of display:none.

---

The equalheight manipulations you are doing are running against hidden elements, so the heights are all being set to 0.