1 Reply Latest reply on Mar 12, 2010 12:41 PM by osgood_

    White space in FF at top of div

    starsavage

      I'm developing a site and when i look at it in firefox there's 3px of white space at the top of the left nav, and leftspacer, but not in safari. The top menu is 38px and I've put a -38px top margin value in the #leftside and #lefspacer to compensate for that. site address is > http://www.elixir.biz/core/index.html.

       

      here's the code:

       

      @import url("./whitespace-reset.css");
      @charset "UTF-8";
      body  {
          background: #c0b7b2 repeat;
          margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
          padding: 0;
          text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
          color: #000000;
          font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      #container  {
          width: 761px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
          background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
          border: 0;
          text-align: left; /* this overrides the text-align: center on the body element. */
          height: 871px;
          margin: 0;
          padding: 0;
      }
      #header  {
          height: 148px;
          width: 761px;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
      }
      #leftside {
          width: 158px;
          float: left;
          margin-top: -38px;
          padding: 0px 0px 0px 0px;
      }
      #leftside .menu img {
          display: block;
          margin: 0;
      }
      #leftside  ul.menu {
          padding: 0px 0px 0px 0px;
          font-style: none;
          margin: 0;
      }
      #leftside ul.menu li {
          display: inline;
          float: left;
          margin: 0;
          padding: 0;
          list-style: none;
      }
      #leftspacer {
          width: 31px;
          float: left;
          height: 723px;
          margin-top: -38px;
          padding-right: 10px;
          background-image: url(images/home_spacer_left.jpg);
          background-repeat: no-repeat;
      }
      #top  {
          margin-top: 0px;
          height: 38px;
          padding: 0px 0px 0px 0px;
      }
      #top ul.menu {
          margin-top: 0px;
          margin-left: 189px;
          float: left;
          padding: 0px 0px 0px 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          list-style: none;
      }
      #top ul.menu li {
          display: inline;
          list-style: none;
          float: left;
          margin: 0;
          padding: 0;
      }
      #bottom {
          height: 22px;
          left: 468px;
      }
      #bottom ul.menu {
          margin-top: 300px;
          margin-right: -23px;
          float: left;
          margin-left: -61px;
          list-style: none;
      }
      #bottom ul.menu li {
          display: inline;
          list-style: none;
          float: left;
      }
      #mainContent  {
          margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
          padding: 0 0 0 0;
      }
      #facilitiesContent {
          background: url(images/facilities_bg.jpg) repeat;
          margin: 0px;
          padding: 0;
          height: 208px;
          width: 572px;
      }
      div.facilities {
          background: url(images/facilities_bg.jpg) repeat;
          height: 208px;
          width: 572px;
      }
      #footer  {
          padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
          background:#c0b7b2;
          height: 22px;
      }
      #threepix {
          margin-left: 189px;
          margin-right: 0px;
          height: 114px;
      }
      #col1 {
          position: relative;
      }
      #col1-a {
          position: absolute;
          width: 275px;
          right: 0px;
          top: 0px;
      }
      #col1-b {
          position: absolute;
          right: 0px;
          width: 275px;
          top: 0px;
      }
      #pixcopyleft {
          margin-left: 189px;
          font-size: 1em;
          font-family: Arial, Helvetica, sans-serif;
          margin-top: 10px;
      }
      #pixcopyright {
          font-size: 1em;
          margin-left: 189px;
          font-family: Arial, Helvetica, sans-serif;
          margin-top: 10px;
      }
      #footer ul.menu {
          margin-left: 189px;
          margin-right: 0px;
          margin-top: -22px;
          padding: 0px 0px 0px 0px;
          float: left;
      }
      #footer ul.menu li {
          display: inline;
          list-style: none;
          padding: 0px 0px 0px 0px;
          float: left;
      }
      #footer  p  {
          margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
          padding: 10 0;
      }
      img.imageleft {
          float: left;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      img.imageright {
          float: right;
          padding: 5px 0px 5px 5px;
          text-align: right;
      }
      .imagecenter {
          text-align: center;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      .fltlft { /* this class can be used to float an element left in your page */
          float: left;
          margin-right: 8px;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
          clear:both;
          height:0px;
          font-size: 1px;
          line-height: 0px;
      }
      h1 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1em;
          font-weight: bold;
          margin-bottom: 3px;
      }

       

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"><head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Core Pilates Programs</title>
      <link href="core.css" rel="stylesheet" type="text/css" />
      <body bgcolor="#c0b7b2">
      <script type="text/javascript">
      <!--
      function MM_swapImgRestore() { //v3.0
        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
      }
      function MM_preloadImages() { //v3.0
        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      }

       

      function MM_findObj(n, d) { //v4.01
        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
        if(!x && d.getElementById) x=d.getElementById(n); return x;
      }

       

      function MM_swapImage() { //v3.0
        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
      }
      //-->
      </script>
      <meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
      <meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
      </head>

       

      <body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_thestudio_roll. jpg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main _ourteam_roll.jpg','images/nav_main_contactus_roll.jpg','images/nav_main_rates_roll.jpg')" >

       

      <div id="container">
      <div id="header">   
          <img src="images/home_header.jpg" align="left"/><a href="index.html"><img src="images/home_logo_core.jpg"/>    </a>     
        <!-- end #header --></div>

       

      <div id ="top">
         <ul class="menu">
            <li> <a href="pilates.html"> <img src="images/subnav_programs_pilates_up.jpg"/></a></li>
            <li> <a href="gyrotonic.html"> <img src="images/subnav_programs_gyrotonic_up.jpg"/></a></li>
            <li> <a href="why-core.html"> <img src="images/subnav_programs_whycore_up.jpg"/></a></li>
            <li> <a href="schedule.html"> <img src="images/subnav_programs_schedule_up.jpg"/></a></li>
            <li> <img src="images/subnav_programs_back.jpg"/></li>
         </ul>
      <!-- end #top --></div>
      <div id="leftside">
         <ul class="menu">
            <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
            <li><a href="programs.html"><img src="images/nav_main_programs_down.jpg"></a></li>
            <li><a href="the-studio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('the_studio','','images/nav_main_thestudio_roll.jpg',1)"><img src="images/nav_main_thestudio_up.jpg" name="the_studio" width="158" height="39" border="0" id="the_studio" /></a></li>
            <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
            <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
            <li><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our_team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our_team" width="158" height="39" border="0" id="our_team" /></a></li>
            <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact_us" width="158" height="39" border="0" id="contact_us" /></a></li>
            <li><img src="images/nav_main_space_below.jpg" /></li>
            <li><a href="mailto:test@test.com"><img src="images/home_email.jpg" /></a></li>
            <li><img src="images/home_address.jpg" /></li>
            <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
         </ul>
      <!-- end #leftside --></div>
      <div id="leftspacer">
      <!-- end #leftspacer --></div>
      <div id="mainContent">
          <p><img src="images/hcp48021.jpg" class="imageleft" scr="images/nav_bottom_left_space.jpg"/> <img src="images/hcp48021.jpg" class="imageleft" scr="images/nav_bottom_left_space.jpg"/> <img src="images/hcp48021.jpg" class="imageright" scr="images/nav_bottom_left_space.jpg"/><br />
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio.  </p>
          <p align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
      <!-- end #mainContent --></div>
        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
         <ul class="menu"> 
             <li><img src="images/nav_bottom_left_space.jpg"/></a></li>
             <li><a href="home.html"> <img src="images/nav_bottom_home.jpg"/></a></li>
             <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"/></a></li>
             <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"/></a></li>
             <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"></a></li>
             <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"/></a></li>
             <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"/></a></li>
             <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"/></a></li>
         </ul>
        <!-- end #footer --></div>
      <!-- end #container --></div>

       

      </body>
      </html>