Problems that I have with definition lists

[tayiper]

Well, I am slowly getting frustrated. The thing is that after I've put the links on my website's index.html (http://tadej-ivan.50webs.com/index.html) page info a "definition list" and validated it the document, came out of processing with no less than 218 errors, while previously it was a valid XHTML. The errors I was getting were basically of two kinds; one for a "div" element and one for a "br" element.


The error text for the div element:

1. Error Line 48 column 192: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

... id="navmap1"><dt><div class="align2"><img class="icon" src="/mark.png" alt="

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

The error text for the br element:

2. Error Line 48 column 430: document type does not allow element "br" here; missing one of "dt", "dd" start-tag.

...information page</em></div></dd><br /><br /><dt><div class="align2"><img class

So I've first changed the order of "br" elements, namely I changed it from "</dd><br /><br /><dt><div class" to "</dd><dt><br /><br /><div class", and after validating it again, the error-count was reduced to 90 errors, and then after fixing some other stuff too (I don't remember exactly what it was) to 62 errors. Anyway, as you can see, this change in order of "br" elements completely fixed the second error quoted above, so I've ended up with only 24 errors total as you can see here: W3C Validator - index-test.html (http://validator.w3.org/check?uri=http%3A%2F%2Ftadej-ivan.50webs.com%2Findex-test.html).


But the problem with "div" elements remained nomather what I tried. For instance, I tried with replacing the "<div class="align2">" div class with inline "<div style="text-align: left">" variant, and later with "<span style="text-align: left">" (which surprisingly didn't move the text to the left) and so on and on. Then I remembered that I have one document from W3C stored on my hard-disk (namely the W3C - Lists in HTML documents (http://www.w3.org/TR/html4/struct/lists.html) one), and in it've read one thing that might be the reason/cause for my troubles.


The mentioned text from W3C:

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

Therefore though I understand what the effect of this is, I am really not sure what "restricted to inline content" and "block-level content" mean in this case (and in general too), and above all, how should I deal with it??!


thanks, tayiper

[grumpyoldtechs]

basically remove the BR's if your using a definition list.

if i understand what i've read

[tayiper]

basically remove the BR's if your using a definition list.

Thanks much for the quicky reply, however, note that the "br" element problem is already fixed as mentioned in the original post (not by removing but by moving; see above), while the "div" element problem persist. Yeah, I could simply remove that one, but then the text would not be aligned to the left as I want it to be.


tayiper

[grumpyoldtechs]

i would suggest laying out your code tidier. it will make it easier for you to spot errors/others to help.

also use CSS to layout your content not </br> tags it makes your life a lot easier

[Paul Jr]

The problem is you can't put block-level elements (such as the div you are using) inside dt elements. You're using a very large amount of unnecessary code. Why do you need a div inside every dt? You have applied an ID to the definition list, so if you want the text in the dt to have certain styles, just use a rule similar to this:

dl#navmap1 dt {
font-family: tahoma, verdana, sans-serif;
text-align: left;
}
That means any dt that is a child of a dl with the ID 'navmap1' will have those styles applied.
Then you won't need all that unnecessary (and invalid) code cluttering things up.


I second grumpy's sentiment about your code. It's pretty difficult to pick through when it's basically all on one line.

[tayiper]

Thanks again both for your replies. And yeah, I do plan to write in "pure CSS" instead of just using "divs" instead of tables in the future.


tayiper

[tayiper]

You have applied an ID to the definition list, so if you want the text in the dt to have certain styles, just use a rule similar to this:

dl#navmap1 dt {
font-family: tahoma, verdana, sans-serif;
text-align: left;
}

Well, thank you so much "Paul Jr", that indeed worked, see here: W3C Validator - index.html (http://validator.w3.org/check?uri=http%3A%2F%2Ftadej-ivan.50webs.com%2Findex.html). And also sorry for my bad CSS-knowledge, but I only have one more question, i.e. is it possible to apply this in one single place (instead as it's in the example below) for both "navmap1", and "navmap2" IDs ??


The example mentioned above:

dl#navmap1 dt {
font-family: tahoma, verdana, sans-serif;
text-align: left;
}
dl#navmap2 dt {
font-family: tahoma, verdana, sans-serif;
text-align: left;
}

P.S. - Oh btw. I tried with "dl#navmap1,navmap2 dt {" since I vaguely remembered that I've seen this once, but it doesn't work.


tayiper

[Paul Jr]

P.S. - Oh btw. I tried with "dl#navmap1,navmap2 dt {" since I vaguely remembered that I've seen this once, but it doesn't work.
Tayiper, you were close. When using multiple selectors like that, you want to use the full selector, and separate each one with a comma. So your code would look something like this:

dl#navmap1 dt, dl#navmap2 dt {
...
}

The selectors are exactly the same as they would be if you were writing out two different rules, you just separate them with a comma.

[tayiper]

Thanks once again, "Paul Jr" ...


tayiper

[ray326]

... <dt><div class="align2"> ...

That kind of thing is not valid. That's what the validator is griping about. List items are blocks and cannot contain other blocks.

[tayiper]

... <dt><div class="align2"> ...

That kind of thing is not valid. That's what the validator is griping about. List items are blocks and cannot contain other blocks.

Well, if you would read the whole thread, you would see that it's already fixed, but thanks for the reply anyways ...


tayiper