15 Replies Latest reply: Apr 25, 2011 2:58 PM by lanitwitchell RSS

    Some editable regions are not editable

    lanitwitchell Community Member

      I'm having a problem with a site that I'm developing in Dreamweaver CS5. The secondary pages contain five editable regions. Two of them work. They are located in a div named .contentTop. Three editable regions do not work. In Design view, when I try to put my cursor inside one of these regions, a black circle with diagonal line appears. This is the same symbol I would get if I tried to edit a non-editable region. The three that don't work are in a div named .content. Here is a simplified diagram of that section of the page:

       

      div named .contentTop

           floating column with editable region (editable: yes)

           floating column with editable region (editable: yes)

           floating column not editable

      end div

      div named .content

           floating column with editable region (editable: no)

           floating column with editable region (editable: no)

           floating column with editable region (editable: no)

      end div

       

      If you'd like to look at this, please choose a secondary page rather than the home page. All three editable regions on the home page work fine. All pages are based on Dreamweaver Templates. Templates contain Library Items. I have been developing this site in code view. However it is quite inconvenient not to be able to use Design view. I do use a design-time.css to tweak the appearance of the page in design view but this does not affect the editable region problem. I have also checked the code to see that the TemplateBeginEditable and TemplateEndEditable comments are all correct. This problem has been encountered by another of our developers with his own copy of Dreamweaver CS5. Here are some details

       

      code location: beta.utah.edu (site is in development, so code will change)

      W3c validation: pages passed successfully

      doctype: xhtml 1.0 transitional

      platform: Mac OSX Snowleopard 10.6.6

      Dreamweaver CS5, version 11.0

        • 1. Re: Some editable regions are not editable
          Nancy O. CommunityMVP

          How many Templates are you using for this site?  I've counted more than 10 so far...

          Which specific pages are you having trouble editing?

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists 
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: Some editable regions are not editable
            lanitwitchell Community Member

            Thanks for looking at this!

             

            I know there are a lot of templates with this one. The main reason for this is that library items differ from Template to Template. In addition there are some Templates for third-level pages - no problems there. Here is a list of the problem pages and their associated Templates. They all have the same problem. The editable regions in the .content div are not editable.

             

            http://beta.utah.edu/future.html     secondary_future.dwt

            http://beta.utah.edu/students/index.html     secondary_students.dwt

            http://beta.utah.edu/faculty/index.html     secondary_faculty.dwt

            http://beta.utah.edu/academics/index.html     secondary_academics.dwt

            http://beta.utah.edu/research.html     secondary_research.dwt

            http://beta.utah.edu/about.html     secondary_ucomm.dwt

            http://beta.utah.edu/visitors.html     secondary_ucomm.dwt

            http://beta.utah.edu/arts.html     secondary_banner.dwt

            http://beta.utah.edu/outreach.html     secondary_banner.dwt

            • 3. Re: Some editable regions are not editable
              John Waller CommunityMVP

              The editable regions in the .content div are not editable.

               

              http://beta.utah.edu/future.html     secondary_future.dwt

               

              In <div class="row content">, I see three editable regions named: links, featured and events respectively.

               

              All are editable for me.

              • 4. Re: Some editable regions are not editable
                Nancy O. CommunityMVP

                Looking at this child page spawned from   'secondary_future.dwt'

                 

                The Editable regions are:

                     Featured

                     events

                     buttons

                     highlights

                     Links

                 

                You've wrapped them inside invalid code:

                 

                     <div class="row content">

                     <div class="spacer links"> etc...

                 

                CSS selector ID and Class names must NOT contain spaces.

                 

                     <div class="content">

                     <div class="links"> 

                Or

                     <div class="row_content">

                     <div class="spacer_links">

                 

                Now, if you're trying to apply 2 different classes to the same division, insert a comma between class names like so:

                 

                     <div class="row, content">

                     <div class="spacer, links">

                 

                You have some cleaning up to do in all of your Template.dwt files and CSS.

                 

                CSS Validator: http://jigsaw.w3.org/css-validator/

                 

                CSS Errors:

                .highlights p                                                                         Value Error :    margin Unknown dimension                                              0.3dem

                .third .content .links                                                                            Value Error :    border Parse Error

                #navTop .column ul, #navBottom .column ul:    Property lear doesn't exist : both                                             both

                 

                 

                HINT:  You could easily build your entire site off of 1 or 2 Template.dwt files and use Server-Side Includes (SSIs) instead of Library Items.  Much more efficient and far fewer hassles that way.

                 

                SSIs:

                http://www.smartwebby.com/web_site_design/server_side_includes.asp

                 

                More on Server-Side Includes
                http://forums.adobe.com/message/2112460#2112460

                 

                 

                Good luck,

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists 
                http://alt-web.com/
                http://twitter.com/altweb

                • 5. Re: Some editable regions are not editable
                  Zabeth69 CommunityMVP

                  I have run into this difficulty of not having editable regions accessible in Design View when a div has no stated height. This is a slight change in CS5, I believe.

                   

                  When you try to edit in a div with no stated height or width, click on the blue tab that indicates the editable region first. You might have to turn on Invisible Elements, if you are not seeing the blue tabs. View > Visual Aids > Invisible Elements.

                   

                  If you attempt to edit in a designated editable area that has no dimensions, you will not be able to 'find' the right place to edit (except in the code) unless you turn on the Invisible Elements. Even then, the editable input area will be sitting at the top left, inside the element with the EArea.

                   

                  I find that a good way of working with templated child pages is with the Document Window split vertically between code and Design View.

                   

                  Beth

                  • 6. Re: Some editable regions are not editable
                    John Waller CommunityMVP

                    Now, if you're trying to apply 2 different classes to the same division, insert a comma between class names like so:

                     

                         <div class="row, content">

                         <div class="spacer, links">

                     

                    Hi Nancy,


                    Multiple class names must be separated by whitespace, rather than commas.

                     

                    http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

                     

                    HINT:  You could easily build your entire site off of 1 or 2 Template.dwt files and use Server-Side Includes (SSIs) instead of Library Items.  Much more efficient and far fewer hassles that way.

                     

                    I was thinking the same thing.

                     

                    Or even a CMS like Joomla!

                     

                    The current multi-template/library item setup looks like a maintenance nightmare.

                    • 7. Re: Some editable regions are not editable
                      Nancy O. CommunityMVP

                      Hi Nancy,


                      Multiple class names must be separated by whitespace, rather than commas.

                      Hi John,

                      Uh, oh.  My bad.    

                      Thanks for pointing that out.

                      The current multi-template/library item setup looks like a maintenance nightmare.

                       

                      Yeah.  If it's not already, it surely will be later...

                       

                       

                      Nancy O.

                      • 8. Re: Some editable regions are not editable
                        lanitwitchell Community Member

                        Beth,

                        I hadn't tried clicking on the blue tab. I did so and all the content inside the editable region was selected. That's the first time I have been able to select this content from the Design view. However, I still could not select a given portion of that content inside the region. As a test, I tried adding a height of 300px to the .link class. It didn't solve the problem. I then decided to be thorough and add a height to .spacer, .fourcol, .content and .row. Didn't work. I then removed my test height elements within those styles. I'm a step closer, but the content is still not editable from the Design view.

                         

                        The div above this one, .contentTop has two editable regions. It has the same structure as the problem div.

                        <div class="row contentTop">

                             <div class="fourcol">

                                  <div class="spacer buttons"> <!-- TemplateBeginEditable name="buttons" -->

                                       content inside buttons class

                                  <!-- end .spacer .buttons --></div>

                             <!-- end .fourcol--></div>

                             more divs inside row div

                        <!-- end .row .contentTop --></div>

                         

                        It is puzzling why editable regions within this div work correctly and the ones below do not.

                        • 9. Re: Some editable regions are not editable
                          Zabeth69 CommunityMVP

                          On the definition for the enclosing div, try adding overflow: hidden; to the rule. It is possible that if the enclosing div also does not have a stated height, floated elements within it are hanging by the clothesline (so to speak) but not forcing the bottom of the div to be down below them. Another thing that might work is putting in a div with a clear: both; inside the enclosing div but below the floated content divs within it.

                           

                          Beth

                          • 10. Re: Some editable regions are not editable
                            lanitwitchell Community Member

                            Beth,

                            It's interesting that you'd suggest adding an overflow:hidden to the enclosing div to tie down the floaters. Originally I did have it in the .row div style rules. I have added it back in again. I also tried adding a <br /> after the floating columns inside the .row div and applied .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;} to it.

                             

                            I tried the <br class="clearfloat" /> below the floaters in the div above the problem div, between the good div and the problem div, and below the floaters within the problem div itself. The problem remained. I then removed the <br /> since it wasn't helping. I have left the overflow:hidden style in the .row style rules because that makes structural sense to me.

                             

                            I ran the example page, http://beta.utah.edu/future.html Through the W3C Markup Validation Service and the page does validate.

                             

                            The problem remains. I have valid code and editable regions that cannot be edited in design view.

                            • 11. Re: Some editable regions are not editable
                              Zabeth69 CommunityMVP

                              It's possible that adding a class to a <br /> doesn't work. I would try adding <div class="clearfloat"></div> an empty div with that class. I am here assuming that you have created that class. It won't apply a class that does not exist! But 'clear' one of the standard ones that I always make, to use this way.

                               

                              In many situations when I can't edit directly in Design View, I 'find' the spot in Code View, put the cursor there, and then the added contents will show up in the right place.

                               

                              It's continuing to be a conundrum for me, too. I have not had time or space to track down a true solution, myself. But I'm convinced that it has something to do with not 'seeing' the height of the container.

                               

                              You might try adding a display: block; to the div. I haven't tried it, but who knows!

                               

                              You seem to be wondering why the overflow: hidden; works. Me too, but it does seem to cause the enclosing div to actually enclose the floating elements. i ran across that technique while teaching, in a tutorial.

                               

                              Beth

                              • 12. Re: Some editable regions are not editable
                                Zabeth69 CommunityMVP

                                Here's another thought. Are the areas that don't show up editable happening in pages that are created by the same template, or are they created by nested templates (perhaps made from the same original template?).

                                 

                                Beth

                                • 13. Re: Some editable regions are not editable
                                  Nancy O. CommunityMVP

                                  You seem to be wondering why the overflow: hidden; works. Me too, but it does seem to cause the enclosing div to actually enclose the floating elements.

                                   

                                  @Beth,

                                   

                                  The magic of overflow:hidden

                                  http://colinaarts.com/articles/the-magic-of-overflow-hidden/

                                   

                                   

                                   

                                  Nancy O.
                                  Alt-Web Design & Publishing
                                  Web | Graphics | Print | Media  Specialists 
                                  http://alt-web.com/
                                  http://twitter.com/altweb

                                  • 14. Re: Some editable regions are not editable
                                    Zabeth69 CommunityMVP

                                    Brilliant! Thanks, Nancy,

                                    Beth

                                    • 15. Re: Some editable regions are not editable
                                      lanitwitchell Community Member

                                      Despite the helpful suggestions, I had pretty much given up on finding an answer. I can work in code view. But it is a definite limitation. Why even use Dreamweaver in that case.

                                       

                                      Then I found the answer. It is a CS5 Bug!!!

                                       

                                      I found documentation about the bug and a workaround here:

                                      http://www.dwcourse.com/dreamweaver/dreamweaver-cs5-bugs.php

                                      and

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

                                       

                                      The problem: A div contains editable regions and has a class that is set to overflow:hidden. The editable regions cannot be edited in Design view. Perhaps I should have suspected that this was a bug. Half the editable regions on a given page worked just fine and half did not. All were placed in divs with the same class.

                                       

                                      The workaround: Create a design-time stylesheet and give that class a rule  overflow:visible !important;

                                       

                                      I created the design-time stylesheet and attached it. Now all my editable regions are editable in Design view.

                                       

                                      I have submitted a bug report on this.