Databases
StackOverflow2013
Postsdbo
POHTML layout problem in IE7
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML layout problem in IE7
    text
    copied!<p>I have some html:</p> <pre><code>&lt;body&gt; &lt;h1 id="header"&gt;&lt;/h1&gt; &lt;div id="container"&gt; &lt;div id="left"&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;div id="titlebar"&gt; &lt;span id="date"&gt;Novermber 13, 3414&lt;/span&gt; &lt;span id="title"&gt; The importance of being earnest.&lt;/span&gt; &lt;span id="author"&gt;HG Wellwhocares&lt;/span&gt; &lt;/div&gt; &lt;iframe id="memo" /&gt; &lt;div id="attachments"&gt;&lt;/div&gt; &lt;p id="description"&gt;&lt;/p&gt; &lt;div id="action"&gt; &lt;div id="accept"&gt;Accept&lt;/div&gt; &lt;div id="revise"&gt;Revise&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And some css:</p> <pre><code>#container{ width: 85%; margin: 0 auto; background: gray; } #left{ float: left; width: 20%; padding: 1%; } #left:after{ clear: both; } #content{ margin-left: 22%; background: silver; padding: 3em; } #titlebar{ text-align: center; } #date{ float: left; } #title{ clear: both; } #author{ float: right; } #memo{ width: 100%; min-height: 500px; } </code></pre> <p>There is also this jQuery:</p> <pre><code> months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); $(document).ready(function(){ items = new Array(); $.getJSON('_vti_bin/listdata.svc/BOTMemos?$orderby=MeetingDate', function(data){ date = ""; $.each(data.d.results, function(index, value){ if(value.MeetingDate!=null){ if(value.MeetingDate!=date){ if(date!=""){ $('#left').append('&lt;hr /&gt;'); } item = new Array(value.MeetingDate, value.Title0, value.Checkers); date = value.MeetingDate; month = months[parseInt(date.substring(5,7), 10)-1]; formattedDate = month + " " + date.substring(8,10) + ", " + date.substring(0, 4); $('#left').append('&lt;h1&gt;'+formattedDate+'&lt;/h1&gt;'); } $('#left').append('&lt;h2 class="memo"&gt;'+value.Title0+'&lt;/h2&gt;'); } }); }); }); </code></pre> <p>Which result in two different layouts, this in ie9: <img src="https://i.stack.imgur.com/cuC7R.png" alt="Internet Explorer 9 render of page"> And this in ie7: <img src="https://i.stack.imgur.com/9Sr2x.png" alt="Internet Explorer 7 render of page"> My two questions are:</p> <ol> <li>Why does the text not show up on the left hand side in ie7?</li> <li>Why do the three <code>&lt;span&gt;</code> tags in the <code>#titlebar</code> div not display side by side in ie7 like they do in ie9?</li> </ol>
 

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