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?
Here is the source code: http://www.zone-online.com/dev/NTA/.
Yes, your right it does not validate the code this is because the page is a table layout.
Do you really want to wager?
Jim:
As this website has two languages, its very easy to forget to close a tag.
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?
SnakEyez02: Isnt this the doctype?:
<html class="" xmlns="http://www.w3.org/1999/xhtml">
Thanks for your time,
Laurens
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.
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
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.
The reason I chose a tabel layout was because it's much easier to work with in CSS. If I chose the DIV root it would mean playing around with floats, which are hassel.
With tabels you can guarantee how all modern browsers will display them, which as you will know has been nightmare for us designers.
Regarding Dreamweaver creating infinte divs. Has anyone actually tried typing </ for themselves?
Cheers,
Laurens van Oorschot
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.
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:
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.
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?
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
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!
|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.
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.
North America
Europe, Middle East and Africa
Asia Pacific