80 character wide <pre> block appears only 60 character wide onWindows

Discussion in 'HTML' started by Disc Magnet, May 14, 2010.

  1. Disc Magnet

    Disc Magnet Guest

    I am unable to set the width of a <pre> blog to 80 characters. When, I
    set it the width appears different on different OS.

    With Firefox or Chrome on Windows, the black background of <pre> is
    only 60 characters wide.

    With Firefox Linux, the black background is 80 characters wide.

    I want it to be 80 characters wide on all systems. How can I achieve
    this?

    Here is the code:

    <html>
    <head><title>Console Effect</title>
    <style type="text/css">
    pre {
    width: 80ex;
    background: #000000;
    color: #808080;
    padding: 3px;
    }
    </style>
    <head>
    <body>
    <p>
    Foo
    </p>
    <pre>
    123456789 123456789 123456789 123456789 123456789 123456789 123456789
    123456789.

    int main()
    {
    printf("hello, world\n");
    }
    </pre>
    <p>
    Bar
    </p>
    </body>
    </html>
     
    Disc Magnet, May 14, 2010
    #1
    1. Advertising

  2. Disc Magnet

    dorayme Guest

    Re: 80 character wide <pre> block appears only 60 character wide on Windows

    In article <>,
    Lewis <> wrote:

    > It's a shame that there is not a 'width' property for fonts in CSS.


    So that authors could have really wide characters like "s" and
    "m" and "i" and "l" and "e" and so on? We will just have to bear
    this burden with fortitude.

    --
    dorayme
     
    dorayme, May 14, 2010
    #2
    1. Advertising

  3. Disc Magnet

    Neredbojias Guest

    Re: 80 character wide <pre> block appears only 60 character wide on Windows

    On 14 May 2010, Disc Magnet <> wrote:

    > I am unable to set the width of a <pre> blog to 80 characters. When,
    > I set it the width appears different on different OS.
    >
    > With Firefox or Chrome on Windows, the black background of <pre> is
    > only 60 characters wide.
    >
    > With Firefox Linux, the black background is 80 characters wide.
    >
    > I want it to be 80 characters wide on all systems. How can I achieve
    > this?
    >
    > Here is the code:
    >
    > <html>
    > <head><title>Console Effect</title>
    > <style type="text/css">
    > pre {
    > width: 80ex;
    > background: #000000;
    > color: #808080;
    > padding: 3px;
    > }
    > </style>
    > <head>
    > <body>
    > <p>
    > Foo
    > </p>
    > <pre>
    > 123456789 123456789 123456789 123456789 123456789 123456789 123456789
    > 123456789.
    >
    > int main()
    > {
    > printf("hello, world\n");
    > }
    > </pre>
    > <p>
    > Bar
    > </p>
    > </body>
    > </html>


    You can try this (-to follow). The good news is that it doesn't work
    in <= ie7. The bad news is that it pretty much works in all modern
    browsers.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> <html>
    <head>
    <title>Console Effect</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body { background:#555;color:silver; }
    #pdiv {
    display:table-cell;
    white-space:nowrap;
    font-family:Courier,monospace;
    font-size:100%;
    }
    #pspan {
    padding:0 3px;
    visibility:hidden;
    }
    #pspan,pre { font-family:Courier,monospace;font-size:80%; }
    pre {
    margin:-1.25em 0 0;
    padding: 3px;
    background: #000000;color: #808080;
    }
    </style>
    </head>
    <body>

    <p>
    Foo
    </p>

    <div id="pdiv">
    <span id="pspan">123456789 123456789 123456789 123456789 123456789
    123456789 123456789 123456789.</span> <pre>
    123456789 123456789 123456789 123456789 123456789 123456789 abcdefghi.

    int main()
    {
    printf("hello, world\n");
    }
    </pre>
    </div>

    <p>
    Bar
    </p>

    </body>
    </html>


    --
    Neredbojias

    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, May 14, 2010
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jensen Bredal
    Replies:
    3
    Views:
    487
    Jensen Bredal
    Nov 25, 2004
  2. Read Roberts
    Replies:
    0
    Views:
    348
    Read Roberts
    Dec 22, 2004
  3. morrell
    Replies:
    1
    Views:
    964
    roy axenov
    Oct 10, 2006
  4. dw
    Replies:
    7
    Views:
    1,279
  5. Disc Magnet
    Replies:
    2
    Views:
    718
    Jukka K. Korpela
    May 15, 2010
Loading...

Share This Page