css-discuss archive

OK, I think I'm trying to get too fancy, but I'm trying to create a status
bar that has one region show how much is left to fill, and another showing
how much is filled

I also, need to display numeric values for how much is entered and how much
is left.

So I cam up with this DIV and SPAN formation...

   <div class='bar'>
      <div class='status' >
         <div class='filler'></div>
      </div>
      <div class='numbers'>
         <div id='fillNum' class='fillNum'>67</div>
         <span id='blankNum' class='blankNum'>10</span>
      </div>
   </div>

This should display something like this...

  |--------------------------------------|
  | |----------------------------------| |
  | |----------------------|           | |
  | |                      |           | |
  | |----------------------|           | |
  | |----------------------------------| |
  | |----------------------|    |--|   | |
  | |         67           |    |10|   | |
  | |----------------------|    |--|   | |
  | |----------------------------------| |
  |--------------------------------------|

using this CSS...

  DIV, SPAN { padding: 0px; font-size: 8pt; height: 4px; }

  .status, .fillNum { width: 200px;  }
  .filler, .fillNum { width: 160px;  }
  .numbers, .fillNum, .blankNum { text-align: center; height: 14px; }

  .bar      { background-color: yellow;  width: 201px; }
  .status   { background-color: silver; }
  .filler   { background-color: blue;    font-size: 2pt; }
  .numbers  { background-color: teal; }
  .fillNum  { background-color: red;     float: left; }
  .blankNum { background-color: yellow; }

NOTE: The colors in the lower 3 regions are so I can see how it lays out.
      These colors will be removed once this thing works.

This works as expected in Opera7.x or Mozilla.

It does not work in IE 5.5, I don't have IE 6.0.

I have an image of what I would like to have display.

     http://web.torres.ws/status.gif

Oh, also, I have a JS script that will expand/contract SPAN.fillNum and
SPAN.status.

So SPAN.blankNum needs to move as SPAN.fillNum expands/contracts

SPAN.status & SPAN.fillNum moves as needed in all browsers.

My concern is the numbers in the second row, specifically the SPAN.blankNum
region

Anyone have any ideas on how to make this work in all the browsers?

I'm asking for help after trying for the last 3 days.

Thanks

Walter

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

css-discuss archive

Sent by jsWalter on 9 October 2003 16:04

Message thread:

Possibly related: