title: Rendering Issues between browsers
body: <p>First, I just started learning html &amp; css about a week ago non-stop like a mad man, and I decided to markup a design I had created a few years ago. I know there are problems with my html and or css, but I'm just starting and trying to use the best practices. I could probably use more shorthand as well. Anyway, I'm rambling on.</p>
  
  <p>The problem I think is, with the absolute positioning I've been using. After quite a bit of troubleshooting, I got Firefox and Chrome on the same page. However, I don't think my layout is liquid and so in Chrome, when I zoom with cmd+, everything goes completely out of whack. No issues in Firefox. And then IE is another monstrosity in itself. Things are rendered all over the place. It's quite unnerving really.</p>
  
  <p>This has been driving me crazy. When things don't work the way you want them to, it's such a struggle, but I'm loving learning web design. If anyone can help, it will be greatly appreciated. I posted my code below... </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="main"&gt;
      &lt;div class="container"&gt;
  
          &lt;div id="header"&gt;
                  &lt;div id="searchBar"&gt;
                  &lt;form action=""&gt; &lt;small&gt;Search&lt;/small&gt; &lt;input type="text" name="search" /&gt;&lt;/form&gt;&lt;/div&gt;
                  &lt;div id="logo"&gt;
                      &lt;h1&gt;&lt;a href=""&gt;Hell, Michigan&lt;a/&gt;&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;div id="menu"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Things To See &amp; Do&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Where To Stay&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Plan Your Trip&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;History&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt; &lt;!--menu--&gt;
          &lt;/div&gt; &lt;!--header--&gt;
  
          &lt;div id="mainContent"&gt;
              &lt;img src="images/main_content.png" width="791" height="209" alt="must see must do" /&gt;
          &lt;/div&gt;
  
          &lt;div id="attractions"&gt;
              &lt;ul&gt;
                  &lt;li id="chapel"&gt;
                  &lt;h2&gt;&lt;a href="" title="Get Hitched in Hell!"&gt;Hell Wedding Chapel&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;A marriage made in hell can only get better. Tie the knot in Hell's very own
                  Wedding Chapel, or renew your vows before hell freezes over!&lt;/p&gt;&lt;/li&gt;
  
                  &lt;li id="run"&gt;
                  &lt;h2&gt;&lt;a href="" title="Run for your lives!"&gt;Run Thru Hell&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;Not everyone can say that they've run thru hell. Partake in Hell's classic 5 or
                  10 mile race, and get a T-shirt that says, &lt;q&gt;I ran thru hell!&lt;/q&gt;&lt;/p&gt;&lt;/li&gt;
  
                  &lt;li id="lastRides"&gt;
                  &lt;h2&gt;&lt;a href="" title="Your Last Ride Awaits!"&gt;Last Rides Reunion&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;The annual Last Rides Reunion is a must see event in late September. Witness over 40
                  hearses drive through town. Will this be your last ride?&lt;/p&gt;&lt;/li&gt;
              &lt;/ul&gt;   
          &lt;/div&gt; &lt;!--main content--&gt;
  
          &lt;div id="subContent"&gt;
              &lt;img src="images/sub_content.png" width="791" height="156" alt="choose activity" /&gt;
          &lt;/div&gt;
  
          &lt;div id="activities"&gt;
              &lt;ul&gt;
                  &lt;li id="activitiesOne"&gt;
                  &lt;h3&gt;&lt;a href="" title="Picnic or Hike in Hell!"&gt;Picnic or Hike&lt;/a&gt;&lt;/h3&gt;&lt;/li&gt;
  
                  &lt;li id="activitiesTwo"&gt;
                  &lt;h3&gt;&lt;a href="" title="Canoe or Bike in Hell!"&gt;Canoe or Bike&lt;/a&gt;&lt;/h3&gt;&lt;/li&gt;
              &lt;/ul&gt;   
          &lt;/div&gt; &lt;!--sub content--&gt;
  
          &lt;div id="socialContent"&gt;
              &lt;h4&gt;Connect with us&lt;/h4&gt;
              &lt;ul&gt;
                  &lt;li id="twitter"&gt;
                  &lt;h5&gt;&lt;a href=""&gt;Hell Michigan on Twitter&lt;/a&gt;&lt;/h5&gt;&lt;/li&gt;
  
                  &lt;li id="facebook"&gt;
                  &lt;h5&gt;&lt;a href=""&gt;Hell Michigan on Facebook&lt;/a&gt;&lt;/h5&gt;&lt;/li&gt;
  
                  &lt;li id="youtube"&gt;
                  &lt;h5&gt;&lt;a href=""&gt;Hell Michigan on YouTube&lt;/a&gt;&lt;/h5&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt; &lt;!--social content--&gt;
  
          &lt;div id="footer"&gt;
              &lt;p&gt;&amp;copy; Hell Michigan &amp;nbsp;&amp;nbsp;
                  &lt;a href="privacy.htm"&gt;Privacy Policy&lt;/a&gt; |
                  &lt;a href="terms.htm"&gt;Terms and Conditions&lt;/a&gt;
              &lt;/p&gt;
          &lt;/div&gt; &lt;!--footer--&gt;
      &lt;/div&gt; &lt;!--containter--&gt;
  &lt;/div&gt; &lt;!--main--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>/*
      Hell Michigan Demo Page
      Design &amp; Markup by Khoi Nguyen
  */
  
  * {
      margin: 0;
      padding: 0;
  }
  
  body {
      font-family: Rockwell, Georgia, serif;    
      background-color: #fff;
      margin: 0;          
      padding: 0;         
  }
  
  
  
  #menu a {
      color: #fff
  }
  
  #main {
      width: 791px;       
      margin: 0 auto;     
      background: #fff;       
      position: relative;
  }
  
  #header {
      height: 118px;  
      background-color: #fff;
  }
  
  /* 
      Search-Bar
  */
  
  #header #searchBar {
      position: absolute;
      left: 595px;
      top: 20px;
  }
  
  #logo a:link {
      height: 45px;
      width: 478px;
      display: block;         
      text-indent: -9999em;   
      background: url(../images/logo.png) no-repeat left bottom;
      border: 0;           
      padding: .3em .3em;
      margin: 0 .3em;
  }
  
  /* 
      Navigation
  */
  
  #header #menu {        
      left: 791px;
      bottom: 0px;
  }
  
  #menu ul {               
      color: #fff;
      list-style-type: none;
      font-family: Helvetica, sans-serif;
      font-size: 1.5ex;
      font-weight: bold;
      text-transform: uppercase;
      margin-top: 12px;
      margin-left: 5px;
      padding: 0 1px 0 0;
      text-align: center;
  }
  
  #menu li {               
      float: left;
      margin: 0;
      padding: 0;
  }
  
  #menu li a:link {
  
      display: block;         
      color: #fff;            
      text-decoration: none; 
      padding: 0 0 0 0; 
      margin-right: 1px;
      width: 139px;
      line-height: 31px;
      background: url(../images/navigation_dual.jpg) no-repeat left bottom;
      border: none;          
  }
  
  #menu li a:hover {
      color: #000;         
      background-position: left top;     
  }
  
  #menu li a.active {
      height: 31px;
      width: 80px;
      display: block;
      color: #000;
      background: url(../images/home.jpg) no-repeat;
  }
  
  #menu li a.active {
      cursor: default;
  }
  
  /* 
      Main-Content
  */
  
  #mainContent img {
      position: relative;
      margin-top: .5em;
  }
  
  #attractions ul  #chapel a:link {
      position: absolute;
      top: 129px;
      left: 328px;
      width: 151px;
      height: 201px;
      margin: 0;
      padding: 0;
      background: url(../images/chapel_dual.png) no-repeat left bottom;
      text-indent: -9999em;
  }
  
  #attractions ul #chapel a:hover {
      background-position: left top;     
  }
  
  #attractions ul  #run a:link {
      position: absolute;
      top: 129px;
      left: 482px;
      width: 151px;
      height: 201px;
      margin: 0;
      padding: 0;
      background: url(../images/run_dual.jpg) no-repeat left bottom;
      text-indent: -9999em;
  }
  
  #attractions ul #run a:hover {
      background-position: left top;     
  }
  
  #attractions ul  #lastRides a:link {
      position: absolute;
      top: 129px;
      left: 636px;
      width: 151px;
      height: 201px;
      margin: 0;
      padding: 0;
      background: url(../images/last_rides_dual.jpg) no-repeat left bottom;
      text-indent: -9999em;
  }
  
  #attractions ul #lastRides a:hover {
      background-position: left top;      
  }
  
  #attractions ul {
      list-style: none;
      overflow: auto;
  }
  
  #chapel p {
      position: absolute;
      font-size: .8em;
      color: gray;
      top: 340px;
      left: 328px;
      width: 142px;
      height: 30px;
      margin: 0;
      padding: 0;
      z-index: 1;
  }
  
  #run p {
      position: absolute;
      font-size: .8em;
      color: gray;
      top: 340px;
      left: 482px;
      width: 142px;
      height: 30px;
      margin: 0;
      padding: 0;
      z-index: 1;
  }
  
  #lastRides p {
      position: absolute;
      font-size: .8em;
      color: gray;
      top: 340px;
      left: 636px;
      width: 142px;
      height: 30px;
      margin: 0;
      padding: 0;
      z-index: 1;
  }
  
  /* 
      Sub-Content
  */
  
  #activities ul {
      list-style: none;
  }
  
  #subContent img {
      position: relative;
      margin-top: 106px;
  }
  
  #activities ul  #activitiesOne a:link {
      position: absolute;
      top: 448px;
      left: 4.5px;
      width: 197px;
      height: 148px;
      margin: 0;
      padding: 0;
      background: url(../images/picnic_hike_dual.png) no-repeat left bottom;
      text-indent: -9999em;
  }
  
  #activities ul #activitiesOne a:hover {
      background-position: left top;      
  }
  
  #activities ul  #activitiesTwo a:link {
      position: absolute;
      top: 448px;
      left: 209px;
      width: 304px;
      height: 148px;
      margin: 0;
      padding: 0;
      background: url(../images/canoe_bike_dual.png) no-repeat left bottom;
      text-indent: -9999em;
  }
  
  #activities ul #activitiesTwo a:hover {
      background-position: left top;      
  }
  </code></pre>