Lack of end tag messes up form styling - a known bug?
in [CSS]
|
Prev: Relative width in CSS
Next: Using top-level selectors
From: Jukka K. Korpela on 10 Apr 2008 06:48 My basic style sheet has a distinctive background and border for forms, to make the structure clearer and to make it visually evident what belongs to a form. However, as people complained that some forms were odd-looking, I noticed that indeed, fairly often the background is not applied and there is empty space inside a form I didn't ask for. This was rather puzzling until I realized that the observed cases seem to result from one single "error" in my markup. The "error" is lack of the "optional" </p> tag right before a form. That is, <p>paragraph text <form ...> causes the trouble. For a simple illustration, check http://www.cs.tut.fi/~jkorpela/test/form.html on IE 7. (When </p> is omitted, the background set for the form is not there, except for a thin stripe at the top.) For years, browsers have been reported to behave wrongly when "optional" end tags for elements are omitted. But this form-related problem appears even on IE 7, and I don't remember having seen notes about this particular type of bug elsewhere. What did I miss? My conclusion is that "optional" end tags should not be omitted. There is little hope of having browsers fixed, I'm afraid. What we _can_ do is to stop using "handy" SGML features like tag omissibility. -- Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/
From: David Stone on 10 Apr 2008 08:05 In article <5gmLj.324043$eT7.60746(a)reader1.news.saunalahti.fi>, "Jukka K. Korpela" <jkorpela(a)cs.tut.fi> wrote: > My basic style sheet has a distinctive background and border for forms, > to make the structure clearer and to make it visually evident what > belongs to a form. > > However, as people complained that some forms were odd-looking, I > noticed that indeed, fairly often the background is not applied and > there is empty space inside a form I didn't ask for. This was rather > puzzling until I realized that the observed cases seem to result from > one single "error" in my markup. > > The "error" is lack of the "optional" </p> tag right before a form. That > is, > <p>paragraph text > <form ...> > causes the trouble. For a simple illustration, check > http://www.cs.tut.fi/~jkorpela/test/form.html > on IE 7. (When </p> is omitted, the background set for the form is not > there, except for a thin stripe at the top.) > > For years, browsers have been reported to behave wrongly when "optional" > end tags for elements are omitted. But this form-related problem appears > even on IE 7, and I don't remember having seen notes about this > particular type of bug elsewhere. What did I miss? > > My conclusion is that "optional" end tags should not be omitted. There > is little hope of having browsers fixed, I'm afraid. What we _can_ do is > to stop using "handy" SGML features like tag omissibility. I've run into this a couple of times, and usually it has to do with the way a specific user agent infers where the missing end tag should be, based on the content of the html file. (In my case, however, it had nothing to do with forms.) I've noticed on a couple of occasions that the W3C validator picks up on these things, and will explicitly state what it has decided to do when encountering a missing optional end tag; this choice is rarely what I meant! But then, I am not as familiar with the full scope of the html spec as the authors of the validator software... The upshot is that, for purely practical reasons, I always include "optional" end tags
From: Harlan Messinger on 10 Apr 2008 08:18 David Stone wrote: > I've run into this a couple of times, and usually it has to do with > the way a specific user agent infers where the missing end tag > should be, based on the content of the html file. (In my case, > however, it had nothing to do with forms.) It should be easy to check what the UA has inferred by using some Javascript to report on the DOM tree. Does the tree differ depending on whether or not the end tag is there?
From: Jonathan N. Little on 10 Apr 2008 10:47 Jukka K. Korpela wrote: > My basic style sheet has a distinctive background and border for forms, > to make the structure clearer and to make it visually evident what > belongs to a form. > > However, as people complained that some forms were odd-looking, I > noticed that indeed, fairly often the background is not applied and > there is empty space inside a form I didn't ask for. This was rather > puzzling until I realized that the observed cases seem to result from > one single "error" in my markup. > > The "error" is lack of the "optional" </p> tag right before a form. That > is, > <p>paragraph text > <form ...> > causes the trouble. For a simple illustration, check > http://www.cs.tut.fi/~jkorpela/test/form.html > on IE 7. (When </p> is omitted, the background set for the form is not > there, except for a thin stripe at the top.) > Strangely it does display correctly in IE 4-6 And folks wonder why I am cynical about future IE8's compliance. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Darin McGrew on 10 Apr 2008 14:35
"Jukka K. Korpela" <jkorpela(a)cs.tut.fi> wrote: > > My conclusion is that "optional" end tags should not be omitted. There > > is little hope of having browsers fixed, I'm afraid. What we _can_ do is > > to stop using "handy" SGML features like tag omissibility. David Stone <no.email(a)domain.invalid> wrote: > The upshot is that, for purely practical reasons, I always include > "optional" end tags Same here. For a while now, I've been using spam/ospam to add optional closing tags (and optional quotes around attribute values). It helps browsers (and browser-like OS components) handle CSS more consistently. -- Darin McGrew, mcgrew(a)stanfordalumni.org, http://www.rahul.net/mcgrew/ Web Design Group, darin(a)htmlhelp.com, http://www.HTMLHelp.com/ "Advice is what you ask for when you know the answer but wish you didn't." |