Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   80 character wide <pre> block appears only 60 character wide onWindows (http://www.velocityreviews.com/forums/t723013-80-character-wide-pre-block-appears-only-60-character-wide-onwindows.html)

Disc Magnet 05-14-2010 08:29 AM

80 character wide <pre> block appears only 60 character wide onWindows
 
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>

dorayme 05-14-2010 10:25 AM

Re: 80 character wide <pre> block appears only 60 character wide on Windows
 
In article <slrnhuq43g.2vts.g.kreme@ibook-g4.local>,
Lewis <g.kreme@gmail.com.dontsendmecopies> 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

Neredbojias 05-14-2010 10:57 AM

Re: 80 character wide <pre> block appears only 60 character wide on Windows
 
On 14 May 2010, Disc Magnet <discmagnet@gmail.com> 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/


All times are GMT. The time now is 05:16 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.