8 Replies Latest reply: Apr 28, 2010 10:22 AM by -Samps- RSS

    IE8 adds extra top margin to <li> tag

    -Samps- Community Member

      I am noticing that IE8 adds more vertical space (top/bottom margin) between bulleted line items than in Firefox. I am pretty much just controlling this vertical space with the following CSS:

       

      ul {padding-left: 8px;
      margin-left: 7px;
      margin-top: 0px
      }

      li {font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      margin-top: 0px;
      margin-bottom: 4px;
      color: #666666;
      }

       

      My example of using these tags is:

      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                                       <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                                       <li>Wheels for easy moving.</li>
                                       </ul>

      Does anyone know why IE8 & Firefox display this differently, and how to fix?

        • 1. Re: IE8 adds extra top margin to <li> tag
          CVK-USA Community Member

          Heh, this is not gonna be too helpful I fear, but your provided example code doesn't show the problem here on my system (MSIE8 / FF 3.6.3 on Win7 x64). The margins/vertical spaces between the LIs are spot on, no difference in the browser here. Only difference i see is size of the bullet.

           

          Did you try setting both marging-top/bottom as well as padding-top/bottom and maybe line height for ul and li?

          • 2. Re: IE8 adds extra top margin to <li> tag
            Nancy O. CommunityMVP

            Try this:

             

            <!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=iso-8859-1" />
            <title>Unordered List Demos</title>
            
            <style type="text/css">
            
            /**zero out browser defaults**/
            * {margin:0; padding:0; line-height: 100%; font-size: 100%}
            
            /**for IE ONLY**/
            *body {font-size: 78%}
            
            ul, li{
            font:11px/1.5 Arial, Helvetica, sans-serif;
            color: #666;
            list-style: disc;
            margin-bottom: 0.50em;
            margin-left: 2em;
            }
            
            </style>
            </head>
            <body>
            <p>My example of using these tags is:</p>
            <ul>
            <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
            <li>Ample foam support grips for maximum safety of various exercise positions.</li>
            <li>Wheels for easy moving.</li>
            </ul>
            </body>
            </html>
            
            

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            • 3. Re: IE8 adds extra top margin to <li> tag
              -Samps- Community Member

              Thanks CVK-USA, I tried specifying line height in my CSS, and it helped quite a lot. Not quite 100% the same, but I can live with it. FYI I am viewing on FF 3.5.9 and MSIE8.

              • 4. Re: IE8 adds extra top margin to <li> tag
                -Samps- Community Member

                Hi Nancy, thanks for your reply. I tried doing what you said and it totally screwed the entire page up in around 10 different ways, so I undid that. I should have mentioned this is an asp file I'm working on. I did manage to get the page to look pretty close in both FF and IE8 with the following CSS:

                 

                ul {padding-left: 8px;
                margin-left: 7px;
                margin-top: 0px;
                line-height: 80%;
                }

                li {font-family: Arial, Helvetica, sans-serif;
                font-size: 11px;
                margin-top: 0px;
                margin-bottom: 8px;
                color: #666666;
                }

                 

                I can certainly live with this for this page, but for future pages, if I find myself in a spot where the 2 browsers need to display EXACTLY the same, I think you're onto something with your suggestion of a conditional command specifically for FF. I've never used code like that before. Do you know what I should use to specify a different line-height % just for FF in an asp file?

                • 5. Re: IE8 adds extra top margin to <li> tag
                  Nancy O. CommunityMVP
                  I tried doing what you said and it totally screwed the entire page up in around 10 different ways,

                   

                  That's because I zero out default browser settings on everything with the universal selector (*).  This removes padding, margins from everything.  All you have to do is add some to your selectors.

                   

                  I think you're onto something with your suggestion of a conditional command specifically for FF.

                  Sorry, but conditional comments or browser hacks are not supported by other web browsers.  Only good for IE because it is a non-standards web browser.

                   

                  Build your pages to look good in FF, Opera, Safari/Chrome.  If they break in IE, then add conditional comments to fix IE.  But it's best to avoid them if you can. 

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb
                  http://alt-web.blogspot.com

                  • 6. Re: IE8 adds extra top margin to <li> tag
                    -Samps- Community Member

                    Okay, I'll build for FF, and use a conditional comment for IE only. But I'm still not sure how exactly. I'm actually pretty new at this, so a lot of the code that you originally supplied is a mystery to me. So to keep things simple, let's say hypothetically, that I wanted a conditional comment for IE so that the color looks different in IE only. I tried the following and it didn't work. What am I doing wrong? hopefully won't require replacing a ton of code?

                     

                    <HTML>
                    <HEAD>
                    <TITLE>VB588 Pro Vibration Exerciser for Home or Commercial Use</TITLE>
                    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
                    <META name="keywords" content="VB588">
                    <META name="description" content="The">
                    <META content="MSHTML 6.00.2900.2523" name=GENERATOR>
                    <style type="text/css">
                    <!--

                    /**for IE ONLY**/
                    *li {color: #FF0000
                    }

                    ul {padding-left: 8px;
                    margin-left: 7px;
                    margin-top: 0px;
                    line-height: 80%;
                    }

                    li {font-family: Arial, Helvetica, sans-serif;
                    font-size: 11px;
                    margin-top: 0px;
                    margin-bottom: 8px;
                    color: #666666;
                    }

                    -->
                    </style>
                    </HEAD>
                    <BODY class="BodyBackground">
                    <ul>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                    </ul>
                    </BODY></HTML>

                    • 7. Re: IE8 adds extra top margin to <li> tag
                      Nancy O. CommunityMVP

                      For starters, the code you supplied has no document type declaration so it runs in quirks mode.  Quirks mode produces unexpected results in browsers.   Secondly, you have incorrectly added a hack to your CSS code.  The way you have done it won't work.  Below I use a conditional comment.   Firefox will produce list in gray.  IE will show red. Copy and paste this code into a new, blank HTML page.

                       

                       

                      <!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=iso-8859-1" />
                      <title>Untitled Document</title>
                      <style type="text/css">
                      
                      ul {padding-left: 8px;
                      margin-left: 7px;
                      margin-top: 0px;
                      line-height: 80%;
                      }
                      
                      li {font-family: Arial, Helvetica, sans-serif;
                      font-size: 11px;
                      margin-top: 0px;
                      margin-bottom: 8px;
                      color: #666666;
                      }
                      
                      </style>
                      
                      <!--conditional comment for all IE versions-->
                      <!--[if IE]>
                      <style type="text/css">
                      li {color: #FF0000;}
                      body {font-size: 76%}
                      </style>
                      <![endif]-->
                      
                      </head>
                      
                      <body>
                      <ul>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      <li>3/4&quot; Removable foam pad vibrating plate overlay for support and comfort.</li>
                      <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                      <li>Wheels for easy moving.</li>
                      </ul>
                      </body>
                      </html>
                      
                      

                       

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      http://alt-web.com/
                      http://twitter.com/altweb
                      http://alt-web.blogspot.com

                      • 8. Re: IE8 adds extra top margin to <li> tag
                        -Samps- Community Member

                        Awesome Nancy O, it worked. I seemed to be out of my league, so thanks for your patience in walking me through it all!

                         

                        Sam