Css3 is not woking in firefox and i.it works in google chrome

advertisements

i have align section tag to left and aside tag to right in css3.it is working in google chrome. but it is not working in firefox and internet explorer.can someone tell why is not working. here html5 code

<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="urf-8" />
<title>Bruno Website </title>
<link rel="stylesheet" href="main.css" >
</head>

<body>
    <div id=big_wrapper>
    <header id="top_header">
       <h1> Welcome to HTML5 </h1>
    </header>

    <nav id="top_menu">
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Tutorials</li>
            <li>Conatct</li>
        </ul>
    </nav>

    <div id="new_div">
    <section id="main_section">
        <article>
            <header>
                <hgroup>
                <h1>Tiltle of the article</h1>
                <h2>titile h2 </h2>
                </hgroup>
            </header>
                <p>This is my First Website in hTml5 </p>
            <footer>
                 <p>~BRuno thileeban</p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                <h1>Tiltle of the article2</h1>
                <h2>titile h2 2 </h2>
                </hgroup>
            </header>
                <p>This is my First Website in hTml5 2 </p>
            <footer>
                <p>~BRuno thileeban</p>
            </footer>
        </article>
    </section>
        <aside id="side_news">
            <h4>News</h4>
            HEllo we r doing good job
        </aside>
    </div>
    <footer id="the_footer">
    Copyright Bruno .....
    </footer>

    </div>
</body>

</html>

Here is the css3 code

*
{
margin:0px;
padding:0px;
}
h1
{
 font: bold 20px Tahoma;
}
h2
{
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup{ display:block;}
body
{
 width:100%;
 display:-webkit-box;
 -webkit-box-pack: center;
}
#big_wrapper{
 max-width: 1000px;
 margin:20px 0px;
 display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-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;
list-style:none;
padding:5px;
font:bold 14px tahoma;
 }
 #new_div{
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  }
  #main_section
  {
  border:1px solid blue;
  -webkit-box-flex:1;
  margin:20px ;
  padding:20px;

  }

  #side_news{
    border:1px solid red;
    margin:20px 0px;
    padding:30px;
    background: #66CCCC;

  }
  #the_footer{
  text-align:center;

   padding:20px;
   border-top:2px solid green;
  }
  article{ background:#FFFBCC; border:1px solid red; padding:20px; margin-bottom:15px;}
  article footer{ text-align:right;}


You've chosen to only support webkit (upon which Google Chrome is based) in your code. To support rendering engines used by other browsers you need to make some changes.

Everywhere you use -webkit-*, copy that line and below use -moz-*, again with -o-* and -ms-*, and then one more time without any prefix. The web browser will drop the ones it doesn't understand.

For example, -webkit-box-flex:1; becomes

-webkit-box-flex:1; /* chrome, safari, etc */
-moz-box-flex:1;    /* Firefox, seamonkey etc */
-o-box-flex:1;      /* Opera */
-ms-box-flex:1;     /* MSIE */
box-flex:1;         /* Any that support full implementation */

However, it should be noted that this is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard. You may be interested in using flex instead