473,507 Members | 2,374 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Problem with pre {display: inline}

Hello.

I'm using the following code:

<html>
<head>
<style type="text/css">
pre {display: inline;}
</style>
</head>
<body>
<div><pre>hello</pre world</div>
</body>
</html>

IE6.0 deletes all spaces after <preblock and outputs "helloworld". Opera
and Firefox retains at least one space after <preblock. How to resolve
this problem in IE? <prein inline context is needed for outputing all
spaces inside <preas is.

--
Best regards, Vadim.

Nov 20 '06 #1
12 5550
Scripsit Vadim Guchenko:
I'm using the following code:
Why? You're using <preand yet you want it to be inline, perhaps containing
just one word as in your example. Do you realize what happens in non-CSS
browsing situations then? What are you _really_ trying to achieve? As usual,
a URL would help (us to help you).
<div><pre>hello</pre world</div>
What have you _really_ got?
IE6.0 deletes all spaces after <preblock and outputs "helloworld".
So does IE 7. A strange bug, but why do you want to invoke it?
Opera and Firefox retains at least one space after <preblock.
A sequence of spaces should be equivalent to one space, so I don't know what
you mean by "at least".
<prein inline context is needed for
outputing all spaces inside <preas is.
No it isn't. You can use <spanwith white-space: pre. But why do you want
to preserve all spaces in inline content?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 20 '06 #2
Hello.

JKKWhy? You're using <preand yet you want it to be inline, perhaps
JKKcontaining
JKKjust one word as in your example. Do you realize what happens in
JKKnon-CSS
JKKbrowsing situations then? What are you _really_ trying to achieve?

I want to achieve three things in one container:

1. Monospace font. I tried to use <tttag and {font-family: monospace}
style, but in Opera 9.02 such fixed-width font looks bigger than
variable-width font. Only inside <prefixed-width font looks the same size
as the variable-width font in Opera.
2. All spaces inside container must be outputed as is. {white-space: pre} is
not supported by IE6 and early versions.
3. Inline context.
><div><pre>hello</pre world</div>
JKKWhat have you _really_ got?

For example:

<style>pre {display: inline; border: 1px solid blue; background-color:
yellow}</style>
<div>The regular expression can be <pre>^hello world$</preor
<pre>^goodbye world$</pre(two spaces in regular expressions are
significant)</div>
--
Best regards, Vadim.

Nov 20 '06 #3
Scripsit Vadim Guchenko:
I want to achieve three things in one container:

1. Monospace font. I tried to use <tttag and {font-family:
monospace} style, but in Opera 9.02 such fixed-width font looks
bigger than variable-width font. Only inside <prefixed-width font
looks the same size as the variable-width font in Opera.
That's an illogical approach. You should select the logical markup first,
then worry about rendering issues. If you set, say, font-family: "Courier
New" and font-size: 90%, you should get a reasonable rendering in most
browsing situations for monospace text. It would be pointless to rely on the
idiosyncratic default rendering for this or that element in some browsers -
comparable to using <blockquotefor indentation.
2. All spaces inside container must be outputed as is. {white-space:
pre} is not supported by IE6 and early versions.
Huh? IE has supported white-space: pre since version 5.5. Anyone using
anything older than that surely needs to realize that he won't get the best
possible rendering of web pages in general and must concentrate on using
their content.

Actually, what I get when testing your code on IE 7, I can see an additional
problem: the browser may break elements into two lines.
3. Inline context.
Using <spanyou get that automatically. But...
>What have you _really_ got?

For example:

<style>pre {display: inline; border: 1px solid blue; background-color:
yellow}</style>
<div>The regular expression can be <pre>^hello world$</preor
<pre>^goodbye world$</pre(two spaces in regular expressions are
significant)</div>
This isn't a real example, but close enough. So what you _really_ want to do
is to present computer code where the number of consecutive spaces may be
signficant. Then you can apply the approach I suggested, just with <code>
instead of <span>, since _now_ you told us what the content really is.

In fact, if the spaces are _really_ relevant, you can use no-break spaces
and have the desired rendering _without_ line breaks inside the elements.
Even when CSS is off.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 20 '06 #4
Hello.
>2. All spaces inside container must be outputed as is. {white-space:
pre} is not supported by IE6 and early versions.
JKKHuh? IE has supported white-space: pre since version 5.5.

My IE6 does not support white-space: pre.

JKKActually, what I get when testing your code on IE 7, I can see an
JKKadditional
JKKproblem: the browser may break elements into two lines.

This is desired behavior for me, but this behavior is only in IE. Is it
possible to force any browser to output all spaces as {white-space: pre} but
automatically break long lines into several lines? This can be useful for
outputing text inputed by a user in form field. Such text can be very long
and can break the layout of the page. On the other hand, the text should be
outputed with minimal changes. Several spaces should not be replaced with
one space and they should be visually distinguished.

