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. Re: 80 character wide <pre> block appears only 60 character wideon Windows

    Ben C wrote:

    > There is no unit that does quite what you want, but you can do some
    > shrink-to-fit trickery, e.g. like this:
    >
    > pre
    > {
    > float: left;
    > background: #000000;
    > color: #808080;
    > }
    >
    > pre span.ruler
    > {
    > visibility: hidden;
    > }
    >
    > ...
    >
    > <pre><span class="ruler">********************************************************************************</span>
    >


    Rather that put in a "invisible" element, since he has a column ruler in
    his content, just use that.

    pre span.ruler {
    white-space: nowrap;
    }

    ....
    <pre><span class="ruler">123456789 123456789 ... </span>
    code fragment


    Oh, just discovered if you use a SPAN instead of a DIV for the ruler you
    need to add "display: block;" to the rule for IE<=7 support.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, May 14, 2010
    #2
    1. Advertising

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

    Neil Gould wrote:

    > "ex" is the *height* of the x character in a font, not its width.


    By definition, ex is the x-height of the font. CSS recommendations do not
    actually define what x-height means, but in typography, x-height is the
    height of lowercase letters without ascenders and descenders. IE does not
    care about this but inteprets ex as 0.5em (which is absurd and makes the ex
    unit fairly useless).

    > Try "em", the width of the m character, not that it will be a guarantee
    > that browsers will interpret that in the same way either.


    Where did you get the idea that em is the width of the m character? Hint:
    using CSS, create a colored box that is 1em wide and place the letter m in
    that box. You would have to try very hard to find _any_ font where the
    letter m is as wide as the box.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 15, 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:
    480
    Jensen Bredal
    Nov 25, 2004
  2. Read Roberts
    Replies:
    0
    Views:
    346
    Read Roberts
    Dec 22, 2004
  3. morrell
    Replies:
    1
    Views:
    946
    roy axenov
    Oct 10, 2006
  4. dw
    Replies:
    7
    Views:
    1,265
  5. Disc Magnet
    Replies:
    2
    Views:
    785
    Neredbojias
    May 14, 2010
Loading...

Share This Page