CSS problem in 5.5?

[Kent Multer]

Hi folks --

I recently installed one of my custom utility modules in a 5.5 store, and there's an odd HTML glitch on the StoreUtilityModule_Screen display, which didn't happen in 5.0 stores. A big chunk of empty space appears between the Search box at the top of the page and the table of search results underneath it.

The size of this gap varies in proportion to the number of rows in the table. A ten-row table gets about an extra inch of space; 20 rows gets about 2 inches, etc. I think this must be caused by some of the CSS that's being applied to the page. The module does generate a lot of hidden fields that are in the "margins" between the table cells. These would be rendered before the table, so I think the CSS could be causing them to take up space in 5.5 that they didn't in 5.0.

I'm not a CSS guru. Is there a way to override or remove the CSS from admin pages? Any other thoughts?

Thanks --

[Dramatic]

How about fixing your module to output valid HTML by putting the hidden fields within adjacent cells? Once you start relying on error correction you have a good chance of display problems in one browser or another.

[Kent Multer]

Sorry, I don't understand what you mean by "error correction."

I thought of moving the hidden fields into the table cells. But it occurred to me that they might still generate enough white space to mess up the display, in which case I wouldn't have gained anything. I'm hoping that someone at Miva Corp. can tell me a specific answer to why the module looks different on MM5.5.

[Dramatic]

As you have already hinted, HTML does not allow any content between the cells of a table. (Or more specifically, a table element is only allowed to contain certain other elements (thead, tfoot, caption, tbody, tr, colgroup, col) and tr may only contain th and td. While application languages such as miva barf on syntax and structural errors, browser rendering engines are generally* rather lax. However, there are no codified rules on how to handle errors**, so each browser makes it up as it goes along. Many popular browsers display injected content above the table, but that does not mean that all browsers will. They might display it below, to the right, or not at all!

If you can post or PM a link, I culd look at the generated source and suggest stylesheet rules to suppress the whitespace. however, it may not work as expected, because if a browser encounters <tr><td></td><input><td> while building a DOM tree, it might put the<input> on an unexpected place on the tree given that ti may not be a child of <tr>

* Exception: Serve your content as application/xml+xhtml and supporting browsers (which excludes IE) MUST halt parsing at any error in well-formedness.
** HTML5 is going to specify how many errors should be handled.

[Kent Multer]

Thanks for the additional info. I suppose I should make my HTML conformant. Still, it's weird that this problem only happens on 5.5. So I think it must be CSS-related, although admittedly, if I'm creating invalid HTML, maybe all bets are off as to the behavior.

Since you seem to be pretty expert on this, maybe you can tell me: is it normal for hidden inputs to generate some white space? After I put them inside the table cell, that may still be a problem. I seem to recall that there's a CSS declaration to change this; do you know how it's done?

Thanks again --

[Dramatic]

Sorry for the delay in replying: A hidden input usually has display:none, so has no impact on page rendering, however, the code generating the input might insert some whitespace around it which will be displayed (albeit collapsed). I would really need to see the generated html and stylesheet to tell what is happening and suggest a solution.

[RayYates]

Kent,

Hidden fields should not have ANY effect on the browser display but "placement" does play a roll.

Technically you can put hidden fields between other elements like tables and table rows IF the placement is consistant (at the same nested level) with the <form> and </form> tags.

Incorrect: In this example the hidden field is within the table and the <form> tags are both inside and outside of the table. It MAY work but browser formatting may be unpredictable.
<form>
<table><tr><td>
<input type="hidden">
</td></td>
</form>
</table>

correct:
<form>
<input type="hidden">
<table><tr><td>content</td></td></table>
<input type="hidden">
<table><tr><td>content</td></td></table>
</form>

also incorrect but: less likely to cause formatting problems.
<table>
<form>
<input type="hidden">
<tr><td>content</td></td></tr>
<input type="hidden">
</form>
<tr><td>content</td></td></tr>
</table>

[Kent Multer]

Hey, I was just reading the 5.5 Bugs thread, and someone else is seeing a similar problem. Bill Weiland mentioned that 5.5 has a DOCTYPE declaration in the HTML, which changes the rendering behavior. That's really all I know about it. Can anyone tell me a bit more about DOCTYPE, and how it affects the rendering of hidden fields?

Thanks --

[RayYates]

Here is an article on doctype that might be helpful. http://www.alistapart.com/stories/doctype/