Skip navigation
Laurensvo92
Currently Being Moderated

Dreamweaver keeps closing DIVs for no reason.

Nov 26, 2012 9:10 AM

Tags: #problem #dreamweaver #cs6 #divs

Every time I enter />, Dreamweaver automatically types </div> or end a P tag. Even though all my Divs and P tags have been closed all ready. Is this a bug? If so which is the best method of reporting to the developers and making sure that this bug report does not ignored?

 
Replies
  • Currently Being Moderated
    Nov 26, 2012 9:20 AM   in reply to Laurensvo92

    Let's see an example source from a page.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 26, 2012 9:53 AM   in reply to Laurensvo92

    Before rushing to judgement about bugs, validate your code. 

    http://validator.w3.org/

     

    I'll wager 4 Mocha Lattes that you have neglected to close something somewhere. 

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Nov 27, 2012 5:31 AM   in reply to Laurensvo92

    At line 78,  you did forget to close the <p> tag for the paragraph. You should also close all your image tags too.

     

    Just trying to be helpful.

     

    Jim

     

    PS-Validating the code has little to do with a table layout, the errors can be corrected.

     

     

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 5:38 AM   in reply to Jim Carpenter

    It actually starts before Jim's suggestion.  There is no valid document type declaration nor is there a character encoding.  Here's a list of valid doctypes.

     

    http://www.w3.org/QA/2002/04/valid-dtd-list.html

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 7:40 AM   in reply to Laurensvo92

    Laurens, that is only a partial document type declaration. So it could lead to other problems and even fixing what Jim said could potentially cause issues with DW since it might not know what to close and what not to close because there are slight differences in HTML from XHTML to HTML.  The default declaration for XHTML 1.0 Transition (w/ charset declaration) which your document resembles because of the img tag closing style is:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    </head>

     

    In contrast the default HTML5 doctype is much simpler:

     

    <!DOCTYPE HTML>

     

    And instead of your "link" in the head ending in />, in HTML5 it would end with >.  Same thing would go for the img tag which in XHTML ends with /> and HTML5 is >.  If tags don't match the doctype what happens is that browsers go into what is known as quirks mode whereby the browser uses internal programming to guess at how the layout should be rendered if there is incorrect HTML code in the document. Sometimes nothing is noticable, and others it completely destroys a layout. Because the quirks mode is determined by the browser you can see different versions from browser to browser and browser version to browser version.

     

    To answer your tables question, a table-based layout can validate easily.  Look at HTML emails which do not allow positioned based layout and rely solely on table-based layout. However, for website design it is better to use position-based layouts because they are more adaptive and can be responsive whereby table layouts are not nearly as flexible in that respect.

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Nov 27, 2012 8:43 AM   in reply to SnakEyez02

    SnakeEyez is correct that you need to correct the doc type. It is important for that to be correct. I am not sure what version of DW  you are using, it can be as simple as Modify/Page Properties/Titles//Encoding

     

    Try to fix your validation errors on the doc type is set. Fix them one at a time, it will all benefit  you in the end process.

     

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 9:04 AM   in reply to Laurensvo92

    Laurensvo92 wrote:

     

    I'm sure I read on a forum that a table layout will not get validated because tables were not designed for

    for this. Or is this incorrect?

     

     

    That is not exactly correct...

     

    It is best practice to use css controlled <div> tags for layout, however there is nothing inherantly "invalid" to using tables if you want to. Certain table attributes  are considered obsolete and won't validate in HTML 5, because css is the standard for controlling them now.

     

    The list of obsolete table attributes is:

     

    summary

    align

    width

    height (technically never existed, but some browsers would fake it)

    bgcolor

    border

    cellpadding

    cellspacing

    frame

    rules

     

    The bold ones were the most often used ways of controlling table cells in a table based layout. They now all cause issues if you are trying to validate as HTML5. So older sites (or sites made with older software) won't validate if the doctype is changed without also going through and clearing out all of the obsolete attributes.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2012 2:16 PM   in reply to Laurensvo92

    The reason I chose a tabel layout was because it's much easier to work with in CSS.

    Whatever floats your boat.  I think CSS layouts are much more efficient & can't imagine ever going back to table layouts.

     

    Regarding Dreamweaver creating infinte divs. Has anyone actually tried typing </ for themselves?

    Sure have.  Go to the end of your document in code view. Put your cursor under the </html> tag and type a closing </.

     

    If your code is clean, DW won't complete the tag if you don't need one.

     

    If, however, your code has unbalanced tags in it, DW will attempt to reconcile this by adding the missing closing tags.

     

    Ultimately, DW is just a tool and you are in charge of your code. 

     

     

    Nancy O.

     
    |
    Mark as:
  • lingoes
    11 posts
    Oct 18, 2012
    Currently Being Moderated
    Nov 28, 2012 2:13 AM   in reply to SnakEyez02

    Sometimes when I check all the HTML blocks and find nothing error then I followed your steps.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 5:02 AM   in reply to lingoes

    Just to reiterate Nancy's point, DW will never insert a closing tag if the code is valid and complete.

     

    Table layouts are a bad idea for lots of reasons, but the more compelling ones are:

     

    • Way too much code - each page is encumbered with scads of table infrastructure that cannot be externalized (as opposed to CSS rules)
    • Not very friendly from an accessability point of view.  With table layout, content that is visually adjacent on the screen may be separated by lots of code in the code, which can create problems with screen assistive devices.

     

    Moving away from table layout does mean that you need to become very familar with CSS, however, which some may find to be a burden.

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Nov 28, 2012 7:43 AM   in reply to MurraySummers

    One other suggestion is to move your Google Analytics code to where it is more approprate. The latest version I have used is to add it right before the closing head tag </head>

     

    You actually are running it in the body tag, which I think might cause some problems.

     

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 7:53 AM   in reply to Jim Carpenter

    Yes before the closing head tag. It also gives more accurate stats.

     

    On the table layout debate I'd opt to remove any table layout from your site for better ability to troubleshoot problems and to keep up with current web standards.

     

    Maybe that should be done before you spend more time looking at this issue?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 8:23 AM   in reply to Laurensvo92

    The reason why you work with tables is because it is easier for you. That's it.

     

    Frankly, you can look at a div as simply a rectangular box to hold stuff, which is how you are using tables. Need to hold something? Make a box. Same as tables.

     

    And Murray is pointing something very important out. We used to use tables back in the 1990s because we could understand them. After all, who hasn't worked with Excel? Even my 11-year-old daughter has.

     

    Here's how to deal with tags:

     

    Open them.

    Add a line.

    Close them.

     

    So if you're adding a div, do the following:

     

    <div class="whatever">

     

    </div>

     

    And, in Dreamweaver, if you just type "</" Dreamweaver will automatically close your div, or whatever tag you have open.

     

    One of the reasons why Nancy and Murray are recommending divs and external CSS style sheets is because it will prevent the specific problem you are having right now. You're opening a lot of tags and you are forgetting to close them. Using an external stylesheet that is properly attached to the page you are writing allows you to harness the power of Dreamweaver. To apply a specific style tag to a block ot text, a photo or something else, simply go to your properties panel with that object selected and choose your style from a drop-down list. Dreamweaver will correctly edit your code, opening and closing the tags as they should be.

     

    Another reason why external style sheets are valuable is, if you define those styles site-wide, your entire website will share those styles and look the same from page to page. Visitors will know what to expect because you are consistent. And, if you are using the same style sheet sitewide, the client (the specific browser being used to view your website) will hold the style sheet in the computer's memory, so, after the first page loads your style sheet, all successive pages will load really fast.

     

    Nancy has answered your specific question. You should credit her with the correct answer and mark Murray's answer, as well as Jim Carpenter's as "helpful."

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 12:02 PM   in reply to Laurensvo92

    Floats require that you understand how they work - if that is the case they move from being a disaster to being an indispensible tool.  Divs do not behave differently in any browser.  And no, I wouldn't agree that most browsers display tables in the same manner.

     

    That's three strikes! Yer out!

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 12:23 PM   in reply to Laurensvo92

    |Your table layout is much more a disaster than the div with floats. Hence why it is now the web standard and not table layouts.

     

    Trust yourself that you will learn divs easily.

     

    There are three main components to floating divs I like to remember and they serve me purposefully to comprehend the usage of them:

     

    1. They're just like tables

    2. They are containers of everything inside

    3. Clear the divs.

     

    Those may not make much sense to you but they hlpe my workflow when working with CSS layouts.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 12:44 PM   in reply to marksey777

    Number 3 requires much more explanation.  You are not clearing a div, you are clearing a float.  By doing this, you ensure that the float is "cancelled" before the container is closed.  There are several ways to clear floats:

     

    1.  The most often used method is to make the container have a new block formatting context by assigning it a style of overflow:scroll | hidden. This will guarantee that any lingering effects of the float will not escape from the container.

    2. You can also clear floats explicitly by including a clearing element prior to closing the container, e.g.,

     

    <div>

    <img style="float:right;">...

    <div style="clear:right;"></div>

    </div>

    3.  You can also float the container itself which will do the same things as #1 above.

     

    My preference is #1.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points