--
Best regards, Vadim.

Nov 21 '06 #5
Scripsit Vadim Guchenko:
My IE6 does not support white-space: pre.
I wonder what you mean by that, especially considering the following...
>Actually, what I get when testing your code on IE 7, I can see an
additional
problem: the browser may break elements into two lines.

This is desired behavior for me, but this behavior is only in IE.
Desired as it might be, it's _against_ the specification, since white-space:
pre means honoring both consecutive whitespace (which is what I meant by
"support", expecting _that_ to be what you wanted) _and_ line breaks so that
no addition line breaks are introduced by a browser.
Is it possible to force any browser
No.

Get used to this. Welcome to the World Wide Web. It's _not_ your worldwide
desktop publishing system.
to output all spaces as
{white-space: pre} but automatically break long lines into several
lines?
How would the user then know how many spaces there are? Knowing that is
presumably relevant, so why do you suddenly want to lose that information in
some situations?
This can be useful for outputing text inputed by a user in
form field.
No it isn't. User input should be processed adequately, not displayed as
such. But this is something quite different from your previous example.

Either the spaces are significant, or they are not. There's little point in
treating them as significant unless some browsers finds a place to split
between words.
Such text can be very long and can break the layout of
the page.
It sounds that you have created yourself a problem by letting users enter
data onto your page without adequately preprocessing it. CSS is by far a
wrong tool for such issues. Justice will be served, in some sense, when
someone submits a gigabyte of junk onto your page.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 21 '06 #6
Hello.
>My IE6 does not support white-space: pre.
JKKI wonder what you mean by that, especially considering the
JKKfollowing...
JKKDesired as it might be, it's _against_ the specification, since
JKKwhite-space:
JKKpre means honoring both consecutive whitespace (which is what I
JKKmeant by
JKK"support", expecting _that_ to be what you wanted) _and_ line
JKKbreaks so that
JKKno addition line breaks are introduced by a browser.

Try this code:

<span style="font-family: monospace; white-space: pre">hello world</span>

Firefox and Opera show three spaces between words while IE6 shows only one.
>Is it possible to force any browser
to output all spaces as
{white-space: pre} but automatically break long lines into several
lines?
JKKHow would the user then know how many spaces there are?

Visually. If background color of container with text differs from background
color of parent object and fixed-width font is used, it is possible to see
how many spaces there are even if line break occurs. On the other hand, user
can copy text from web-page and paste it somewhere else and he expects that
the text will be the same as he inputed it before. And all spaces should be
kept.
>Such text can be very long and can break the layout of
the page.
JKKIt sounds that you have created yourself a problem by letting users
JKKenter
JKKdata onto your page without adequately preprocessing it. CSS is by
JKKfar a
JKKwrong tool for such issues. Justice will be served, in some sense,
JKKwhen
JKKsomeone submits a gigabyte of junk onto your page.

My site is intended for internal use, therefore all is ok. On some page
users input the regular expressions and these regular expressions are showed
on the same page in a table. Of course, all they are preprocessed before
output, but all spaces should be retained and printed and long lines should
be break into several lines if needed.

I see, <preis not ideal for my task. Because when I copy/paste the text
that includes <precontainer with display: inline, I got newline characters
before and after <precontainer. Therefore, now I try to use <spanfor
that purpose. It looks like this:

<style>
..test {
font-family: 'Courier New', monospace;
font-size: 90%;
color: #000000;
background-color: #80e080;
padding: 0em 0.12em;
}
wbr:after {content: '\ad'}
</style>
<div>The regular expression can be <span
class="test">^hello&nbsp;<wbr>&nbsp;<wbr>world.$</spanor <span
class="test">^goodbye&nbsp;<wbr>&nbsp;<wbr>world.$ </span(two spaces
between words are significant)</div>

All spaces in output string are replaced with "&nbsp;<wbr>". It works in IE
and Firefox, but Opera doesn't support <wbrtag. Specially for Opera used
construction wbr:after {content: '\ad'}, that adds to the end of <wbrtag
the ­ entity. Opera shows ­ as a hyphen at the end of broken line. I
would like that Opera breaks the line without hyphen, but I don't know how
to do that.

--
Best regards, Vadim.

Nov 21 '06 #7
Scripsit Vadim Guchenko:
Try this code:

<span style="font-family: monospace; white-space: pre">hello world</span>
I actually tested things before posting my statement about IE support to
white-space: pre.

On your request, I now also created a test document containing a verbatim
copy of your code:
http://www.cs.tut.fi/~jkorpela/test/pre.html
Firefox and Opera show three spaces between words while IE6 shows
only one.
No, both IE 6 and IE 7 show three spaces.

