HTML Funny Scoping Problems

**CiberTHuG** · Jun 20th, 2002, 10:34 AM

Okay, in the following code, if you resize the font via the UA, the page doesn't respond correctly. If you actually remove the banner div from around the mainMenu div and try again, you will see the main menu background swell with the text resizing, the way it is supposed to (height: 1.45em

.

Why doesn't it work inside the banner div?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Silas Reveille</title>
    <style type="text/css">
      div#banner {
        position: fixed;
        top: 0px;
        left: 0px;
        background: white url("reveille.gif") no-repeat fixed top left;
        margin: 0px;
        height: 77px;
        width: 100%;
      }
      div#mainMenu {
        background-color: black;
        color: silver;
        font: normal small-caps bold 11px Tahoma, sans-serif;
        position: absolute;
        bottom: 0px;
        left: 170px;
        height: 1.45em;
        right: 0px;
        margin: 0px;
        padding: 0px;
      }
      div#mainMenuItem {
        background-color: black;
        text-transform: uppercase;
        margin: auto 6ex auto 0ex;
        padding: 0px;
        height: 100%;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="banner">
      <div id="mainMenu">
        <div id="mainMenuItem">Home</div>
        <div id="mainMenuItem">On-Call</div>
        <div id="mainMenuItem">Configurations</div>
        <div id="mainMenuItem">Reports</div>
        <div id="mainMenuItem">Help</div>
      </div>
    </div>
  </body>
</html>

**Rick Bull** · Jun 20th, 2002, 10:46 AM

It did swell for me in Mozilla, just not in IE. And it didn't make any difference to the font size or the DIV's height whether I removed the other DIV or not. I think the problem is probably because you are using a absolute size rather than a relative one for the font.

**CiberTHuG** · Jun 20th, 2002, 12:13 PM

I'm testing it in Mozilla 1.0. But the mainMenu div height is using a relative size, and the mainMenuItem left and right margins are set to a relative size.

This does what I want:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Silas Reveille</title>
    <style type="text/css">
      div#banner {
        position: fixed;
        top: 0px;
        left: 0px;
        background: white url("reveille.gif") no-repeat fixed top left;
        margin: 0px;
        height: 77px;
        width: 100%;
      }
      div#mainMenu {
        background-color: black;
        color: silver;
        font: normal small-caps bold 11px Tahoma, sans-serif;
        position: absolute;
        bottom: 0px;
        left: 170px;
        height: 1.45em;
        right: 0px;
        margin: 0px;
        padding: 0px;
      }
      div#mainMenuItem {
        background-color: black;
        text-transform: uppercase;
        margin: auto 6ex auto 0ex;
        padding: 0px;
        height: 100%;
        float: left;
      }
    </style>
  </head>
  <body>
      <div id="mainMenu">
        <div id="mainMenuItem">Home</div>
        <div id="mainMenuItem">On-Call</div>
        <div id="mainMenuItem">Configurations</div>
        <div id="mainMenuItem">Reports</div>
        <div id="mainMenuItem">Help</div>
      </div>
  </body>
</html>

But I want the outter div (the banner div) so I can set a banner image behind the menu and set the z order on this div so it will always be above whatever scrolls on the page.

**Rick Bull** · Jun 20th, 2002, 01:28 PM

Maybe it's just a bug, because both of your codes seem to work fine in Mozilla 1.1 (alpha). The only difference seems to be the position of the menu.

**CiberTHuG** · Jun 20th, 2002, 01:38 PM

Ah, 1.1. My web design is so bleeding edge.

**Rick Bull** · Jun 20th, 2002, 04:21 PM

Hehe, someone's been reading the Mozilla home page

Thread: HTML Funny Scoping Problems

Thread Tools

Display

HTML Funny Scoping Problems

Posting Permissions