Question

i’m trying to understand css and first thing i tried was this:

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid black"/>

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid red"/>

and

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid black"></div>

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid red"/>

can anybody please explain what’s happening? i thought there should be no difference.. until now i was experiencing just pure xml so this is kinda frustrating for me..

and one more side question.. how does it work with displaying the whole thing? I assume first thing is the browser builds the DOM tree which would normally be displayed dependent from order of elements. Is it the same with css with only that little change defined by styles? i mean the rule from stylesheet is first applied when some concrete element is being displayed, no other tricks in it..right?

Answer 1

You are, no doubt, serving your XHTML with a text/html content-type.

This is a hack designed to ease the transition from HTML to XHTML, so people can start using XHTML before browsers support it. After a decade, Internet Explorer still doesn’t support it and I’ve gone back to HTML.

Since you are using this hack, you must write your XHTML to be compatible with HTML parsers as well as XML parsers. This means following the HTML Compatibility Guidelines which include:

If an element permits content (e.g., the div element) but an instance of that element has no content (e.g., an empty section), DO NOT use the “minimized” tag syntax (e.g., <div />).

Elements which do not permit content are defined as “EMPTY” and can be easily spotted on the HTML list of elements.