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

D

Disc Magnet

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>
 
D

dorayme

Lewis said:
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.
 
N

Neredbojias

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>
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top