5 Replies Latest reply on Jan 5, 2009 4:00 PM by Newsgroup_User

    Design quirk in IE 6, help wanted

    ShadowXen
      I am building a site for a non-profit organization. I have a complete design for the home page, which I created in photoshop, sliced up and loaded into <divs>. A slice for the header, footer navigation, and content. Frankly I'm regretting doing it in PS since I constrained my page size too much by doing so, but that's neither here nor there.

      I created a design across the entire canvas in PS, so when I sliced it up and put it into divs next to each other, the background would appear whole again. It looks right in Firefox and IE 7, but in IE 6 there is a tiny split between the footer and the rest of the content, and a tiny split between the header and the content.

      In addition, while there is only a split between the content and the footer, the design is actually misaligned between the content and the header. This effect only occurs in IE 6.

      I wish I had a way to attach a screenshot to this, I hop you folks can help me regardless.
        • 1. Re: Design quirk in IE 6, help wanted
          Level 7
          For the tiny split try:

          img {
          display: block;
          }

          You know css?


          ShadowXen wrote:
          > I am building a site for a non-profit organization. I have a complete design
          > for the home page, which I created in photoshop, sliced up and loaded into
          > <divs>. A slice for the header, footer navigation, and content. Frankly I'm
          > regretting doing it in PS since I constrained my page size too much by doing
          > so, but that's neither here nor there.
          >
          > I created a design across the entire canvas in PS, so when I sliced it up and
          > put it into divs next to each other, the background would appear whole again.
          > It looks right in Firefox and IE 7, but in IE 6 there is a tiny split between
          > the footer and the rest of the content, and a tiny split between the header and
          > the content.
          >
          > In addition, while there is only a split between the content and the footer,
          > the design is actually misaligned between the content and the header. This
          > effect only occurs in IE 6.
          >
          > I wish I had a way to attach a screenshot to this, I hop you folks can help me
          > regardless.
          >
          • 2. Design quirk in IE 6, help wanted
            ShadowXen Level 1
            Your suggestion didn't help, but I do appreciate it thank you.

            I was able to upload a screenshot of what I see in IE 6, you can see from looking at the background how things are SUPPOSED to line up. You can see the split at the header and footer, as well as the "misalignment" look of the header.

            In Firefox and IE 7, the page loads completely whole and seamless.


            screenshot
            • 3. Re: Design quirk in IE 6, help wanted
              Level 7
              In this case a picture is NOT worth 1000 words. In fact, it isn't worth a
              simple link to the actual page.

              Nonetheless, IE6 has a bad habit of showing space in the code as space on
              the page. Often, for example:
              </div>
              <div>
              in the code will display as a vertical space on the page between the bottom
              of the first div and the top of the second. If you code looks like that at
              the point you see the extra space or gap rewrite it to:
              </div><div>

              Might work.

              --

              Walt


              "ShadowXen" <webforumsuser@macromedia.com> wrote in message
              news:gju1o6$qe4$1@forums.macromedia.com...
              >I was able to upload a screenshot of what I see in IE 6, you can see from
              > looking at the background how things are SUPPOSED to line up. You can see
              > the
              > split at the header and footer, as well as the "misalignment" look of the
              > header.
              >
              > In Firefox and IE 7, the page loads completely whole and seamless.
              >
              >
              > http://placeholder.x10hosting.com/screenshot.gif
              >


              • 4. Re: Design quirk in IE 6, help wanted
                Level 7
                It would be more like this -

                <img ...>
                <td>

                Make it like this -

                <img ...></td>

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "Walt F. Schaefer" <walt@waltswebworx.com> wrote in message
                news:gju2qp$rr6$1@forums.macromedia.com...
                > In this case a picture is NOT worth 1000 words. In fact, it isn't worth a
                > simple link to the actual page.
                >
                > Nonetheless, IE6 has a bad habit of showing space in the code as space on
                > the page. Often, for example:
                > </div>
                > <div>
                > in the code will display as a vertical space on the page between the
                > bottom of the first div and the top of the second. If you code looks like
                > that at the point you see the extra space or gap rewrite it to:
                > </div><div>
                >
                > Might work.
                >
                > --
                >
                > Walt
                >
                >
                > "ShadowXen" <webforumsuser@macromedia.com> wrote in message
                > news:gju1o6$qe4$1@forums.macromedia.com...
                >>I was able to upload a screenshot of what I see in IE 6, you can see from
                >> looking at the background how things are SUPPOSED to line up. You can see
                >> the
                >> split at the header and footer, as well as the "misalignment" look of the
                >> header.
                >>
                >> In Firefox and IE 7, the page loads completely whole and seamless.
                >>
                >>
                >> http://placeholder.x10hosting.com/screenshot.gif
                >>
                >
                >

                • 5. Re: Design quirk in IE 6, help wanted
                  Level 7
                  Maybe. I just know that I've been bitten by the code I showed. I put the
                  </div><div> like that and Viola!, no more space.

                  You see, although Viola loves web development she eschews superfluous
                  spaces.

                  --

                  Walt


                  "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                  news:gju30a$s03$1@forums.macromedia.com...
                  > It would be more like this -
                  >
                  > <img ...>
                  > <td>
                  >
                  > Make it like this -
                  >
                  > <img ...></td>
                  >
                  > --
                  > Murray --- ICQ 71997575
                  > Adobe Community Expert
                  > (If you *MUST* email me, don't LAUGH when you do so!)
                  > ==================
                  > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  > ==================
                  >
                  >
                  > "Walt F. Schaefer" <walt@waltswebworx.com> wrote in message
                  > news:gju2qp$rr6$1@forums.macromedia.com...
                  >> In this case a picture is NOT worth 1000 words. In fact, it isn't worth a
                  >> simple link to the actual page.
                  >>
                  >> Nonetheless, IE6 has a bad habit of showing space in the code as space on
                  >> the page. Often, for example:
                  >> </div>
                  >> <div>
                  >> in the code will display as a vertical space on the page between the
                  >> bottom of the first div and the top of the second. If you code looks like
                  >> that at the point you see the extra space or gap rewrite it to:
                  >> </div><div>
                  >>
                  >> Might work.
                  >>
                  >> --
                  >>
                  >> Walt
                  >>
                  >>
                  >> "ShadowXen" <webforumsuser@macromedia.com> wrote in message
                  >> news:gju1o6$qe4$1@forums.macromedia.com...
                  >>>I was able to upload a screenshot of what I see in IE 6, you can see from
                  >>> looking at the background how things are SUPPOSED to line up. You can
                  >>> see the
                  >>> split at the header and footer, as well as the "misalignment" look of
                  >>> the
                  >>> header.
                  >>>
                  >>> In Firefox and IE 7, the page loads completely whole and seamless.
                  >>>
                  >>>
                  >>> http://placeholder.x10hosting.com/screenshot.gif
                  >>>
                  >>
                  >>
                  >