7 Replies Latest reply on May 24, 2010 4:01 PM by Codefinger

    Float clearing - not displayng in DW

    JesseLY Level 1
      I have been using a "clear float" method that I read about in a CSS book for clearing floats when they extend out of the wrapper. The method works fine in browsers. The problem I have is that it does not display properly in DW Design View. This makes it difficult to edit the page easily, especially when a client is doing the editing in their own copy of DW.

      Here's a link to the page and what it should look like:

      http://www.jesseyoung.com/sugar_mtn/concept2/concept2_home_V2.html

      Here's a screenshot of how it looks in DW design view:
      http://www.jesseyoung.com/sugar_mtn/concept2/screenshot.html

      Here's a link to the CSS:
      http://www.jesseyoung.com/sugar_mtn/stylesheets/styles.css

      Suggestions?

      -Jesse
        • 1. Re: Float clearing - not displayng in DW
          Level 7
          > Here's a screenshot of how it looks in DW design view:

          Which version of DW?

          --
          Regards

          John Waller
          • 2. Re: Float clearing - not displayng in DW
            Level 7
            Which DW?

            Anyhow, if you are using anything earlier than CS4, I'm afraid you won't
            have much satisfaction with clearing your floats like this (and perhaps any
            other way).

            /*
            Clears floats within container, so container continues to wrap around
            contents
            */
            .clearfix:after {
            content:".";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
            }

            x.clearfix {display:inline-table;}
            /*Hides from IE-mac\*/
            *html .clearfix {height:1%;}
            .clearfix {display:block;}

            .clearfix:after {
            content:".";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
            }

            I always just use the overflow:hidden method elaborated on Thierry's site -
            http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp


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


            "JesseLY" <webforumsuser@macromedia.com> wrote in message
            news:gges1v$g6q$1@forums.macromedia.com...
            >I have been using a "clear float" method that I read about in a CSS book
            >for
            > clearing floats when they extend out of the wrapper. The method works fine
            > in
            > browsers. The problem I have is that it does not display properly in DW
            > Design
            > View. This makes it difficult to edit the page easily, especially when a
            > client
            > is doing the editing in their own copy of DW.
            >
            > Here's a link to the page and what it should look like:
            >
            > http://www.jesseyoung.com/sugar_mtn/concept2/concept2_home_V2.html
            >
            > Here's a screenshot of how it looks in DW design view:
            > http://www.jesseyoung.com/sugar_mtn/concept2/screenshot.html
            >
            > Here's a link to the CSS:
            > http://www.jesseyoung.com/sugar_mtn/stylesheets/styles.css
            >
            > Suggestions?
            >
            > -Jesse
            >

            • 3. Re: Float clearing - not displayng in DW
              JesseLY Level 1
              I'm using DW CS4.

              I've actually used that method a number of times with great success. But sometime (and only sometimes) I have the problem I'm describing above.

              I got this method from Pro CSS Techniques (apress, by Jeff Croft...). I'll check out the method you use. Gawd, this whole float issue is the one thing about CSS that drives me out of my mind.

              -Jesse


              • 4. Re: Float clearing - not displayng in DW
                Level 7
                > I've actually used that method a number of times with great success. But
                > sometime (and only sometimes) I have the problem I'm describing above.

                The comments I've seen lead me to conclude that this method is not a
                reliable one, particularly since there are others that are much simpler and
                completely reliable.

                If you want to understand floats, read the article I linked.

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


                "JesseLY" <webforumsuser@macromedia.com> wrote in message
                news:ggev96$k4n$1@forums.macromedia.com...
                > I'm using DW CS4.
                >
                > I've actually used that method a number of times with great success. But
                > sometime (and only sometimes) I have the problem I'm describing above.
                >
                > I got this method from Pro CSS Techniques (apress, by Jeff Croft...). I'll
                > check out the method you use. Gawd, this whole float issue is the one
                > thing
                > about CSS that drives me out of my mind.
                >
                > -Jesse
                >
                >
                >
                >

                • 5. Re: Float clearing - not displayng in DW
                  JesseLY Level 1
                  Wow, that's pretty cool. It seems to work in all the browsers I've tested it in. And it's so simple.

                  Funny, the article you sent me to made no sense to me. But I clicked one of the links, which lead me to yet another link...and eventually ended up with an article written by someone else that made sense. I guess we all just process the information in different ways.

                  This method looks promising...although I'm hesitant of getting too excited and having my heart broken again.

                  -Jesse
                  • 6. Re: Float clearing - not displayng in DW
                    Level 7
                    It works. Good luck!

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


                    "JesseLY" <webforumsuser@macromedia.com> wrote in message
                    news:ggfjtp$fb4$1@forums.macromedia.com...
                    > Wow, that's pretty cool. It seems to work in all the browsers I've tested
                    > it
                    > in. And it's so simple.
                    >
                    > Funny, the article you sent me to made no sense to me. But I clicked one
                    > of
                    > the links, which lead me to yet another link...and eventually ended up
                    > with an
                    > article written by someone else that made sense. I guess we all just
                    > process
                    > the information in different ways.
                    >
                    > This method looks promising...although I'm hesitant of getting too excited
                    > and
                    > having my heart broken again.
                    >
                    > -Jesse
                    >

                    • 7. Re: Float clearing - not displayng in DW
                      Codefinger Level 1

                      Hi there, in case anybody comes across this issue again, I had the same prob, compounded by 'edge case' situations where the .clearfix class wasn't enough. A solution (not ideal, but it does solve the problem) can be found here:

                       

                      http://forums.adobe.com/message/130568#130568

                       

                      It involves using a float clearance CSS technique (such as described above), and then adding markup to enforce clearance in Design Mode. I know adding markup is hardly ideal, but I added an alt="PLACEHOLDER" attribute to my markup clearance div, so I could 1) search and replace it out it later and 2) generate a validation error so I definately wouldn't miss it.

                       

                      -d