CSS issues with different browsers

Question

Below mentioned code works well on google chrome but whenever I use IE7/8 the output is weird and the entire page goes haywire. Please help me correct the code, also tell me some resource or book that I should follow to learn good 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>

Answer 1

Looks like you have an extra closing div tag on your page: </div> . IE will be more picky about this than other browsers. Try removing it.

Answer 2

Try this css...

 .wrapper
 {
  width:1000px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  margin-left:167px;
 }

CSS issues with different browsers

Question

2 answers

solution1
0 2014-04-22 10:40:40

solution2
0 2014-04-22 11:37:00

CSS issues with different browsers

Question

2 answers

solution1 0 2014-04-22 10:40:40

solution2 0 2014-04-22 11:37:00

solution1
0 2014-04-22 10:40:40

solution2
0 2014-04-22 11:37:00