What's wrong with the positioning in this very simple example? (MS IE 8)

Question

Here's the HTML

<div class="panel" id="Panel1">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
<legend> </legend>
  <div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
</fieldset>
</div>

<div class="panel" id="Panel2">
<fieldset style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
<legend> </legend>
  <div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
</div>

and here's the CSS

body {
 background-color: white;
 width: 100%;
}

.panel, Label, .fieldset {
  font: 8px Arial; 
  border: 0px;
  margin: 0px;
  padding: 0px;
}

Panel one has left=136px and width=136px while panel two has left=372px but when I look at them in MS IE 8 they overlap. What gives?

---

A few points of info

• Obviously, I am a relative CSS newbie.
• This is part of a project to design a form in a Windows program and then view it in the browser. It has to be WYSIWYG, which is why I am giving precise coordinates, rather than allowing the browser to lay out the page.
• But might it be that I would be better off with style="position: fixed; ?
• I am not sure if I need positioning on both the divs and their contents, but, if only one, then which?
• I made the example as simple as possible, but it must scale up to multiply nested fieldsets
  • I have no choice but to use MS IE, although I can recommend a (minumum) version.

Thanks in advance for any help

Answer 1

try putting relative on the surrounding div.

.panel{posistion:relative}

Answer 2

Your HTML is incorrect. The style definitions that are on your fieldset element, should be on your div elements for panel 1 and 2. Also your fieldset tag in panel2 is unclosed.

Try this HTML:

<div class="panel" id="Panel1" style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
    <fieldset >
        <legend> </legend>
        <div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
    </fieldset>
</div>

<div class="panel" id="Panel2" style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
    <fieldset >
        <legend> </legend>
        <div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
    </fieldset>
</div>​

Answer 3

As Strelok pointed out, there are mistakes in your HTML. I also notice that your css refers to elements with a class of fieldset did you want that to be on the fieldset itself?

if so, in the css remove the . before .fieldset