You have probably got different results by using markup that does not
conform to HTML specifications, in a way that happens to throw IE 6 and IE 7
to "quirks mode". Basically, you have not used a DOCTYPE declaration that
conforms to the HTML 4.01 specification.

(It's puzzling why IE doesn't do white-space: pre in "quirks mode", but we
don't really need to worry about it.)
>>Is it possible to force any browser
to output all spaces as
{white-space: pre} but automatically break long lines into several
lines?
How would the user then know how many spaces there are?

Visually. If background color of container with text differs from
background color of parent object and fixed-width font is used, it is
possible to see how many spaces there are even if line break occurs.
Assuming the background color is used and the user happens to notice the
effect and its meaning. Why take such risks?
My site is intended for internal use,
So you don't have a question related to authoring for the WWW, do you?
All spaces in output string are replaced with "&nbsp;<wbr>".
It seems that you are trying to dig deeper, or another hole. Now you are
using a character that _means_ a space without line breaking opportunity
after it and you follow it with a tag that is supposed to tell about a line
breaking opportunity.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 21 '06 #8
Hello.
>Firefox and Opera show three spaces between words while IE6 shows
only one.
JKKNo, both IE 6 and IE 7 show three spaces.
JKKYou have probably got different results by using markup that does
JKKnot
JKKconform to HTML specifications, in a way that happens to throw IE 6
JKKand IE 7
JKKto "quirks mode". Basically, you have not used a DOCTYPE
JKKdeclaration that
JKKconforms to the HTML 4.01 specification.

You are right, with a DOCTYPE declaration IE shows all spaces.
>My site is intended for internal use,
JKKSo you don't have a question related to authoring for the WWW, do
JKKyou?

Probably I have chosen wrong group.

--
Best regards, Vadim.
Nov 21 '06 #9
Scripsit Vadim Guchenko:
Probably I have chosen wrong group.
And you _started a new thread_ just to tell that (and to say that I was
right, which everyone could check himself if he cared). This way, you won't
have a very good starting point if you'll want to start a constructive
discussion some day.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 21 '06 #10
Hello.
>Probably I have chosen wrong group.
JKKAnd you _started a new thread_ just to tell that (and to say that I
JKKwas
JKKright, which everyone could check himself if he cared). This way,
JKKyou won't
JKKhave a very good starting point if you'll want to start a
JKKconstructive
JKKdiscussion some day.

Thank you for your help.

--
Best regards, Vadim.
Nov 21 '06 #11
Jukka K. Korpela schrieb:
And you _started a new thread_ just to tell that
At least the message had a reference (via References:) to
<zP*******************@reader1.news.jippii.net>, the one he responded to.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Nov 21 '06 #12
Els
Johannes Koch wrote:
Jukka K. Korpela schrieb:
>And you _started a new thread_ just to tell that

At least the message had a reference (via References:) to
<zP*******************@reader1.news.jippii.net>, the one he responded to.
My newsreader didn't show a new thread at all.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Talking Heads - Road To Nowhere
Nov 21 '06 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2663
by: FrankBooth | last post by:
Hello, I have a list of names, and when I click ona name I want the extar info to show and then I want to clcik and hide it again. I have the following HTML which works perfectly if I use one...
7
7091
by: Danny | last post by:
I have a small <div> element which contains two text blocks - one within <h5> tags and the other within <p> tags. I don't want any extra line spacing between elements so use the display:inline...
2
1909
by: Stewart | last post by:
Hi Experts. Please put the code sample below into an html document and take a look at in NN6+. One span should be shown while the other is hidden. Clicking the button should reverse this. ...
8
1484
by: Joseph | last post by:
I am attempting to create a function that will hide all SPANS within an ided DIV ="idMain", then only display one span, but this function gives an error when it gets to elChildElement as being...
1
3040
by: books1999 | last post by:
Hi there, I have a problem with this css/div and i cannot work it out. I would like either container to be able to push the background box to grow but in Firefox it overflows. Can someone find a...
8
4782
by: knoxautoguy | last post by:
This problem has consumed a lot of my time, and I'm aftraid someone will tell me that my whole approach to this objective is wrong; however, I would like to know if there is a way to do this. I...
1
1471
by: Lars Eighner | last post by:
What I want: Dictionary-like entry, such as foobar 1. foo 2. bar a. green b. blue What I tried: See end of post. Evidently list-style-type is suppressed so it effectively becomes none
2
3128
by: shivendravikramsingh | last post by:
hi friends, i m using a ajax function for retrieving some values from a database table,and display the values in required field,my prob is that the ajax function i m using is working f9 once,but if...
19
3647
by: Jim | last post by:
Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...
0
7111
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7376
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
7485
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5623
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
5042
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4702
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3191
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3179
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
760
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.