html - CSS issues with different browsers -


below mentioned code works on google chrome whenever use ie7/8 output weird , entire page goes haywire. please me correct code, tell me resource or book should follow learn css.

 <html>  <head>  <style>   .wrapper  {   width:1000px;   height:auto;   margin-left:auto;   margin-right:auto;   }    .header  {   height:250px;   width:1000px;   background-color:red;  }   .menu_bar  {   height:40px;   width:1000px;   background-color:blue;   margin-left:auto;   margin-right:auto;  }   .menu_item  {  height:40px;  width:300px;  float:left;  text-align:center;  color:white;  }  .page  {  width:1000px;  height:500px;  background-color:yellow;  margin-left:167px;  }   .page_left  {  width:150px;  height:500px;  background-color:green;  float:left;  }   .page_right  {  background-color:black;  height:500px;  width:250px;  float:right;  }   .footer  {  height:200px;  width:1000px;  background-color:orange;  margin-left:167px;  }  </style>  <head>   <body>  <div class="wrapper">  <div class="header"></div>  </div>   <div class="menu_bar"> <div class="menu_item">home</div> <div class="menu_item">about us</div> <div class="menu_item">contact us</div>  </div>   <div class="page">   <div class="page_left">xyz</div>  <div class="page_right">pqr</div>   </div>   <div class="footer"></div>   </div>   </body>  </html> 

looks have closing div tag on page: </div>. ie more picky other browsers. try removing it.


Comments

Popular posts from this blog

java - Intellij Synchronizing output directories .. -

git - Initial Commit: "fatal: could not create leading directories of ..." -