hide() causes spacing issues?

hide() causes spacing issues?

Hi all,
 
I've got a very simple page with some simple CSS and jquery script that shows and hides some fieldsets depending on what the user selects from a select list.
 
However, the distance between the fieldsets loses is consistency as soon as the call to hide() is made.  I've pasted my code below, as well as some screenshots of what I'm talking about.  In the sequence of pictures below, I'd expect the first and last pictures to look the same.
 
 
Any ideas on how to remedy this?  I validated the HTML and the CSS and they're both good.
 
Thanks,
 
    Don
 


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

        <head>
            <meta name="robots" content="noindex" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="-1" />
            <meta http-equiv="X-UA-Compatible" content="IE=8" />
           
            <title>Page Title</title>
            <script type="text/javascript" src="jquery-1.4.2.js"></script>
            <script type="text/javascript" src="jquery.ui.core.js"></script>
            <script type="text/javascript" src="jquery.ui.widget.js"></script>
           
            <style type="text/css">
                fieldset
                {
                    position:relative;
                    margin-top:1em;
                    margin-bottom:1em;
                    padding:4px 8px 9px 8px;
                    border:1px gray dotted;
                }
                fieldset legend
                {
                    font-weight:bold;
                    font-size:12px;
                    background-color:White;
                    margin-bottom: 5px;
                }
                .hidden
                {
                    display:none;
                }
            </style>
           
            <script type="text/javascript">
                // <![CDATA[
                    function Document_OnReady(event)
                    {
                        $("#TheSelect").change(TheSelect_OnChange);
                        $("#TheSelect").keyup(TheSelect_OnChange);
                    }
                   
                    var currentPersonFieldset;
                   
                    function TheSelect_OnChange()
                    {
                        switch($(this).val())
                        {
                        case "One":
                            {
                                $("#OneFieldset").show();
                                $("#TwoFieldset").hide();
                                $("#ThreeFieldset").hide();
                                $("#FourFieldset").hide();
                               
                                break;
                            }
                        case "Two":
                            {
                                $("#OneFieldset").hide();
                                $("#TwoFieldset").show();
                                $("#ThreeFieldset").hide();
                                $("#FourFieldset").hide();
                               
                                break;
                            }
                        case "Three":
                            {
                                $("#OneFieldset").hide();
                                $("#TwoFieldset").hide();
                                $("#ThreeFieldset").show();
                                $("#FourFieldset").hide();
                               
                                break;
                            }
                        case "Four":
                            {
                                $("#OneFieldset").hide();
                                $("#TwoFieldset").hide();
                                $("#ThreeFieldset").hide();
                                $("#FourFieldset").show();
                               
                                break;
                            }
                        default:
                            {
                                $("#OneFieldset").hide();
                                $("#TwoFieldset").hide();
                                $("#ThreeFieldset").hide();
                                $("#FourFieldset").hide();
                               
                                break;
                            }
                        }
                    }
                   
                    $(document).ready(Document_OnReady);
                // ]]>
            </script>
        </head>
        <body id="body">
            <div><fieldset><legend>Main Fieldset</legend><select id="TheSelect"><option></option><option>One</option><option>Two</option><option>Three</option><option>Four</option></select></fieldset><fieldset id="OneFieldset" class="hidden"><legend>One</legend></fieldset><fieldset id="TwoFieldset" class="hidden"><legend>Two</legend></fieldset><fieldset id="ThreeFieldset" class="hidden"><legend>Three</legend></fieldset><fieldset id="FourFieldset" class="hidden"><legend>Four</legend></fieldset><fieldset><legend>Last Fieldset</legend></fieldset></div>
        </body>
    </html>