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

    IE8 adds extra top margin to <li> tag

    -Samps-

      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 Level 1

          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?

          1 person found this helpful
          • 2. Re: IE8 adds extra top margin to <li> tag
            Nancy OShea Adobe Community Professional & MVP

            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- Level 1

              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- Level 1

                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 OShea Adobe Community Professional & MVP
                  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- Level 1

                    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 OShea Adobe Community Professional & MVP

                      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- Level 1

                        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