in reply to Re^3: More CSS-friendly formatting on PerlMonks? (no PRE)
in thread More CSS-friendly formatting on PerlMonks?

The TT tag, unfortunately, is not the best way to CSS-style a multi-line block. (That's why PRE is a part of HTML, even if your Monk options don't use them.) When I try to outline and background a multiline TT block on a Mozilla-based browser, each line has its own overlapping rectangle of varying widths (because TT is a character formatter, not a block formatter). Outlining the PRE does the right thing: one rectangle fitting the widest line.

There seems to be a long way to go for the whole site to be generically skinned. Followups in a thread use a lot of html-coded BGCOLOR values. The use of containers instead of bordering in the CSS makes some adjustments far less simple.

Oh well. It was a lark, anyway. I tweaked some colors and hoverable links to my liking, and that's what I was going for. Just because I can't restyle the nodelets and thread replies doesn't chase me away or anything.

--
[ e d @ h a l l e y . c c ]

  • Comment on Re^4: More CSS-friendly formatting on PerlMonks? (no PRE)

Replies are listed 'Best First'.
Re^5: More CSS-friendly formatting on PerlMonks? (no PRE)
by tye (Sage) on May 02, 2003 at 05:54 UTC

    It is my impression that at least a few other browsers don't have this "problem". But I don't know much of anything about CSS and had almost nothing to do with the CSS on the site.

    Would a SPAN work better? If Mozilla will only do it correctly with a block element, then it could be PRE in some cases and P in others. That seems like a pain, though.

                    - tye
[reply]
      The CSS box model seems weird at first, but it's consistent and makes sense. Browsers that "don't have have this 'problem'" are broken. <tt> is an inline element and must not render like block level ones. However, one can simply declare tt.code to be a block element by adding a display: block attribute, since CODE blocks without newlines in them are not given the class="code" attribute. If that ever happens one could still narrow the rule using pre tt.code or some such.

      Makeshifts last the longest.

[reply]

        Then maybe "display: block" is how people are doing blockish display of code blocks already. I just know I've seen several people do it. I didn't look how they did it. So it probably isn't that there are any "broken" browsers, just difference in what people are trying with CSS.

        For example, thepen uses this: 

        tt.code
{
    background-color: #FFFFCC;
    border: thin black solid;
    padding: 10px;
    color: black;
    display: block;
}

        [download]

                        - tye
[reply]
[d/l]

In Section Perl Monks Discussion