Mailinglist Archive: opensuse-web (5 mails)

< Previous Next >
Re: [opensuse-web] forums: scrolling for code output

on Sonntag, 21. August 2011, Felix Miata wrote:
On 2011/08/21 16:37 (GMT+0200) Christian Boltz composed:
Felix Miata wrote:
main-rollup.css. Also, leave the newlines that are in the source
in the files actually used by the pages, so that hunting down
this kind of trouble's root isn't so difficult.

I wouldn't be too surprised if main-rollup.css is merged from
several CSS files.

You should try firefox + firebug extension - it makes hunting CSS
issues quite easy.

I've been using Web-Developer extension since before Firebug existed.
It works fine for these uses, except when newline stripping as
described on is employed,
as here. Hopefully the overdue update to WDx will address this
growing Yahoo-induced problem.

I know (and use) the Web-Developer extension too, but Firebug is much
better when it comes to hunting CSS issues. You can click an element and
it will give you all styles that influence it. From top to down, with
overridden values stroke through and a note from which line in which CSS
file each rule comes. The styles are re-formatted (one rule per line) so
stipped newlines are not a problem. And all styles are also editable.

In short: give Firebug a try ;-)

The main problem is that the HTML code contains

<pre class="bbcode_code" style="height:192px;">

If I remove the hardcoded height, no scrolling is needed. I don't
know why the height is hardcoded, it is definitively a bad idea.

The problem, as usual, is the height is arbitrary (px), rather than
sensible (em). Setting height in px is virtually ALWAYS a bad idea,
as nearly always setting any size on anything in px.

In this case setting the height at all is a bad idea. The <pre> knows
itsself how big it needs to be ;-)

Besides that, main-rollup.css should be slightly changed so that
the scrollbars are only displayed when needed. Additionally a
max-height for <pre> would make sence IMHO.

.bbcode_container div.bbcode_code, .bbcode_container
pre.bbcode_code {

overflow:auto; /* instead of "overflow:scroll" */
max-height:500px; /* optional */

Again, a height in px, totally arbitrary, since the actual size bears
no predictable relationship to any legible size (e.g. 1em).

While I understand that you dislike px (for a good reason), I'd say it's
a good choice here.

The max-height:500px rule limits the height to 500px, which means the
<pre> area should fit on every screen. If the text in the <pre> is
bigger, it gets a scrollbar added.

Doing this with em is quite pointless because your screen resolution
won't grow with increasing font size ;-) and having a <pre> with a
scrollbar that grew heigher than your screen (or what you have available
in the browser window) is a nightmare.

The only better option is to make it dependent on the viewport height,
but that makes the CSS more interesting[tm] or might even require

Another alternative would be not to limit the height - but that will
become annoying on really long <pre> texts (1000 lines of log entries)
IMHO. Even more when combined with overflow:auto - in this case you'll
have a horicontal scrollbar at the end of the <pre> and have to scrool
down to be able to use it.

Web page stylists ought to have a minimum age, preferably at least
60, but at least 40, so that they should have acquired more than a
token bit of wisdom on visual acuity issues and their impact on web

Oh yes. "Take off your glasses" would already be a good requirement ;-)


Christian Boltz
[GUI vs. Command-Line] Einen ähnlichen Streit wird es in 20 Jahren
auch geben, wenn die "2D-Screenfanatiker" auf die "VR Fans" losgehen
und wieder ein Streit vom Zaun bricht der an Sinnfreiheit kaum zu
√ľberbieten ist. [Phillip Richdale in suse-linux]
To unsubscribe, e-mail: opensuse-web+unsubscribe@xxxxxxxxxxxx
For additional commands, e-mail: opensuse-web+help@xxxxxxxxxxxx

< Previous Next >
List Navigation
Follow Ups