f



dt tag extends beyond right margin

Sample URL:
http://oakroadsystems.com/sharware/grepman.htm#R6.4-MessagesWarning
Look at the second message in that section. The message text extends 
way beyond the right margin, instead of wrapping. The messages are 
all <dt><samp>text</samp></dt>.

CSS: http://oakroadsystems.com/ors.css

I've tried Firefox's inspector, and it shows a width for the <samp> 
of 1890 pixels, but I can't figure out why. I don't think this is 
just a Firefox quirk, as MSIE also renders the <dt> as one very long 
line.

I don't have non-breaking spaces in the text. I tried putting <br> in 
at strategic points, and that solves the problem visually, but of 
course hand-breaking lines in HTML is a really bad idea.

I tried switching <samp> to <code>, but that made no difference.

Can some kind soul point out my mistake?  Thanks!


-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
12/18/2016 12:45:33 PM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

5 Replies
141 Views

Similar Articles

[PageSpeed] 16

Sorry -- I should have mentioned that both HTML and CSS validate 
cleanly.


-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
12/18/2016 1:10:49 PM
In article <MPG.32c04ef69baffe6d98fa4b@news.individual.net>, 
the_stan_brown@fastmail.fm says...
> 
> Sample URL:
> http://oakroadsystems.com/sharware/grepman.htm#R6.4-MessagesWarning
> Look at the second message in that section. The message text extends 
> way beyond the right margin, instead of wrapping. The messages are 
> all <dt><samp>text</samp></dt>.
> 
> CSS: http://oakroadsystems.com/ors.css
> 
> I've tried Firefox's inspector, and it shows a width for the <samp> 
> of 1890 pixels, but I can't figure out why. I don't think this is 
> just a Firefox quirk, as MSIE also renders the <dt> as one very long 
> line.
> 
> I don't have non-breaking spaces in the text. I tried putting <br> in 
> at strategic points, and that solves the problem visually, but of 
> course hand-breaking lines in HTML is a really bad idea.
> 
> I tried switching <samp> to <code>, but that made no difference.
> 
> Can some kind soul point out my mistake?  Thanks!

I've brought it up in Chrome's (excellent) developer tools (built-in to 
Chrome, accessed via F12, but a bit of learning needed to make sense of 
them).

In ors.css line 218 you have:
....  white-space:nowrap  ...

In DevTools you can simply untick that setting to turn if off in the 
local copy, and - for reasons I don't claim to understand - the problem 
goes away instantly.  I clearly need to mug up the white-space property!

-- 

Phil, London
0
Philip
12/18/2016 2:38:51 PM
In article <MPG.32c0afdad3ff000b989752@news.eternal-september.org>, 
thiswillbounceback@you.com says...
> 
> In article <MPG.32c04ef69baffe6d98fa4b@news.individual.net>, 
> the_stan_brown@fastmail.fm says...
> > 
> > Sample URL:
> > http://oakroadsystems.com/sharware/grepman.htm#R6.4-MessagesWarning
> > Look at the second message in that section. The message text extends 
> > way beyond the right margin, instead of wrapping. The messages are 
> > all <dt><samp>text</samp></dt>.
> > 
> > CSS: http://oakroadsystems.com/ors.css
> > 
> > I've tried Firefox's inspector, and it shows a width for the <samp> 
> > of 1890 pixels, but I can't figure out why. I don't think this is 
> > just a Firefox quirk, as MSIE also renders the <dt> as one very long 
> > line.
> > 
> > I don't have non-breaking spaces in the text. I tried putting <br> in 
> > at strategic points, and that solves the problem visually, but of 
> > course hand-breaking lines in HTML is a really bad idea.
> > 
> > I tried switching <samp> to <code>, but that made no difference.
> > 
> > Can some kind soul point out my mistake?  Thanks!
> 
> I've brought it up in Chrome's (excellent) developer tools (built-in to 
> Chrome, accessed via F12, but a bit of learning needed to make sense of 
> them).
> 
> In ors.css line 218 you have:
> ...  white-space:nowrap  ...
> 
> In DevTools you can simply untick that setting to turn if off in the 
> local copy, and - for reasons I don't claim to understand - the problem 
> goes away instantly.  I clearly need to mug up the white-space property!

Aha!

http://www.w3schools.com/cssref/pr_text_white-space.asp 


-- 

Phil, London
0
Philip
12/18/2016 2:40:19 PM
On Sun, 18 Dec 2016 14:38:51 -0000, Philip Herlihy wrote:

> In ors.css line 218 you have:
> ...  white-space:nowrap  ...
> 
> In DevTools you can simply untick that setting to turn if off in the 
> local copy, and - for reasons I don't claim to understand - the problem 
> goes away instantly.  I clearly need to mug up the white-space property!

That invocation (white-space: nowrap") is to prevent automatic browser
insertion of line breaks at white space, i.e., to forestall line-wrapping.
(The "valid" replacement for the "invalid" but largely respected NOBR tag.)

If that sort of formatting was *not* intended, best to cancel that setting.

Cheers, and Seasons' Best Greetings, -- tlvp
-- 
Avant de repondre, jeter la poubelle, SVP.
0
tlvp
12/18/2016 7:12:40 PM
On Sun, 18 Dec 2016 14:38:51 -0000, Philip Herlihy wrote:
> 
> In article <MPG.32c04ef69baffe6d98fa4b@news.individual.net>, 
> the_stan_brown@fastmail.fm says...
> > 
> > Sample URL:
> > http://oakroadsystems.com/sharware/grepman.htm#R6.4-MessagesWarning
> > Look at the second message in that section. The message text extends 
> > way beyond the right margin, instead of wrapping. The messages are 
> > all <dt><samp>text</samp></dt>.
> > 
> > CSS: http://oakroadsystems.com/ors.css
 
> I've brought it up in Chrome's (excellent) developer tools (built-in to 
> Chrome, accessed via F12, but a bit of learning needed to make sense of 
> them).
> 
> In ors.css line 218 you have:
> ...  white-space:nowrap  ...

Golly -- I looked right at that in the CSS before posting, but didn't 
pick up on it.  Thanks, Philip!

> In DevTools you can simply untick that setting to turn if off in the 
> local copy, and - for reasons I don't claim to understand - the problem 
> goes away instantly.  I clearly need to mug up the white-space property!

The CSS [2] Property Table is at 
https://www.w3.org/TR/CSS2/propidx.html#q24.0
I prefer that to W3Schools, based on things I've read here and in 
ciwa.html. The specific URL for white-space is
https://www.w3.org/TR/CSS2/text.html#propdef-white-space



-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
12/18/2016 8:16:50 PM
Reply: