...I am looking for the horse that goes with it.

Below is the resulting HTML from my ASP. I've tried to stick as close to the W3C standards as possible, but I'm still learning. What I have written passes the standards, but I feel like I'm leaving out stuff to do what I want.

The following looks like I expect in IE 5.5. The 'TabStrip' is 600px wide. Each of the 'TabButtons' takes just under 25% percent of that and are just under 150px each. It looks fine. Also, the 'Footer' is placed at the bottom of the page like I want.

But in Netscape 6, the page doesn't show up 600 wide. It shows up as narrow as possible. And in Opera 5.12, it not only shows up narrow, but short top to bottom.

Do I have to set some sort of body size or something? Is that allowed?

I'm also pleased to say that all three browsers will dynamicly hide the panels like I expect, and IE and Netscape will even change the buttons' color on mouse over.

All help will be appreciated.

Code:
<html>

  <head>

    <title>Dynamic Model</title>

    <style type="text/css">
      .TabStrip {
        position: relative;
        width:  600px;
      }
      .TabButton {
        position: relative;
        width:  23%;
        border-color: #c0c0c0 #000000 #000000 #c0c0c0;
        border-style: solid;
        border-width: 1px;
        background-color: #000a66;
        color:  #ffffff;
        text-align: center;
      }
      .TabButtonHighlighted {
        position: relative;
        width:  23%;
        border-color: #c0c0c0 #000000 #000000 #c0c0c0;
        border-style: solid;
        border-width: 1px;
        background-color: #0ac0ff;
        color:  #ffffff;
        text-align: center;
      }
      .PanelSpace {
        position: relative;
        width: 600px;
        margin-top:  30px;
      }
      .Panel {
        position: absolute;
        top: 0px;
        left:  0px;
      }
      .Footer {
        position: absolute;
        bottom:  0;
      }
    </style>

    <script type="text/javascript">
      function highlight(event) {
        this.style.backgroundColor = "#0ac0ff";
        this.style.color = "#ffffff";
      }

      function restore(event) {
        this.style.backgroundColor = "#000a66";
        this.style.color = "#ffffff";
      }

      function pushin(event) {
        this.style.borderColor = "#000000 #c0c0c0 #c0c0c0 #000000";
      }

      function pushout(event) {
        this.style.borderColor = "#c0c0c0 #000000 #000000 #c0c0c0";
      }

      function showPanel(which) {
        var which = Number(which);

        var currEl;
        for (var i = 0; i < 4; i++) {
          if (i != which) {
            currEl = document.getElementById("TabButton" + i);
            currEl.onmouseover = highlight;
            currEl.onmouseout = restore;
            currEl.style.color = "#ffffff";
            currEl.style.backgroundColor = "#000a66";
            currEl.onmousedown = pushin;
            currEl.onmouseup = pushout;

            currEl = document.getElementById("Panel" + i);
            currEl.style.visibility = "hidden";
          }
        }

        currEl = document.getElementById("TabButton" + which);
        currEl.onmouseover = "";
        currEl.onmouseout = "";
        currEl.style.color = "#ffffff";
        currEl.style.backgroundColor = "#000aff";
        currEl.onmousedown = "";
        currEl.onmouseup = "";

        currEl = document.getElementById("Panel" + which);
        currEl.style.visibility = "visible";
      }

    </script>

  </head>

  <body onload="JavaScript:showPanel('0');">

    <div class="TabStrip">
      
            <span class="TabButton" id="TabButton0"
              onclick="JavaScript:showPanel('0');"
            >Alpha</span>
          
            <span class="TabButton" id="TabButton1"
              onclick="JavaScript:showPanel('1');"
            >Beta</span>
          
            <span class="TabButton" id="TabButton2"
              onclick="JavaScript:showPanel('2');"
            >Gamma</span>
          
            <span class="TabButton" id="TabButton3"
              onclick="JavaScript:showPanel('3');"
            >Delta</span>
          
    </div>

    <div class="PanelSpace">
      <div class="Panel" id="Panel0">
        <p>Alpha Text</p>
      </div>
      <div class="Panel" id="Panel1">
        <p>Beta text.</p>
      </div>
      <div class="Panel" id="Panel2">
        <p>Gamma text</p>
      </div>
      <div class="Panel" id="Panel3">
        <p>Delta text</p>
      </div>
    </div>

    <div class="Footer">
      <span><a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01!" height="31" width="88"></a>
      </span>
      <span><a href="http://jigsaw.w3.org/css-validator/validator-text.html"><img
        src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid HTML 4.01!" height="31" width="88"></a>
      </span>
    </div>

  </body>

</html>