4 Replies Latest reply on Jul 19, 2007 9:55 PM by Newsgroup_User

    IE errors relating to padding on images.

    Level 7
      The other day I posted a message "CSS giving different results .....".
      Unfortunately the brain borer virus struck once again, and I posted the
      addresses of the local files, instead of the server versions. My apologies for
      wasting your time with this.

      I have since sorted out the sources of the problems I was complaining about
      then, which were caused by several obscure code errors. One of the problems was
      that I had specified the CSS styles in the php preamble, instead of in the head.
      Most of the styles still worked, but one or two did not.

      Unfortunately neither HTML nor CSS give any diagnostics, but nor do they fail
      predictably. Sometimes a very small HTML error will cause total disaster, but
      on other occasions a major error will have little if any observable effect.

      However in sorting these things out, I have established two different IE errors
      relating to padding on images. These are illustrated in:

      http://www.corybas.com/Cydalba/Test/Test_page_4.htm.

      In all examples I have a table with 2px padding containing an image.

      In example 1 the image is specified with the line:

      td><img src="./Images/Yellow.gif" width="10" height="160" /></td>

      and the table displays correctly. However in example 2 there is a space after
      the image specification:

      td><img src="./Images/Yellow.gif" width="10" height="160" /> </td>

      and additional padding is added at the bottom of the image. A linefeed has the
      same effect.

      This bug is particularly annoying, because I am much happier if I do not have
      </td>'s stuck on the end of a long line, where they can easily be copied or
      deleted accidentally, with usually disastrous results.

      The second bug occurs when you have image and text together in a table, as in
      examples 3, 5 and 6. Even though there is only a line or so of text, the image
      inherits the margin-bottom specification of the text, giving additional padding
      at the bottom of the image, as in example 3. In examples 5 and 6 I have
      overcome this by adding an additional line, which uses a style null_text in
      which the margins are specified as zero. It is only necessary that this line
      contains a space. I am not sure how small you can make the font size, but I
      have established that it cannot be zero.

      These bugs occur in both IE6 and IE7, but do not occur in Firefox 2.0.

      Clancy
        • 1. Re: IE errors relating to padding on images.
          Level 7
          > and the table displays correctly. However in example 2 there is a space
          > after
          > the image specification:
          >
          > td><img src="./Images/Yellow.gif" width="10" height="160" /> </td>

          This is a well known 'gotcha'. The space IS a character. It's in the cell.
          It must be displayed. It will cause the cell to expand in width, however,
          since the table controls the width of its cells - rather it causes the cell
          to expand vertically, resulting in what you see as a gap below the image.

          > This bug is particularly annoying, because I am much happier if I do not
          > have
          > </td>'s stuck on the end of a long line, where they can easily be copied
          > or
          > deleted accidentally, with usually disastrous results.

          If you convert that space to a simple line break (NOT a <br>) in the code,
          then you will not see the gap. However, the better method is to learn how
          to manage NOT copying or deleting those </td> tags.

          > inherits the margin-bottom specification of the text, giving additional
          > padding
          > at the bottom of the image, as in example 3.

          Actually, no. An image is an inline tag. As such, it is rendered in an
          inline text box, which ALWAYS leaves space below the baseline for text
          descenders. This is what you are seeing and interpreting as 'margin' being
          inherited. But it's not. You can eliminate that is one very simple way
          (assuming you are working on a page with a valid and complete doctype) -
          make the images display:block in your CSS.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Clancy" <clancy@cybec.com.au> wrote in message
          news:hqku93tuus5mkgu5v31pdvvu9lb6vunfvd@4ax.com...
          > The other day I posted a message "CSS giving different results .....".
          > Unfortunately the brain borer virus struck once again, and I posted the
          > addresses of the local files, instead of the server versions. My
          > apologies for
          > wasting your time with this.
          >
          > I have since sorted out the sources of the problems I was complaining
          > about
          > then, which were caused by several obscure code errors. One of the
          > problems was
          > that I had specified the CSS styles in the php preamble, instead of in the
          > head.
          > Most of the styles still worked, but one or two did not.
          >
          > Unfortunately neither HTML nor CSS give any diagnostics, but nor do they
          > fail
          > predictably. Sometimes a very small HTML error will cause total disaster,
          > but
          > on other occasions a major error will have little if any observable
          > effect.
          >
          > However in sorting these things out, I have established two different IE
          > errors
          > relating to padding on images. These are illustrated in:
          >
          > http://www.corybas.com/Cydalba/Test/Test_page_4.htm.
          >
          > In all examples I have a table with 2px padding containing an image.
          >
          > In example 1 the image is specified with the line:
          >
          > td><img src="./Images/Yellow.gif" width="10" height="160" /></td>
          >
          > and the table displays correctly. However in example 2 there is a space
          > after
          > the image specification:
          >
          > td><img src="./Images/Yellow.gif" width="10" height="160" /> </td>
          >
          > and additional padding is added at the bottom of the image. A linefeed has
          > the
          > same effect.
          >
          > This bug is particularly annoying, because I am much happier if I do not
          > have
          > </td>'s stuck on the end of a long line, where they can easily be copied
          > or
          > deleted accidentally, with usually disastrous results.
          >
          > The second bug occurs when you have image and text together in a table, as
          > in
          > examples 3, 5 and 6. Even though there is only a line or so of text, the
          > image
          > inherits the margin-bottom specification of the text, giving additional
          > padding
          > at the bottom of the image, as in example 3. In examples 5 and 6 I have
          > overcome this by adding an additional line, which uses a style null_text
          > in
          > which the margins are specified as zero. It is only necessary that this
          > line
          > contains a space. I am not sure how small you can make the font size, but
          > I
          > have established that it cannot be zero.
          >
          > These bugs occur in both IE6 and IE7, but do not occur in Firefox 2.0.
          >
          > Clancy


          • 2. Re: IE errors relating to padding on images.
            Level 7
            "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote:

            Thank you for your answer.

            I have updated the display page
            ( http://localhost/Corybas/Cydalba/Test/Test_page_4.htm) to test your
            suggestions, and unfortunately neither appear to be correct, as I will explain
            below.

            >> This bug is particularly annoying, because I am much happier if I do not have
            >> </td>'s stuck on the end of a long line, where they can easily be copied
            >> or deleted accidentally, with usually disastrous results.
            >
            >If you convert that space to a simple line break (NOT a <br>) in the code,
            >then you will not see the gap.

            Unfortunately a line break does not work. Example 4: now reads:

            <td><img src="../../Images/Yellow.gif" width="10" height="160"/>
            </td>

            but it still displays excess padding at the bottom. I do not know what controls
            the amount of this excess padding, but it is not the default para setting.

            >
            >> inherits the margin-bottom specification of the text, giving additional
            >> padding
            >> at the bottom of the image, as in example 3.
            >
            >Actually, no. An image is an inline tag. As such, it is rendered in an
            >inline text box, which ALWAYS leaves space below the baseline for text
            >descenders. This is what you are seeing and interpreting as 'margin' being
            >inherited. But it's not.

            This is clearly wrong. In examples 1, 2 and 7, I have an image inside a table,
            with no additional text and no stray spaces, and the padding is as specified in
            the table definition. However in cases 3, 5, 6, 8 and 9 the table also contains
            text on the right of the image, and additional padding is added to the bottom of
            the image, with a value corresponding to the margin bottom of the text. In
            cases 5 and 6 this value is zero, and no extra padding is added.

            >You can eliminate that is one very simple way
            >(assuming you are working on a page with a valid and complete doctype) -
            >make the images display:block in your CSS.

            I wouldn't guarantee the validity of the doctype, or that I have interpreted the
            display block correctly, but I have added the following definition to the CSS,
            and used it in examples 8 and 9, with no effect whatever on the additional
            padding.

            .img_l2 { display:block; float:left; border:none; padding-left:0;
            padding-bottom:0; padding-top:0; padding-right:10px; }

            I have tried to use the simplest possible layout in this example to make the
            code easy to check. As before, all examples still work correctly in Firefox.

            Clancy
            • 3. Re: IE errors relating to padding on images.
              Level 7
              Clancy <clancy@cybec.com.au> wrote:

              >I have updated the display page
              >( http://localhost/Corybas/Cydalba/Test/Test_page_4.htm) ...

              Damn brain borer again!

              The correct address is http://www.corybas.com/Cydalba/Test/Test_page_4.htm

              Clancy
              • 4. Re: IE errors relating to padding on images.
                Level 7
                "Clancy" <clancy@cybec.com.au> wrote in message
                news:jv50a39tp5a75j9e1101nesja28i8j7dc8@4ax.com...
                > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote:
                > Unfortunately a line break does not work. Example 4: now reads:
                >
                > <td><img src="../../Images/Yellow.gif" width="10" height="160"/>
                > </td>

                This has been a known issue in IE and it's not necessarily a bug. If you
                move Firefox from almost standards mode you full standards mode by using a
                strict DOCTYPE, you will find some issues with images.

                Short of a CSS workaround, the ONLY fix for IE is to tighten closing wrapper
                tags with the closing image tags. These scenarios produce gaps in IE:

                <td><img src="pic.gif"> </td>
                <td><img src="pic.gif">
                </td>
                <div><img src="pic.gif">
                </div>
                <div>
                <img src="pic.gif">
                </div>

                These do not:
                <td><img src="pic.gif"></td>
                <div><img src="pic.gif"></div>


                You can also fix it by floating the image inside its box as you discovered.


                --
                Al Sparber - PVII
                http://www.projectseven.com
                Extending Dreamweaver - Nav Systems | Galleries | Widgets
                Authors: "42nd Street: Mastering the Art of CSS Design"