11 Replies Latest reply on Mar 12, 2010 1:03 PM by osgood_

    Problem with extra space between vertical li in IE7

    starsavage

      I developed a CSS site in Dreamweaver. The left menu displays properly w/o spaces between the list items, in Firefox and Safari, but IE7 puts whitespace between them. i'm not sure if it's padding or margin or something else. Here's my CSS code.

       

      @import url("./whitespace-reset.css");
      @charset "UTF-8";
      body  {
          background: #c0b7b2 repeat;
          margin: 0;
          padding: 0;
          text-align: center;
          color: #000000;
          font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      #container  {
          width: 761px; 
          background: #FFFFFF;
          border: 0;
          text-align: left;
          height: 871px;
          margin: 0 auto;
      }
      #header  {
          height: 148px;
          width: 761px;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
      }
      #leftside {
          width: 158px;
          float: left;
          margin-top: -41px;
          padding: 0px 0px 0px 0px;
      }
      #leftside  ul.menu {
          padding: 0px 0px 0px 0px;
          font-style: none;
          margin: 0;
      }
      #leftside  ul.menu li {
          display: inline;
          list-style: none;
          padding: 0;
          margin: 0;
          height: 1%;
      }
      #leftside bottom {
          bottom: auto;
      }
      #leftspacer {
          width: 31px;
          float: left;
          height: 723px;
          margin-top: -41px;
          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: 5px 10px;
          padding: 0 0 0 0;
      }
      #footer  {
          padding: 0; /
          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: 10 0;
      }
      img.imageleft {
          float: left;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      img.imageright {
          float: right;
          padding: 5px 5px 5px 5px;
          text-align: right;
      }
      .imagecenter {
          text-align: center;
      }
      .fltrt {
          float: right;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      .fltlft {
          margin-right: 8px;
      }
      .clearfloat {
          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;
      }

       

      here's a link to the site http://www.elixir.biz/core/index.html

        • 1. Re: Problem with extra space between vertical li in IE7
          Dan in the Pan

          Sorry to get your hopes up but I have the same problem and want to get on the thread, no answers I'm afraid.

           

          Incidently how does it look in the live view? Mine has the white line in live view and internet explorer but not in firefox.

           

          Also the code between the blue box and the maroon box is exactly the same as the code between the maroon box and the pink box in both css and html

           

           

           

          screen shot in live view.jpg

          CODE:

          <!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>Untitled Document</title>
          <link href="tmok.css" rel="stylesheet" type="text/css" />
          <style type="text/css">
          <!--
          body, td, th {
              font-family: Arial, Helvetica, sans-serif;
              background-color: #000;
          }
          h1 {
              font-size: small;
              color: #FF0;
              float: left;
          }
          h2 {
              font-size: small;
              color: #000;
          }
          a {
              font-size: medium;
              color: #CCC;
              font-weight: bold;
          }
          a:visited {
              color: #000;
          }
          a:hover {
              color: #FFF;
          }
          -->
          </style>
          <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
          <style type="text/css">
          <!--
          body {
              margin-left: 0px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
          }
          -->
          </style>
          </head>
          <body>
          <div id="shell">
            <div id="banner"><img src="images/tmeheaderblack1.jpg" width="800" height="130" alt="国領英会話" /></div>
            <div id="r1c1"><span id="head1">Company Classes</span><img src="images/pre_financial2.jpg" alt="Company Classes" width="133" height="100" class="rightfloatimage" /><span id="indextext">4 students each paying &yen;2,250 we come to your office so you don't need to travel</span> </div>
            <div id="r1c2"><span id="head1">Group Lessons</span><img src="images/lifestyle_stock_photo.jpg" alt="Group lessons" width="133" height="100" class="rightfloatimage" /><span id="indextext">take your English to the next level from as little as &yen;1,250ph</span> </div>
            <div id="r1c3"><span id="head1">Private Tuition</span><img src="images/draughts_board_238709.jpg" alt="Private tuition" width="100" height="120" class="rightfloatimage" /><span id="indextext">Enjoy studying at your own pace from as little as &yen;4,400ph</span></div>
            <div id="r2c1"><span id="head1">Lessons at Home</span><img src="images/tea 2" alt="Home Lessons" width="116" height="116" class="rightfloatimage" /><span id="indextext">Rain or shine, relax at home and not worry about who looks after the kids</span></div>
            <div id="r2c2"><span id="head1">Other</span><img src="images/bungee_jump_queenstown_8135686.jpg" alt="Other" width="90" height="120" class="rightfloatimage" /><span id="indextext">Intensive courses, TOEIC, TOEFL, EIKAN, IELTS, Medical, IT etc</span></div>
            <div id="r2c3"><span id="head1">Kids Classes</span><img src="images/JHerb Classroom.JPG" alt="Kids Classes" width="126" height="101" class="rightfloatimage" /><span id="indextext">Private tuition from just &yen;2,700</span></div>
            <div id="footer">
              <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a class="MenuBarItemSubmenu" href="#">Teachers</a>
                  <ul>
                    <li><a href="#">Item 1.1</a></li>
                    <li><a href="#">Item 1.2</a></li>
                    <li><a href="#">Item 1.3</a></li>
                  </ul>
                </li>
                <li><a href="#">Location</a></li>
                <li><a class="MenuBarItemSubmenu" href="#">About</a>
                  <ul>
                    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                      <ul>
                        <li><a href="#">Item 3.1.1</a></li>
                        <li><a href="#">Item 3.1.2</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Item 3.2</a></li>
                    <li><a href="#">Item 3.3</a></li>
                  </ul>
                </li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Untitled Item</a></li>
                <li><a href="#">Policy</a></li>
              </ul>
            </div>
          </div>
          <div align="left"></div>
          <div align="center"> </div>
          <script type="text/javascript">
          <!--
          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
          //-->
          </script>
          </body>
          </html>

           

          CSS:

          @charset "utf-8";
          /* CSS Document */

           

          #shell {
              width: 800px;
              background-color: #FFF;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
              overflow: hidden;
              left: auto;
              top: auto;
              right: auto;
              bottom: auto;
              text-align: left;
              margin: auto;
              height: 600px;
              padding: 3em;
          }
          #banner {
              height: 170px;
              width: 800px;
          }
          #r1c1 {
              background-color: #00F;
              height: 150px;
              width: 266.66px;
              float: left;
             
          }
          #r2c1 {
              background-color: #F00;
              height: 150px;
              width: 266.66px;
              float: left;
             
          }
          #r2c2 {
              background-color: #0FF;
              height: 150px;
              width: 266.66px;
              float: right;
          }
          #r2c3 {
              background-color: #0F0;
              float: right;
              height: 150px;
              width: 266.66px;
          }
          #indextext {
              font-family: Arial, Helvetica, sans-serif;
              width: 110px;
              float: left;
              margin: 5px;
              font-size: small;
              border: thin none #CCC;
          }

           

          #r1c2 {
              background-color: #F99;
              width: 266.66px;
              height: 150px;
              float: right;
          }
          #r1c3 {
              background-color: #990033;
              float: right;
              height: 150px;
              width: 266.66px;
          }
          .rightfloatimage {
              margin: 5px;
              float: right;
          }
          #details {
              font-family: Arial, Helvetica, sans-serif;
              font-size: medium;
              color: #F0F;
              text-decoration: underline;
              float: left;
              margin: 2px;
              font-weight: bold;
              text-transform: uppercase;
              padding: 3px;
          }
          #head1 {
              font-family: Arial, Helvetica, sans-serif;
              font-size: medium;
              margin: 5px;
              float: left;
              overflow: hidden;
              text-align: left;
              width: 110px;
              color: #FF0;
              font-weight: bolder;
          }

           

           

          • 2. Re: Problem with extra space between vertical li in IE7
            starsavage Level 1

            Sorry don't know what you mean about live view. This IS  a LIVE view.

            • 3. Re: Problem with extra space between vertical li in IE7
              Dan out of the Pan

              Sorry to have hijacked your thread and whatsmore I seem to have solved my problem.

               

              The way I did it was:

               

              I had the first box floated left and the second two floated right, by floating them all right it fixed my problem. (I'm sure I tried that before though )

               

              Good luck and once again apologies.

              • 4. Re: Problem with extra space between vertical li in IE7
                osgood_ Level 8

                starsavage wrote:

                 

                I developed a CSS site in Dreamweaver. The left menu displays properly w/o spaces between the list items, in Firefox and Safari, but IE7 puts whitespace between them. i'm not sure if it's padding or margin or something else. Here's my CSS code.

                 


                 

                Add the below to your css stylesheet:

                 

                #leftside .menu img {
                display: block;
                }

                • 5. Re: Problem with extra space between vertical li in IE7
                  starsavage Level 1

                  Wow. Thanks that worked!

                  • 6. Re: Problem with extra space between vertical li in IE7
                    starsavage Level 1

                    hi:

                     

                    Hope you don't mind my asking another question. When I look at the site in

                    firefox there's 3px of white space  at the top of the left nav, and left

                    spacer, 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

                     

                    Thanks in advance for you help.

                    • 7. Re: Problem with extra space between vertical li in IE7
                      osgood_ Level 8

                      starsavage wrote:

                       

                      hi:

                       

                      Hope you don't mind my asking another question. When I look at the site in

                      firefox there's 3px of white space  at the top of the left nav, and left

                      spacer, 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

                       

                      Thanks in advance for you help.

                       

                      I would re-contruct that page, it's really set up rather awkwardly

                       

                      All you need is two columns side by side then everything will line up without trying to resort to unstable methods such as negative margins.

                       

                      Why you've chosen to have the header <div> spanning the whole width of the design and then force something to sit over it is really not a great way to build.

                       

                      You have all the bits. I would start the contruct over with a simple two column arrangement.

                      1 person found this helpful
                      • 8. Re: Problem with extra space between vertical li in IE7
                        starsavage Level 1

                        Thanks for the input. Of course the last thing I want to do is start over!

                        • 9. Re: Problem with extra space between vertical li in IE7
                          osgood_ Level 8

                          starsavage wrote:

                           

                          Thanks for the input. Of course the last thing I want to do is start over!

                          ok, well I have to be honest don't I. The <div> construction is goofy.

                           

                          The thing is if you had tested the initial page out before building the rest of the pages you could have put it right at an early stage until waiting until the "horse has bolted' to coin a phrase.

                           

                          To fill in that gap why don't you use the piece of the figure that appears to be missing and a bit of pink to the right of it and attach it as a background image to the "header" <div> That should work, without anyone noticing the 'sticking plaster' fix.

                           

                           

                          OR

                           

                          just use the whole of the top image plus the logo as a background image attached to the container <div> that would be a cleaner approach. It would fill that gap and no one would notice. Use a bit more of the depth of the image than you currently have so it fills the gap.

                           

                           

                          Then next time you plan to build a site actually sit down for a bit and plan it before you go rushing in

                          1 person found this helpful
                          • 10. Re: Problem with extra space between vertical li in IE7
                            starsavage Level 1

                            Ok I'll try that. You're so right about my dev skills. I'm stabbing around

                            in the dark. Next time I'll be more proactive about testing. The two column

                            is still something I'm considering if I can't fix it with glue. )) I'll

                            let you know if it works. Thanks.

                            • 11. Re: Problem with extra space between vertical li in IE7
                              osgood_ Level 8

                              It's actually the 'top' <div> you need to apply the background image to not the 'header' <div> if you try that option.