http://www.perlmonks.org?node_id=1015708


in reply to CSS Show and Tell: Colored Code

Today I added max-width to prevent overly wide code snippets causing unwanted scrollbars:

textarea { width: 100%; height: 25em; } table.user-settings, .user-settings textarea { width: 100%; } div.pmsig, div.footer, tr.bannerrow { display: none; } p, li { text-align: justify; } body#id-11911 .nodelets { display: none; } body#id-3333 .nodelets { display: none; } div#nnt-section-Users { display: none; } a[href="?node_id=961"], a[href="?node=Anonymous%20Monk"] { color: #c000a0; } tt.codetext, tt.inlinecode { border: 1px solid gray; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: "DejaVu Sans Mono", LettrGothic12BT, "Lucida Console", + mono, monospace; white-space: pre; color: black; background-color: #fffff4; max-width: 1000px; word-wrap: break-word; } tt.codetext { display: block; margin-right: 5px; padding: 4px 4px 4px 4px; font-size: 100%; line-height: 13px; } tt.inlinecode { padding: 2px 1px 2px 1px; font-size: 60%; line-height: 15px; }

Enjoy, Have FUN! H.Merijn

Replies are listed 'Best First'.
Re^2: CSS Show and Tell: Colored Code
by BrowserUk (Patriarch) on Jan 28, 2013 at 14:52 UTC
    Today I added max-width to prevent overly wide code snippets causing unwanted scrollbars:

    If the content is overly wide; why are the scrollbars "unwanted"?

    How do you get to view the right hand side if you do away with them?


    With the rise and rise of 'Social' network sites: 'Computers are making people easier to use everyday'
    Examine what is said, not who speaks -- Silence betokens consent -- Love the truth but pardon error.
    "Science is about questioning the status quo. Questioning authority".
    In the absence of evidence, opinion is indistinguishable from prejudice.

      OK, "unwanted" is maybe not the best choice of wording. With my desktop being two 1920x1200 24" monitors, my first "need" with websites is to use 100% of the available width so I do not have these silly white edges. So I change a lot of fixed with garbage designed for 1980 devices to use 100% instead of 640px. HTTP::Proxy to the rescue.

      I just measured my Opera to have a current size of 1530px in width. When I want the code snippets in the threads to "fit" left of the right bar (from which I indeed block some content), I need to restrict the size. Not wanting the scrollbar actually means I don't want the need for the scrollbar, as then the other elements get scrolled out, e.g. the (--) and (*)++ radio buttons.


      Enjoy, Have FUN! H.Merijn