Aligning checkboxes via inherited css?

Question

I have a php page, which launches a popup window containing a form with checkboxes. The originating window includes an external stylesheet.

The form html for the popup window is:

<form name="statusForm" action="post.php=" method="post" enctype="multipart/form-data">
<label for="Test">Test:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<label for="Test">TestTest:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<label for="Test">TestTestTest:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>

The form has been trimmed, and fields renamed to test for posting..

In the external stylesheet, I have:

label {
    min-width: 5em;
}

The checkboxes are still not aligned. Do I have to included the stylesheet explicitly in the html of the popup window, or is it something else?

Answer 1

Yes, the popup window needs to be its own full HTML page.

---

Edit

Unless it is an AJAX popup, in which case it does NOT need to be a full HTML page.

Answer 2

New windows don't inherit any kind of stylesheet rules from their parents.

Also, if you're using Firefox, I urge you to install the Firebug extension, which will allow you to 'Inspect' an HTML element to see (and even modify) the active CSS rules.

Answer 3

Keep in mind that min-width is not supported in Internet Explorer 6. Also, I'd use some dividing element like <div> or <li> (within an <ul>) rather than a <br />.

Rich