Databases
StackOverflow2013
Postsdbo
POcss3 flex-box internet explorer not aligning properly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss3 flex-box internet explorer not aligning properly
    text
    copied!<p>I've been following this <a href="http://www.youtube.com/watch?v=F1uzS6PAjuc" rel="nofollow">tutorial video here</a> it shows everything clearly about flexible boxes in css3. i dont have any problem on mozilla or chrome. But box is placed just below of section box in internet explorer. demo can be found <a href="http://www.mreo.net/html5/index.html" rel="nofollow">here</a> (if you view on mozilla,ie you can see the difference). here is the html codes which ive been playing with: </p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt; First html5 &lt;/title&gt; &lt;link rel="stylesheet" href="mainnew.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="big_wrapper"&gt; &lt;header id="top_header"&gt; &lt;h1&gt; Welcome to html5 &lt;/h1&gt; &lt;/header&gt; &lt;nav id="top_menu"&gt; &lt;ul&gt; &lt;li&gt;Home&lt;/li&gt; &lt;li&gt;Tutorials&lt;/li&gt; &lt;li&gt;Podcast&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div id="new_div"&gt; &lt;section id="main_section"&gt; &lt;article&gt; &lt;header&gt; &lt;hgroup&gt; &lt;h1&gt;Title of article&lt;/h1&gt; &lt;h2&gt;Subtitle for article!&lt;/h2&gt; &lt;/hgroup&gt; &lt;/header&gt; &lt;p&gt;This is the best article eva!&lt;/p&gt; &lt;footer&gt; &lt;p&gt;- writtern by Emre Caglar &lt;/p&gt; &lt;/footer&gt; &lt;/article&gt; &lt;article&gt; &lt;header&gt; &lt;hgroup&gt; &lt;h1&gt;Title of article2&lt;/h1&gt; &lt;h2&gt;Subtitle for article2!&lt;/h2&gt; &lt;/hgroup&gt; &lt;/header&gt; &lt;p&gt;This is the best article eva!&lt;/p&gt; &lt;footer&gt; &lt;p&gt;- writtern by Emre Caglar &lt;/p&gt; &lt;/footer&gt; &lt;/article&gt; &lt;/section&gt; &lt;aside id="side_news"&gt; &lt;h4&gt;News&lt;/h4&gt; Emre has a new dog &lt;/aside&gt; &lt;/div&gt; &lt;footer id="the_footer"&gt; Copyright mreonet 2012 &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and css codes </p> <pre><code>body{ width:100%; display:-webkit-box; display: -moz-box; display: box; -webkit-box-pack:center; -moz-box-pack:center; box-pack:center; } #big_wrapper { max-width: 1000px; margin:20px 0px; display:-webkit-box; display: -moz-box; display: box; -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical; -moz-box-flex: 1.0; -webkit-box-flex: 1; box-flex: 1; } #top_header { background:yellow; border: 3px solid black; padding:20px; } #top_menu { border:red; background:blue; color:white; } #top_menu li { display:inline-block; } #new_div { display:-webkit-box; display: -moz-box; display: box; -webkit-box-orient:horizantal; -moz-box-orient: horizontal; box-orient: horizontal; } #main_section { border:1px solid blue; margin:20px; padding: 20px; -moz-box-flex: 1.0; -webkit-box-flex: 1; box-flex: 1; } #side_news { border:1px solid red; width:220px; margin:20px 0px; padding:30px; background:#66cccc; </code></pre> <p>I've also noticed that when i view this page on ie8 it is not taking css styling. i am really new on html5 and might make silly mistakes..</p> <p>Can any one help me on this. BTW this is my first question and if i miss anything let me know and sory about it.</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