Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy can't I clear:left these labels in IE7?
    primarykey
    data
    text
    <p>I'm trying to get this css layout to work with IE7 and I'm a bit stuck. Any thoughts on how I can get the form to look like it does in FF and Chrome without changing the page structure? I know there are some IE specific CSS hacks out there, but I'm not totally sure how to apply them.</p> <p>In FF and Chrome the form correctly displays the form as follows:</p> <pre><code>title first last street city state zip occupation bday </code></pre> <p>In IE the form is all jumbled:</p> <pre><code>title last state zip street city </code></pre> <p><strong>CSS</strong></p> <pre><code>... form label { float: left; margin: 0px 10px 0px 0px; } form input { width:100%; } form select { width:100%; } form label.field-title { width: 50px; clear: left; } form label.field-title select { width: 50px; } form label.field-first { width: 150px; clear: left; } form label.field-last { width: 150px; } form label.field-street{ width: 310px; clear: left; } form label.field-city { width: 150px; clear: left; } form label.field-state { width: 70px; } form label.field-zip { width: 70px; } form label.field-occupation { width:150px; clear:left; } form label.field-bday { width:150px; } ... </code></pre> <p><strong>HTML</strong></p> <pre><code>... &lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Basic Information&lt;/legend&gt; &lt;label class="field-title"&gt; Title &amp;#42;&lt;select name="EmployeeName.Title"&gt; &lt;option value="Mr."&gt;Mr.&lt;/option&gt; &lt;option value="Mrs."&gt;Mrs.&lt;/option&gt; &lt;option value="Ms."&gt;Ms.&lt;/option&gt; &lt;/select&gt; &lt;/label&gt; &lt;label class="field-first"&gt; First Name &amp;#42;&lt;input name='first' /&gt;&lt;/label&gt; &lt;label class="field-last"&gt; Last Name &amp;#42;&lt;input name='last' /&gt;&lt;/label&gt; &lt;label class="field-street"&gt; Street &amp;#42;&lt;input name='street' /&gt;&lt;/label&gt; &lt;label class="field-city"&gt; City &amp;#42;&lt;input name='city' /&gt;&lt;/label&gt; &lt;label class="field-state"&gt; State &amp;#42;&lt;select name='state' &gt; &lt;option&gt;test&lt;/option&gt;&lt;/select&gt;&lt;/label&gt; &lt;label class="field-zip"&gt; Zip &amp;#42;&lt;input name='zip' /&gt;&lt;/label&gt; &lt;label class="field-occupation"&gt; Occupation &amp;#42;&lt;input name='occupation' /&gt;&lt;/label&gt; &lt;label class="field-bday"&gt; Birth Day &amp;#42;&lt;input name='bday' /&gt;&lt;/label&gt; &lt;/fieldset&gt; &lt;/form&gt; ... </code></pre> <p><strong>Doctype</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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