4 Replies Latest reply: Apr 30, 2008 2:59 PM by Newsgroup_User RSS

    Removing White Space in Code Formatting

    thanser Community Member
      The dreaded gaps in IE that appear in layout tables is causing me headaches on a site I'm working on right now, and I'm finding that removing all of the nice, neat, orderly source code formatting that DW adds so well solves the problem.

      My question is, does anyone know of a way to select a page-full of source code, and apply a command to REMOVE all of the nice white space, indents, etc, to fix these gaps that appear in IE? I'm only selecting the code within the body tags.

      It's getting to be a pain selecting and backspacing the white spaces within this code. What a joke.

      Ironically, I've been making sites using layout tables for ten years now, and I've never had a problem with it in IE like I do presently.

      Can anyone suggest a work around to remove the white spaces within table code, to eliminate the gaps that appear in IE?

      Thanks.
        • 1. Re: Removing White Space in Code Formatting
          Newsgroup_User Community Member
          thanser wrote:

          > My question is, does anyone know of a way to select a page-full of source
          > code, and apply a command to REMOVE all of the nice white space, indents, etc,
          > to fix these gaps that appear in IE? I'm only selecting the code within the
          > body tags.

          I'm not sure but perhaps with find and replace, using a regular
          expression? I'm not very good at regex though, so can't go into more
          detail about it.

          > It's getting to be a pain selecting and backspacing the white spaces within
          > this code. What a joke.

          I bet!

          > Ironically, I've been making sites using layout tables for ten years now, and
          > I've never had a problem with it in IE like I do presently.

          Perhaps after 10 years it is time to abandon layout tables and embrace
          the very popular method of laying out your content using CSS
          Positioning. It's not without its difficulties in trying to get designs
          to appear the same cross-browser, but your html code will be infinitely
          cleaner and more efficient.
          • 2. Re: Removing White Space in Code Formatting
            Newsgroup_User Community Member
            > Can anyone suggest a work around to remove the white spaces within table
            > code,
            > to eliminate the gaps that appear in IE?

            Whitespace in code *can* cause this, but most often it does not.
            Frequently, these gaps are caused by the appearance of a failure to collapse
            the default margins around an element in a cell. We would really need to
            see your code to know why you are getting them.

            In addition, your use of "layout tables" troubles me and may be at the root
            of what is troubling you. If you are using Layout Mode to create these
            tables, then read on.

            In my opinion, there are three serious problems with Layout Mode -

            1. Perhaps most importantly, it sits between you and *real* HTML tables,
            and fools you into believing that concepts like "layout cell" and
            "autostretch" really mean something. They do not. As long as you use
            Layout Mode, you'll never learn one of the most important things for new web
            developers - how to build solid and reliable tables.

            2. Actually, #1 wouldn't be *so* bad, except that the code that is written
            by Layout Mode is really poor code. For example, a layout table contains
            MANY empty rows of cells. This can contribute to a table's instability.
            In addition, if your initial positioning of the table's cells is a bit
            complex,
            Layout Mode will throw in col- and rowspans aplenty as it merges and splits
            cells willy-nillly to achieve the pixel-perfect layout you have specified.
            Again,
            this is an extremely poor method for building stable tables, because it
            allows
            changes in one tiny cell's shape (i.e, dimensions) to ripple through the
            rest
            of the table, usually with unexpected and sometimes disastrous consequences.
            This is one of the primary reasons for the final result's fragility - read
            this -

            http://apptools.com/rants/spans.php

            3. The UI for Layout Mode is beyond confusing - many options that you might
            want to use are inaccessible, e.g., inserting another table, or layer onto
            the page.

            I can understand the new user's desire to use this tool to make their life
            easier,
            but the cost is just too heavy in my opinion.

            To make good tables, keep it simple. Put a table on the page, and begin to
            load your content. If you would want a different table layout, instead of
            merging or splitting cells, consider stacking tables or nesting simple
            tables instead, respectively.

            And above all, do not try to build the whole page with a single table!

            Luckily, Adobe understands the problems created for the unsuspecting user
            who falls into this trap, and has elected to remove this feature altogether
            from the next version of DW. The time is right for you to begin working
            with tables properly!

            To read more about this approach, visit the DW FAQ link in my sig, and run
            through the table tutorials.

            --
            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
            ==================


            "thanser" <webforumsuser@macromedia.com> wrote in message
            news:fv8qkc$5a8$1@forums.macromedia.com...
            > The dreaded gaps in IE that appear in layout tables is causing me
            > headaches on
            > a site I'm working on right now, and I'm finding that removing all of the
            > nice,
            > neat, orderly source code formatting that DW adds so well solves the
            > problem.
            >
            > My question is, does anyone know of a way to select a page-full of source
            > code, and apply a command to REMOVE all of the nice white space, indents,
            > etc,
            > to fix these gaps that appear in IE? I'm only selecting the code within
            > the
            > body tags.
            >
            > It's getting to be a pain selecting and backspacing the white spaces
            > within
            > this code. What a joke.
            >
            > Ironically, I've been making sites using layout tables for ten years now,
            > and
            > I've never had a problem with it in IE like I do presently.
            >
            > Can anyone suggest a work around to remove the white spaces within table
            > code,
            > to eliminate the gaps that appear in IE?
            >
            > Thanks.
            >

            • 3. Re: Removing White Space in Code Formatting
              thanser Community Member
              Thanks, both of you.

              Removing the code formatting from a document (besides creating code "spew" that is impossible to read) is a poor fix for these gaps in IE, for sure. I'm reluctant to keep doing this.

              Ironically, the PhotoShop/ImageReady slice-and-dice method of generating HTML pages with tables works perfectly fine, no gaps in IE.

              I'm not using layout mode in DW, no. I've yet to even mess with it. The original HTML file began as an output from ImageReady, if I recall correctly.

              Additionally, I HAVE begun implementing CSS DIV containers and styles for a few years now. I guess I inherently design things that I know I can hold together with a table and cells, but I should be smarter about using DW and using tables. And using CSS positioning, too!

              A nested table: I can remember when this was verboten, and not supported by some earlier browsers. Now it's normal practice.

              The site I'm currently working on is here:

              http://www.tomhanser.com/texas

              Thanks again.

              • 4. Re: Removing White Space in Code Formatting
                Newsgroup_User Community Member
                > Ironically, the PhotoShop/ImageReady slice-and-dice method of generating
                > HTML
                > pages with tables works perfectly fine, no gaps in IE.

                Actually not. Any wizard produced fragile HTML that breaks in unexpected
                ways as soon as you begin to add content. People who use this 'perfectly
                fine' method of creating web pages account for about 50% of the posts here
                on this forum.

                > I'm not using layout mode in DW, no.

                Slicing and dicing in Photoshop or Fireworks is functionally equivalent to
                everything (almost) I said about Layout mode.

                > A nested table: I can remember when this was verboten, and not supported
                > by
                > some earlier browsers. Now it's normal practice.

                Nested tables have always been supported *and* proper to use, but one had to
                know how to use them. The easiest way to 'poison' a nested table layout was
                to slice and dice exactly the way that PS/IR/FW does.

                Your particular page is going to have problems because a) you do not have a
                doctype specified on the page, b) you have used XHTML-type tag syntax
                there -

                <area shape="rect" coords="45,167,202,182" href="about.html" />

                I recommend that you open this page in DW, and use FILE | Convert > HTML
                4.01 Transitional. That will take care of both of those problems.

                --
                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
                ==================


                "thanser" <webforumsuser@macromedia.com> wrote in message
                news:fvaf96$11b$1@forums.macromedia.com...
                > Thanks, both of you.
                >
                > Removing the code formatting from a document (besides creating code "spew"
                > that is impossible to read) is a poor fix for these gaps in IE, for sure.
                > I'm
                > reluctant to keep doing this.
                >
                > Ironically, the PhotoShop/ImageReady slice-and-dice method of generating
                > HTML
                > pages with tables works perfectly fine, no gaps in IE.
                >
                > I'm not using layout mode in DW, no. I've yet to even mess with it. The
                > original HTML file began as an output from ImageReady, if I recall
                > correctly.
                >
                > Additionally, I HAVE begun implementing CSS DIV containers and styles for
                > a
                > few years now. I guess I inherently design things that I know I can hold
                > together with a table and cells, but I should be smarter about using DW
                > and
                > using tables. And using CSS positioning, too!
                >
                > A nested table: I can remember when this was verboten, and not supported
                > by
                > some earlier browsers. Now it's normal practice.
                >
                > The site I'm currently working on is here:
                >
                > http://www.tomhanser.com/texas
                >
                > Thanks again.
                >
                >
                >