title: unwanted navigation bar resizing issue (CSS and HTML)
body: <p>I have built a navigation bar using HTML and CSS and it functions almost perfectly. The issue is that when either of the two gallery pages is selected, the positioning of the navigation bar moves slightly upward. Im not sure where the issue lies (it seems quite specific since I cant find any similar issue here nor on Google).</p>
  
  <p>NOTE: the gallery HTML page has CSS content specifically written in because if this content is included using PHP's include statment (as on other pages), the gallery slideshow images get distorted/streched for some reason. Either way though, the navigation bar issue is present. </p>
  
  <p>HTML for services page (a non-gallery pager):</p>
  
  <pre><code>&lt;?PHP
  
  //if browser is IE, displays IE specific navbar
  if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
     {include('navbarIE.php');}
  //if browser is anything else, include original navbar file
  else
     include('navbar.php');
  
  ?&gt;
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8'/&gt;
      &lt;title&gt;Daiko Construction Remodeling&lt;/title&gt;
      &lt;style type="text/css"&gt;
          div#wrapper {
              position: relative;
              margin-left: 0px;
              margin-right: 0px;
              top: 20px;
              width: 866px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;br/&gt;
      &lt;div id="wrapper"&gt;
          &lt;p&gt;For your conveniece, we have listed just a few of the projects that we most commonly undertake. 
            If there is a specific service that you require and it is not listed below, 
            please &lt;a style="color: white;" href="contactus.php"&gt;contact us&lt;/a&gt; for more information. Additionally, 
            we offer FREE estimates for our services. While larger projects may require us to do an on-site 
            evaluation and no two projects are exactly alike, we request that you send us a short email with 
            an inquiry or any question you might have. 
      &lt;br&gt;&lt;br&gt;
      &lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;Window and door installation (European and Domestic)&lt;/li&gt;
              &lt;li&gt;General and central HVAC, A/C, heating&lt;/li&gt;
              &lt;li&gt;Remodelling of:&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;kitchens&lt;/li&gt;
                  &lt;li&gt;bathrooms&lt;/li&gt;
                  &lt;li&gt;bedrooms&lt;/li&gt;
                  &lt;li&gt;basements&lt;/li&gt;
                  &lt;li&gt;etc.&lt;/li&gt;
              &lt;/ul&gt;
              &lt;li&gt;Flooring (wood and tile)&lt;/li&gt;
              &lt;li&gt;House additions&lt;/li&gt;
              &lt;li&gt;Lighting and electrical work&lt;/li&gt;
              &lt;li&gt;Plumbing&lt;br&gt;&lt;/li&gt;
              &lt;li&gt;Regular handyman work&lt;/li&gt;
              &lt;li&gt;And many others&lt;/li&gt;
          &lt;/ul&gt;
          &lt;br&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;?PHP include('footer.php'); ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>HTML for gallery page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8'/&gt;
      &lt;title&gt;Gallery&lt;/title&gt;
      &lt;link rel="stylesheet" href='jsddm.css'&gt;
      &lt;img src="./styles/icons/kitchen2.jpg" class="image" /&gt;
      &lt;style type="text/css"&gt;
          div#wrapper {
              position:relative;
              margin-left:0px;
              margin-right:0px;
              top: 14px;
              width: 866px;
          }
          /*
           //css to adjust properties of IE navigation bar and all text
          */ 
          ul.jsddm, ul.flyout {
           margin: 0;
           padding: 0;
           line-height: 2.0em;
           list-style-type:none;
          }
          ul.jsddm li {
              float: left;
              width: 20%;
              position:relative;
          }
          ul.jsddm a {
              color: #000000;
              background-color: #F5DEB3;
              border: 1px solid #444;
              display: block;
              text-decoration: none;
              text-align: center;
              width: auto;
          }
          ul.flyout li {
              width: 100%;
              display:block;
              float:none;
          }
          ul.jsddm a:hover {
              color: #000;
              background-color: #FFF;
          }
          ul.flyout {
              display:none;
              position:absolute;
              top:38px;
              left:0px;
              width:100%;
          }
          ul.jsddm li:hover ul.flyout {
              display:block;
          }
      &lt;/style&gt;
  
      &lt;!-- Start WOWSlider.com HEAD section --&gt;
      &lt;link rel="stylesheet" type="text/css" href="engine1/style.css" /&gt;
      &lt;script type="text/javascript" src="engine1/jquery.js"&gt;&lt;/script&gt;
      &lt;!-- End WOWSlider.com HEAD section --&gt;
  
  &lt;/head&gt;
  &lt;link rel="shortcut icon"  href="./styles/icons/daikofavicon.ico" /&gt;
  
  &lt;body background="./styles/icons/background4.jpg"&gt;
      &lt;body style="background-image:url(./styles/icons/background4.jpg)"&gt;
  
      &lt;!--
          //navigation bar menu set up
      --&gt;
      &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;ul class="jsddm"&gt;
              &lt;li&gt;&lt;a href="index"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="services"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="gallery"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="window"&gt;WINDOWS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contactus"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;br/&gt;
      &lt;div id="wrapper"&gt;
  
          &lt;!-- Start WOWSlider.com BODY section --&gt;
          &lt;div id="wowslider-container1"&gt;
              &lt;div class="ws_images"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;img src="data1/images/img_1214.jpg" alt="Living and Dining Rooms" title="Living and Dining Rooms" id="wows1_0"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/100_2885.jpg" alt="100_2885" title="100_2885" id="wows1_1"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/img_3676.jpg" alt="Kitchen" title="Kitchen" id="wows1_2"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/img_3698.jpg" alt="Living Room" title="Living Room" id="wows1_3"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/100_2891.jpg" alt="100_2891" title="100_2891" id="wows1_4"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/dsc05866.jpg" alt="Living Room" title="Living Room" id="wows1_5"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/100_2888.jpg" alt="100_2888" title="100_2888" id="wows1_6"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/img_1224.jpg" alt="Basement" title="Basement" id="wows1_7"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="data1/images/img_1246.jpg" alt="Bathroom" title="Bathroom" id="wows1_8"/&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="ws_bullets"&gt;
                  &lt;div&gt;
                      &lt;a href="#" title="Living and Dining Rooms"&gt;&lt;img src="data1/tooltips/img_1214.jpg" alt="Living and Dining Rooms"/&gt;1&lt;/a&gt;
                      &lt;a href="#" title="100_2885"&gt;&lt;img src="data1/tooltips/100_2885.jpg" alt="100_2885"/&gt;2&lt;/a&gt;
                      &lt;a href="#" title="Kitchen"&gt;&lt;img src="data1/tooltips/img_3676.jpg" alt="Kitchen"/&gt;3&lt;/a&gt;
                      &lt;a href="#" title="Living Room"&gt;&lt;img src="data1/tooltips/img_3698.jpg" alt="Living Room"/&gt;4&lt;/a&gt;
                      &lt;a href="#" title="100_2891"&gt;&lt;img src="data1/tooltips/100_2891.jpg" alt="100_2891"/&gt;5&lt;/a&gt;
                      &lt;a href="#" title="Living Room"&gt;&lt;img src="data1/tooltips/dsc05866.jpg" alt="Living Room"/&gt;6&lt;/a&gt;
                      &lt;a href="#" title="100_2888"&gt;&lt;img src="data1/tooltips/100_2888.jpg" alt="100_2888"/&gt;7&lt;/a&gt;
                      &lt;a href="#" title="Basement"&gt;&lt;img src="data1/tooltips/img_1224.jpg" alt="Basement"/&gt;8&lt;/a&gt;
                      &lt;a href="#" title="Bathroom"&gt;&lt;img src="data1/tooltips/img_1246.jpg" alt="Bathroom"/&gt;9&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;span class="wsl"&gt;&lt;a href="http://wowslider.com"&gt;jQuery Slideshow&lt;/a&gt; by WOWSlider.com v4.0&lt;/span&gt;
              &lt;div class="ws_shadow"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="engine1/wowslider.js"&gt;&lt;/script&gt; 
          &lt;script type="text/javascript" src="engine1/script.js"&gt;&lt;/script&gt; 
          &lt;!-- End WOWSlider.com BODY section --&gt;
  
      &lt;/div&gt;
      &lt;?PHP  include('footer.php'); ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: "Vijaya", "Andalus", Serif;
      font-size: 20px;
      color: white;
      width: 866px;
      margin: auto;
      align: center;
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
  }
  ul.jsddm {
      margin: 0;
      padding: 0;
      position: relative;
      line-height: 2.0em;
  }
  ul.jsddm a {
      color: #000000;
      background-color: #F5DEB3;
      border: 1px solid #444;
      display: block;
      text-decoration: none;
      text-align: center;
      width: auto;
      height: 32px;
  }
  ul.jsddm a:hover {
      color: #000;
      background-color: #FFF;
      height: 32px;
  }
  ul.jsddm &gt; li {
      position: relative;
      float: left;
      list-style: none;
      width: 20%;
  }
  </code></pre>
  
  <p>HTML file for navigation bar that gets included on most pages for code reuse:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8'/&gt;
      &lt;link rel="stylesheet" href='jsddm.css'&gt;
      &lt;img src="./styles/icons/kitchen2.jpg" class="image" /&gt;
  &lt;/head&gt;
  &lt;body background="./styles/icons/background4.jpg"&gt;
      &lt;body style="background-image:url(./styles/icons/background4.jpg)"&gt;
  &lt;/body&gt;
  
      &lt;!--
       //include favicon for site
      --&gt;
      &lt;link rel="shortcut icon"  href="./styles/icons/daikofavicon.ico" /&gt;
  
      &lt;!--
          //jQuery to make navigation bar work and drop down 
      --&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function(){
  
            $("ul.jsddm li").hover(function(){
              $('ul:first',this).css('visibility', 'visible');        
               }, function(){
              $('ul:first',this).css('visibility', 'hidden');        
               });
             });
      &lt;/script&gt;
  
      &lt;!--
          //navigation bar menu set up referenced by css file jsddm
      --&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;ul class="jsddm"&gt;
              &lt;li&gt;&lt;a href="index"&gt;HOME&lt;/a&gt;
              &lt;li&gt;&lt;a href="services"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="gallery"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="window"&gt;WINDOWS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contactus"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;br/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>