Ending Tag Format Causes Problem

Hi all,

I'm not sure if this is an HTML issue or CSS issue but it's weird.

I've been working w/XML for 5+ years and it's always been true that you
can use a shorthand notation for an empty element like this:

"<fred/>" is the same as "<fred></fred>"


Well, I'm seeing a case where this is not true. Take a look at the
following two examples, if you would:


<div class='separatorBar'></div><p>hello</p>
<hr/>
<div class='separatorBar'/><p>hello</p>
<hr/>


These should be equivalent, right? It seems they are not. Firefox
v1.0.4 renders the two differently, as do IE 6 and Opera.

Here is the 'separatorBar' definition:

<style type='text/css'>
div.separatorBar {
margin-left:-10px;
margin-right: -10px;
border:solid;
}
</style>


What have I missed here? I though the <xxx/> notation was a shorthand
for <xxx></xxx>. Is this not true> Does anyone have an explanation for
my examples above?

Thanks.

--
Tony LaPaso

On Fri, 13 May 2005, Tony LaPaso wrote:

I'm not sure if this is an HTML issue or CSS issue but it's weird.

I don't think so. It appears you're failing to comform with Appendix
C of the XHTML/1.0 specification, that's all. Nothing "weird" about
that.

"Tony LaPaso" <tlapaso (AT) comcast (DOT) net> wrote:

I'm not sure if this is an HTML issue or CSS issue but it's weird.

It's basically an HTML issue; f'ups set accordingly.

I've been working w/XML for 5+ years and it's always been true that
you can use a shorthand notation for an empty element like this:

"<fred/>" is the same as "<fred></fred>"

It's been true all the time and it still is true that the XMLized
version of HTML, called XHTML, which is what you are really trying to
use, is not ready for Web use. At least not without the precaution of
fooling IE & Co. into seeing it as old HTML, by applying Appendix C.

(If you don't know what Appendix C means, you haven't been paying
attention when you've read c.i.w.a.h. or your XHTML primer - or you
found a very poor primer.)

div class='separatorBar'></div><p>hello</p
hr/
div class='separatorBar'/><p>hello</p
hr/

These should be equivalent, right?

They are equivalent by XML specification. The same specification tells
you should not use "self-closing" tags except for elements with EMPTY
declared content, when "interoperability" matters, and on the Web it
surely does. Ref.:
http://www.w3.org/TR/REC-xml/#sec-starttags

On the other hand, an empty div element is almost always a symptom of
bad design, and the class name virtually confirms this.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Tony LaPaso wrote:
<snip>

So, still I get the same behavior. Is there something
special in Appendix C I'm missing?
snip

Probably the most important aspect of Appendix C is that you send
Appendix C documents with a content type header of 'text/html' (or
possibly do content negotiation and only send text/html as the content
type for browsers that don't admit to understanding XHTML).

A browser receiving a document with a content type header asserting that
the contents are text/html will interpret that document as HTML (what
else could they do?). Appendix C relies on the content being interpreted
as tag soup HTML with syntax that is within the known error-correction
behaviour of existing browsers. Thus the browser error-corrects the
document back to HTML, and creates an HTML DOM for it.

In HTML there is no shorthand, and that penultimate slash in a tag is
interpreted as an error in the mark-up, which is just ignored (not
strictly correct, but that is what happens). Thus <div /> becomes an
opening div tag for which there is no corresponding closing div tag. The
corresponding closing div tag will probably be inferred by the browser
in a position just before the containing element is closed.

Richard.

Thank you all... I changed the content type to application/xhtml+xml
and Firefox rendered it like a charm!

I'm a little new to CSS and trying to get my site up to standards and
so some of my questions might seem a little simple. But thank you all
for responding.


--
Tony LaPaso




"Tony LaPaso" <tlapaso (AT) comcast (DOT) net> wrote

Hi all,

I'm not sure if this is an HTML issue or CSS issue but it's weird.

I've been working w/XML for 5+ years and it's always been true that
you can use a shorthand notation for an empty element like this:

"<fred/>" is the same as "<fred></fred>"


Well, I'm seeing a case where this is not true. Take a look at the
following two examples, if you would:


div class='separatorBar'></div><p>hello</p
hr/
div class='separatorBar'/><p>hello</p
hr/


These should be equivalent, right? It seems they are not. Firefox
v1.0.4 renders the two differently, as do IE 6 and Opera.

Here is the 'separatorBar' definition:

style type='text/css'
div.separatorBar {
margin-left:-10px;
margin-right: -10px;
border:solid;
}
/style


What have I missed here? I though the <xxx/> notation was a shorthand
for <xxx></xxx>. Is this not true> Does anyone have an explanation
for my examples above?

Thanks.

--
Tony LaPaso