Scrolling CODE, overflow-x:scroll, how to edit <code> tag

  • hello,

    i want to make my posts code scrollable because sometimes it is too wide.

    in css i tried this:

    ‘code, pre {
    color: #F26722;
    font: 12px “Courier New”;
    background-color:#F6FCFD;
    border-width:1;
    border-color:#BEBEBE;
    border-style:dotted;
    padding:4px;
    width:515px;
    overflow-x:auto;
    overflow-y:hidden;
    }’

    Can you tell me what is wrong with that?

    Looking forward to your answers.

    a.

Viewing 11 replies - 1 through 11 (of 11 total)

  • Are you viewing in IE, Firefox, or both? If I remember correctly, this overflow-x/y only works for IE.

    Thread Starter albinas

    (@albinas)

    This one dont work on both

    Thread Starter albinas

    (@albinas)

    Is it so hard to do?

    Maybe this one don’t work because in wordpress code is not a <div> ?

    Looking forward to your answers…

    To be clear, it isn’t a WordPress issue. WP doesn’t really give a dump if your theme uses divs or not. Heck some folks do themes in tables still.

    It’s a theme (aka (x)html/CSS) issue.

    I use a plugin for code samples. Among other things, it styles them
    overflow-x: auto;
    overflow-y: auto;

    See it in action. So, I’m pretty sure it can be done. :-p

    If you’re curious, the code plugin is: https://blog.igeek.info/wp-plugins/igsyntax-hiliter/

    ??

    OMG … that is SEXY!

    Sorry, couldn’t help myself. Solo, that’s tight dude! ??

    Thread Starter albinas

    (@albinas)

    hmm, i installed and activated the iG:Syntax Hiliter plugin, but no changes have been made in a posts, the code spot on the post left exactly as it was before…

    you have to format the code within the posts — it doesnt arbitrarily change what already there. Look at the boxes above the post box …

    you should see little buttons for php, perl, etc..

    It (whatever you want to format) needs to be wrapped in the proper tags: [php] [/php] ..etc, thats what the buttons simplify.

    Thread Starter albinas

    (@albinas)

    Well, thats bad… ??

    no it isnt, changing code that you might not want chage is bad. thats how things work — for instance, if you want something encased in a div, you are expected to provide div tags. It doesnt happen magically.

    Thread Starter albinas

    (@albinas)

    Yeah, but i have many posts with too wide code. And I have to edit all of them?… Nah… ??

    I cant believe there is no easier way to make the code scrollable…

    I have an idea, You can use this code:
    div.post(or#post) p, ol#commentlist li p {
    overflow : auto;
    }
    it can make the paragraph with code have scroll with it.

    it’s the only way you can use without a code plugin – I haven’t found other ways to solve it…

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Scrolling CODE, overflow-x:scroll, how to edit <code> tag’ is closed to new replies.

Tags