ID:3310
 
...on your horizontal scrolling.

Tonight's minor forum update brings us <dm> tags that automatically scroll horizontally. No more annoying horizontal stretching of the entire page when one post's <dm> tags stretch it out! But there's a catch: it only works with Gecko-based browsers (Mozilla, Firefox, etc).

Why? Because apparently this is one of the few areas in which Gecko's interpretation of the W3C standard is actually less strict than those of other browsers. Forum posts are currently embedded in a number of nested tables. And table cells are supposed to expand to completely fit their contents. That means the <dm> block within a table cell should always be as wide as it really wants to be, since the enclosing table cell will stretch to fit. Therefore under this interpretation of the standards, the <dm> block should never have a width smaller than "full", requiring scrollbars. If that means the whole page must scroll as a consequence, so be it.

Gecko's interpretation seems to be that the table cell will assume its maximum "natural" width that won't cause the entire page to scroll horizontally. If the <dm> block needs to be larger than this, it will have a horizontal scrollbar. Ding! Exactly what I wanted.

I tried numerous ways to achieve this effect in IE and other browsers, to no avail. My understanding of the situation, based on the previous paragraph, is that it will never work as long as the <dm> block is enclosed within a table cell somewhere upstream. If this is true, then users of other browsers will have to wait until the site (or at least the forum) moves to an all div/css layout. That's a much bigger job than I wanted to do right now.

So is this true? Free BYOND Membership to the first non-Member who comes up with a way to enable scrollbars for IE within the current layout. The <dm> block must always assume the maximum width that won't cause the whole page to scroll. It must show a horizontal scrollbar when the content inside the <dm> block is wider.

If a Member comes up with a solution, we can discuss prize alternatives that are roughly equivalent to a Membership. Can it be done?
Couldn't you just put it in some form of hframe for IE?
You can get a half decent effect adding

width: 540px; to .dmcode

The only problem is that it looks a bit small on 1024*768.
After some more playing. width: 750px; looks good on both resolutions.

The only problem is in 800*600 you have to scroll over. But you can still see the whole post. It just makes the left navbar unvisible.

But, you dont want any scrolling except for the
 blocks. Right?
i'm really surprised that <iframe> has not been considered. yes, iframes are dirty, mealy, things, an have been abused on many an occasion, but i have used them to great success in several projects that call for content embedded in an inner table of a fixed size, but needed to scroll that inner content (vertically or horizontally) if the content is over-sized.

i've even used a bit of PHP to determine a min/max for the height needed for the iframe (based on the number of lines in the content to be placed there) if no vertical scrolling is wanted. so the frame can be dynamically sized top-to-bottom, yet still retain the horizontal scrollbars, and fit inside the outer table cell.

although often hated, i think iframes would work well here, since you need to control the width of the content displayed and show only scrollbars when needed. and the base level of the iframe standard covers all you need for cross browser compatibilty (though i suggest a stylesheet to get things looking closest between IE and the gecko engine): fixed height or width control, scrollbars on/off/auto, etc.

that should do the trick!
Meh, if digi gets the prize and not me im going to be mad!!
<
Hey, at least you have a membership. -_-
Hmm... perhaps you could use Javascript + CSS to set the calculate the appropriate width and then set it. I believe IE at least lets you set CSS via Javascript.
Tried messing around with a few bits and pieces of CSS. Also tried setting IE to standards-compliant mode by including the appropriate doctype - but that just completely munged the page. =P

I'm done. Good luck to everyone else!

Oh, and while we're on the subject of DM code now scrolling on the forums...

THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU THANKYOU!

Okay, okay, shutting up now. =)
Giving a width of 100% to .dmcode as well as a position: absolute fixes the scrolling problem. Unfortunately it causes another where the DM block floats above the rest of the text in the post, as well as the buttons below. :P
There's also a problem with iframes. Unless I'm mistaken, you only can reference another text or html document. Imagine having to create that many text documents JUST for DM tags.
UP writes: Unless I'm mistaken, you only can reference another text or html document. Imagine having to create that many text documents JUST for DM tags.

yes, that is a bit tricky since the source of an iframe is usually 'outside' the current page. hmm, a bit of javascript to 'pull' the DM code out of the page (or parsed directly from the database it is stored in) and stuff it into the iframe via some fancy javascript reference could work, but i have not had the time to dig into that possibility just yet (gotta pay the bills first!). if the DM code were stored separately from the posts themselves (with an appropriate relationship reference in the database), this would not be an problem, but that would be overkill i think in this case.

and regarding FlameSages's complaint: if it's so important to him, let him have the credit for mentioning 'hframe'- i won't argue against that!
update:

ok- based on a little bit of digging, using frames would work nicely, but add a bit of complication to the parsing of the post.

essentially, a quick-n-dirty of what needs to be done is something like so:

the iframe needs to be called with a passed parameter of the post id that contains the dm code. something like: <iframe src="dmcode.cgi?postid=12345"></iframe> -'dmcode.cgi' (or .php, or .perl, or whatever) will be the guy that parses that post for the content inside the dm tags, and generates the html to display the dm code. this resulting output appears inside the iframe and its layout is controlled by the iframe itself (including a little CSS to make it pretty i guess).

my .cgi skills are way rusty, so if curious i can provide how i'd do it in pseudo-code (regarding the 'dmcode.cgi' functionality).

that ought to do the trick!
The post says the dm tags only work with gecko browsers, then lists mozilla and firefox separately. Isn't the borwser "Mozilla Firefox"?

Hiead
Nope; there is actually a piece of software called Mozilla. It's named after the people that made it, just like Netscape is the name of the company that made Netscape Navigator. But nobody calls it Navigator; they call it Netscape instead.

Mozilla is a complete web applications suite that includes a browser, email, and so on.
The Mozilla Suite contains a bundle of applications for email, web browsing, and so on. Mozilla Firefox is the browser-only product.

Anywho, that dmcode.cgi would need another paramiter to let it know WHICH DM block is to be returned within the post. There can be multiple sets of DM tags in one post.
What about the overflow CSS attribute?
Actually, upon testing. The table tag, nor tr or td will properly render the overflow attribute in either Firefox2 or Internet Explorer.

However, the span tag will render the overflow in Internet Explorer but not Firefox.

At best, the only thing I can offer without further testing is, run a browser check, if IE is returned, place a <span style='overflow: auto; width: 100%'> right before the DM code is about to start (insde the td tag) and close it before the ending td tag.