Databases
StackOverflow2013
Postsdbo
POWhat's wrong with the positioning in this very simple example? (MS IE 8)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's wrong with the positioning in this very simple example? (MS IE 8)
    text
    copied!<p>Here's the HTML </p> <pre><code>&lt;div class="panel" id="Panel1"&gt; &lt;fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;"&gt; &lt;legend&gt; &lt;/legend&gt; &lt;div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;"&gt;panel one&lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;div class="panel" id="Panel2"&gt; &lt;fieldset style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;"&gt; &lt;legend&gt; &lt;/legend&gt; &lt;div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;"&gt;panel two&lt;/div&gt; &lt;/div&gt; </code></pre> <p>and here's the CSS </p> <pre><code>body { background-color: white; width: 100%; } .panel, Label, .fieldset { font: 8px Arial; border: 0px; margin: 0px; padding: 0px; } </code></pre> <p>Panel one has <code>left=136px</code> and <code>width=136px</code> while panel two has <code>left=372px</code> but when I look at them in MS IE 8 they overlap. What gives? </p> <hr> <p>A few points of info </p> <ul> <li>Obviously, I am a relative CSS newbie. </li> <li>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. </li> <li>But might it be that I would be better off with <code>style="position: fixed;</code> ? </li> <li>I am not sure if I need positioning on both the <code>div</code>s and their contents, but, if only one, then which? </li> <li>I made the example as simple as possible, but it must scale up to multiply nested fieldsets <ul> <li>I have no choice but to use MS IE, although I can recommend a (minumum) version.</li> </ul></li> </ul> <p>Thanks in advance for any help </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload