Paragraph with caption in margin
Stan Brown
I'm trying to establish a left margin for a summary paragraph, with
the word "Summary" in the margin. It's not working in IE7, and I'd
appreciate some help. It works fine in Firefox; see this URL:
http://www.tc3.edu/instruct/sbrown/stat/correl.htm
But in IE7 the same page has problems: the word "Summary" is way too
far to the left, and the paragraph text is centered rather than left
justified. Here's a picture:
http://www.tc3.edu/instruct/sbrown/ti83/webpage2.jpg
The paragraph is styled with class Summary, and the word "Summary" is
styled with class SummaryH. The relevant declarations are
.SummaryH
{ float:left; margin-left:-6.5em; width:6.5em }
.Summary
{ margin-left:6.5em; margin-top:1em; text-indent:0 }
and the CSS is at http://www.tc3.edu/instruct/sbrown/tc3.css
The very next paragraph works correctly, as you can see. The only
difference I'm aware of is that that paragraph contains a <br>.
IE7 also works as expected when I have a div rather than a p. For
example:
http://www.tc3.edu/instruct/sbrown/ti83/math200b.htm
Here's a picture:
http://www.tc3.edu/instruct/sbrown/ti83/webpage3.jpg
1. Have I made some subtle mistake in my CSS?
2. Whether I have or not, does IE8 get it right and make the summary
p look like the webpage3 picture rather than the webpage2 one?
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
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://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
Jonathan N. Little
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>One Way</title>
<style type="text/css">
p.summarize {
margin-left: 6em;
}
p.summarize span {
display: block; position: relative; left: -6em; top: 1.25em;
}
</style>
</head>
<body>
<p class="summarize"><span>Summary: </span>
From the sample correlation it is possible to estimate the population
correlation. This page previews the techniques of inferential statistics
that can estimate the correlation coefficient of the population.
</p>
<p class="summarize"><span>See also: </span>
A downloadable Excel workbook does all these calculations. The
downloadable TI-83/84 program Extra Statistics Utilities part 6 computes
confidence intervals and hypothesis tests.
</p>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
dorayme
Perhaps not so simple in Stan's context. Take a look at it.
Surely what is intended is close enough to a table to justify an HTML
one in this case. The trickiest thing then is simply to style the ul
that has the bullets so that it is indented but not *too much*.
Btw, Stan, perhaps you ought to consider a bulletless UL for the 'See
also' data rather than a <br> to distinguish the two items.
--
dorayme
Stan Brown
<dorayme...@optusnet.com.au>:
>
> In article <hglsk0$a5m$1...@news.eternal-september.org>,
> "Jonathan N. Little" <lws...@gmail.com> wrote:
> > p.summarize span {
> > display: block; position: relative; left: -6em; top: 1.25em;
> > }
>
> Perhaps not so simple in Stan's context. Take a look at it.
Thanks to you both for responding.
Replacing a float with a position:relative seems to be the nub of
Jonathan's suggestion. Jonathan, can you say why you prefer one over
the other, and Dorayme, can you say what you expect to go wrong? I'm
not generally comfortable with position, so I take this as a learning
opportunity.
And I'm still wondering: is this an IE7 bug, or have I done something
wrong?
> Surely what is intended is close enough to a table to justify an HTML
> one in this case. The trickiest thing then is simply to style the ul
> that has the bullets so that it is indented but not *too much*.
Hmm ... I hadn't really thought about a table because it seemed like
I was using it to solve a layout problem. But maybe I go too far in
avoiding tables.
> Btw, Stan, perhaps you ought to consider a bulletless UL for the 'See
> also' data rather than a <br> to distinguish the two items.
I agree that the <br> is wrong because it will mess up in a narrow
widow, and I can see why you suggest a list, but why bulletless?
Jonathan N. Little
> Mon, 21 Dec 2009 08:37:28 +1100 from dorayme
> <dorayme...@optusnet.com.au>:
>>
>> In article<hglsk0$a5m$1...@news.eternal-september.org>,
>> "Jonathan N. Little"<lws...@gmail.com> wrote:
>
>>> p.summarize span {
>>> display: block; position: relative; left: -6em; top: 1.25em;
>>> }
>>
>> Perhaps not so simple in Stan's context. Take a look at it.
>
> Thanks to you both for responding.
>
> Replacing a float with a position:relative seems to be the nub of
> Jonathan's suggestion. Jonathan, can you say why you prefer one over
> the other, and Dorayme, can you say what you expect to go wrong? I'm
> not generally comfortable with position, so I take this as a learning
> opportunity.
IE especially IE6 has problems with floats and margins...This way just
bypasses it even works in old IE5x
>
> And I'm still wondering: is this an IE7 bug, or have I done something
> wrong?
>
>> Surely what is intended is close enough to a table to justify an HTML
>> one in this case. The trickiest thing then is simply to style the ul
>> that has the bullets so that it is indented but not *too much*.
>
> Hmm ... I hadn't really thought about a table because it seemed like
> I was using it to solve a layout problem. But maybe I go too far in
> avoiding tables.
Table would work...I guess
+---------+-----------------+
| topic | expanded |
| | description.... |
+---------+-----------------+
| topic | expanded |
| | description.... |
+---------+-----------------+
>
>> Btw, Stan, perhaps you ought to consider a bulletless UL for the 'See
>> also' data rather than a<br> to distinguish the two items.
>
> I agree that the<br> is wrong because it will mess up in a narrow
> widow, and I can see why you suggest a list, but why bulletless?
>
I have no issue with the bullets.
dorayme
Stan Brown <the_sta...@fastmail.fm> wrote:
> Mon, 21 Dec 2009 08:37:28 +1100 from dorayme
> <dorayme...@optusnet.com.au>:
> >
> > In article <hglsk0$a5m$1...@news.eternal-september.org>,
> > "Jonathan N. Little" <lws...@gmail.com> wrote:
>
> > > p.summarize span {
> > > display: block; position: relative; left: -6em; top: 1.25em;
> > > }
> >
> > Perhaps not so simple in Stan's context. Take a look at it.
>
> Thanks to you both for responding.
>
> Replacing a float with a position:relative seems to be the nub of
> Jonathan's suggestion. Jonathan, can you say why you prefer one over
> the other, and Dorayme, can you say what you expect to go wrong?
It was not that I expected anything to go wrong. In fact I always expect
things to go right with Jonathan's suggestions. It was that when I tried
it in the web developer, that is really putting his markup inside yours,
it played up. I might have made a simple mistake? Try it yourself and
see it in context.
> > Surely what is intended is close enough to a table to justify an HTML
> > one in this case. The trickiest thing then is simply to style the ul
> > that has the bullets so that it is indented but not *too much*.
>
> Hmm ... I hadn't really thought about a table because it seemed like
> I was using it to solve a layout problem. But maybe I go too far in
> avoiding tables.
>
In this case, I think so. It is the simplest and most apt solution and
one least likely to play up cross browser wise. Tables for browser are
like maltose for beer yeast (it can eat other but it particularly likes
malt) <g>
> > Btw, Stan, perhaps you ought to consider a bulletless UL for the 'See
> > also' data rather than a <br> to distinguish the two items.
>
> I agree that the <br> is wrong because it will mess up in a narrow
> widow, and I can see why you suggest a list, but why bulletless?
Again, you need to try it for real to see the problems - mere aesthetic
ones in your context. Briefly, when there are bullets, you have to be
careful with margins and paddings (zeroing them on a UL can make the
bullets disappear, different browsers cook up their bullets positions a
bit differently). To try to control the position of a UL, on the other
hand, does mean you are likely to use left margin and/or padding. You
presently have the bullets neatly against the vertical line that can be
imagined to be the left of the right cells.
Try making a table and see how it looks. If you see no problem, great.
--
dorayme
Gus Richter
floating the expandd description, right and flowing the topic on the left.
--
Gus
GTalbot
Hello Stan,
> IE7 also works as expected when I have a div rather than a p.
div and p are block-level elements. The main difference between these
2 is that div has by default and by definition no margin-top and no
margin-bottom. p element usually have a margin-top of 1em and a margin-
bottom of 1em. And this is a triggering component of bugs in IE6 and
IE7 float model.
http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
gives you the values of margin for p element and the ones suggested by
appendix D
> 1. Have I made some subtle mistake in my CSS?
>
> 2. Whether I have or not, does IE8 get it right
One advantage of downloading and installing IE8 (therefore replacing,
removing IE7) is that you can see how your webpage renders in IE7 too
by clicking the compatibility view button or by going Developer tools
(F12) and then viewing/verifying how the page looks in IE7. The
reverse is not possible. browsershots.org is another possibility if
you must use the real IE7.
> I'm still wondering: is this an IE7 bug, or have I done something
wrong?
It's most likely a bug in IE7 and how it handles the margins in its
implementation of the float model:
See bugs 37, 46, 50, 107 and 183 (there are others):
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug37
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug46
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug50
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug107
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug183
(and many others)
and
IE Float model and the reality
http://css-class.com/articles/explorer/floats/floatandcleartest1.htm
I submitted
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/FloatedBlockBugIE7.html
in the CSS 2.1 test suite because sometimes, some versions of Opera
10.x also fails the same way IE7 does.
season's greetings,
Gérard
--
Internet Explorer 7 bugs: 185 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 58 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Stan Brown
<lws...@gmail.com>:
>
> Stan Brown wrote:
> > Mon, 21 Dec 2009 08:37:28 +1100 from dorayme
> > <dorayme...@optusnet.com.au>:
> >>
> >> In article<hglsk0$a5m$1...@news.eternal-september.org>,
> >> "Jonathan N. Little"<lws...@gmail.com> wrote:
> >
> >>> p.summarize span {
> >>> display: block; position: relative; left: -6em; top: 1.25em;
> >>> }
> >>
> >> Perhaps not so simple in Stan's context. Take a look at it.
> >
> > Thanks to you both for responding.
> >
> > Replacing a float with a position:relative seems to be the nub of
> > Jonathan's suggestion. Jonathan, can you say why you prefer one over
> > the other, and Dorayme, can you say what you expect to go wrong? I'm
> > not generally comfortable with position, so I take this as a learning
> > opportunity.
>
> IE especially IE6 has problems with floats and margins...This way just
> bypasses it even works in old IE5x
Thanks for responding. What with the holidays, I'm just now getting
back to things that require intellectual effort. :-)
I have IE6 at home, so I'll have to try the position:relative at work
on Monday.
But you say "IE6 has problems with floats and margins" as your reason
for replacing float with position. Your solution works in IE6, but
so did my original:
http://www.tc3.edu/instruct/sbrown/stat/correl.htm
I'm hoping that position:relative will work in IE7, as float does
not, because then I can just change one external style sheet without
changing the markup in dozens of pages.
Stan Brown
<dorayme...@optusnet.com.au>:
> Again, you need to try it for real to see the problems - mere aesthetic
> ones in your context. Briefly, when there are bullets, you have to be
> careful with margins and paddings (zeroing them on a UL can make the
> bullets disappear, different browsers cook up their bullets positions a
> bit differently). To try to control the position of a UL, on the other
> hand, does mean you are likely to use left margin and/or padding. You
> presently have the bullets neatly against the vertical line that can be
> imagined to be the left of the right cells.
This seems to work for me at creating a bulleted list with no
(visible) left margin:
ul.purelist { margin-left:0.6em; padding-left:0.6em }
Am I missing something? I got that suggestion from this newsgroup a
couple of years ago.
> Try making a table and see how it looks. If you see no problem,
> great.
To be honest, my biggest problem now with a table is inertia. I've
got dozens of pages marked up with <p> and <span> or <div> and <span>
for the captions.
Stan Brown
<the_sta...@fastmail.fm>:
>
> Mon, 21 Dec 2009 13:01:22 -0500 from Jonathan N. Little
> <lws...@gmail.com>:
> >
> > Stan Brown wrote:
> > > Mon, 21 Dec 2009 08:37:28 +1100 from dorayme
> > > <dorayme...@optusnet.com.au>:
> > >>
> > >> In article<hglsk0$a5m$1...@news.eternal-september.org>,
> > >> "Jonathan N. Little"<lws...@gmail.com> wrote:
> > >
> > >>> p.summarize span {
> > >>> display: block; position: relative; left: -6em; top: 1.25em;
> > >>> }
> > >>
> > >> Perhaps not so simple in Stan's context. Take a look at it.
> > >
> > > Thanks to you both for responding.
> > >
> > > Replacing a float with a position:relative seems to be the nub of
> > > Jonathan's suggestion. Jonathan, can you say why you prefer one over
> > > the other, and Dorayme, can you say what you expect to go wrong? I'm
> > > not generally comfortable with position, so I take this as a learning
> > > opportunity.
> >
> > IE especially IE6 has problems with floats and margins...This way just
> > bypasses it even works in old IE5x
>
> Thanks for responding. What with the holidays, I'm just now getting
> back to things that require intellectual effort. :-)
>
> I have IE6 at home, so I'll have to try the position:relative at work
> on Monday.
However, I just now tried it in Firefox, and it greatly increases the
top margin of paragraphs. The text you provided is uploaded as
http://www.tc3.edu/instruct/sbrown/zonk.htm
and the screen shot is at
http://www.tc3.edu/instruct/sbrown/zonk-firefox356.jpg
I understand why you had to make the left captions display:block:
with display:inline the first line of the paragraph gets pushed
right. But why top:-1.25em? I see that in practice it positions the
caption at nearly the same height as the paragraph, but I don't
understand the logic. I would have thought top:0, to make the heights
the same.
Any way to fix the top-margin problem?
I've reread the spec sections 9.4 and 9.8 yet again, but I still
don't understand it. Is there a correct but clearer explanation
somewhere?
Ben C
Position: relative moves an element relative to _where it would have
been if it was position: static_.
The normal static position for the spans, since they are display: block,
is above the text and aligned to the left of the Ps (you can see exactly
where it is by turning off position: relative temporarily). It should be
clear why they have to move both left and down to get to the desired
positions.
Note also that position: relative leaves a "hole" behind _which still
takes up space_. In other words, everything else on the page flows
around where the element would have been if you hadn't whisked it away
with top and left. That's why you're getting the apparent extra top
margin.
> Any way to fix the top-margin problem?
Here's one:
p.summarize {
margin-left: 6em;
position: relative;
}
p.summarize span {
display: block; position: absolute; left: -6em; top: 0;
}
Here we make the Ps relatively positioned, not so we can move them
themselves, but so they become "containing blocks" for the spans.
Then we move the spans relative to the Ps' top left corners by 6em to
the left. It's not necessary to move them up or down, so we use top: 0
(top: auto will work too, but the spec does not provide cast-iron
guarantees-- better to use top: 0).
Position: absolute doesn't leave a hole behind the way position:
relative does, so we avoid the top-margin problem.
Instead of relative to an element's _own_ static position, it positions
relative to the containing block's top-left corner. That's why we had to
make the Ps into containing blocks for the spans.
Relative positioning is actually not very useful in practice mainly
because of the "hole". Apart from using it as a better subscript and
superscript (because vertical-align alters line box height in a way that
is both baffling and annoying) I would probably only ever use it for the
side-effects of creating containing blocks (as in my example above) or
stacking contexts-- i.e. without setting top, bottom, left or right.
> I've reread the spec sections 9.4 and 9.8 yet again, but I still
> don't understand it. Is there a correct but clearer explanation
> somewhere?
All there is to know about position: relative is:
1. The offset specified with top/left/bottom/right is relative to where
the box would have been if it were position: static.
2. It leaves a hole behind-- everything else flows around its original
un-offsetted position as if it hadn't moved.
3. It creates a containing-block for positioned descendents.
4. Relatively positioned boxes are stacked higher than normal, and you
can control their stacking with z-index.
Gus Richter
>
> Am I missing something?
>
Note the title of the stuff below and try it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>KISS Way</title>
<style type="text/css">
.summarize { margin-left:6em;width:40em;background:tan; }
span { float:left;background:magenta; } /*span or div*/
</style>
</head>
<body>
<span>Summary:</span>
<p class="summarize">
From the sample correlation it is possible to estimate the population
correlation. This page previews the techniques of inferential statistics
that can estimate the correlation coefficient of the population.
</p>
<span>See also: </span>
<p class="summarize">
A downloadable Excel workbook does all these calculations. The
downloadable TI-83/84 program Extra Statistics Utilities part 6 computes
confidence intervals and hypothesis tests.
</p>
<span>Contents: </span>
<div class="summarize">
<ul>
<li><a
href="#Overview"><code>MATH200B</code> Program Overview</a>:
<small><a
href="#Download">Getting the Program</a></small> |
<small><a href="#Using">Using the Program</a></small>
</li><li><a href="#MenuSkurt">1. Skewness and Kurtosis</a>:
<small><a
href="#MenuSkurtUsing">Using the Program</a></small> |
<small><a
href="#MenuSkurtExampleHeight">Example: College Students� Heights</a></small> |
<small><a
href="#MenuSkurtExampleDice">Example: Throwing Dice</a></small>
</li><li><a href="#MenuTimeser">2. Time Series Plots</a>
</li><li><a href="#MenuCriticalt">3. Critical t or Inverse t</a>
</li><li>Blah, blah...
</li><li><a href="#WhatsNew">What�s New</a>
</li></ul>
</div>
<div style="width:90%;margin-left:5%;">
<h1>Two points:</h1>
<p>1. The magenta items are floated left. The tan items have a left
margin applied and flow to the right of the floats. I also gave them a
width.</p>
<p>2.You don't have a background color in your page, but I used two for
clarification. Because of the can of worms with List from browser to
browser, place
the List within a div and don't move the List if you want to bring the
bullets closer to the left, but rather move the div.</p>
</div>
</body>
</html>
dorayme
Gus Richter <gusri...@netscape.net> wrote:
> On 1/2/2010 8:46 AM, Stan Brown wrote:
> >
> > Am I missing something?
> >
> Note the title of the stuff below and try it.
>
> <!DOCTYPE html ...
Great quoting Gus, demonstrates comprehensive reading! Never mind third
party readers though ...
Happy New Year!
--
dorayme
Gus Richter
Thank you for the cynical sentiment following the terse comment. It
really does pain me that I didn't do justice by being careful, check my
work and validate. Get out your cat o' nine tails. In any case, here is
a corrected and validated version. Oh and Happy New Year to you too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>KISS Way</title>
<style type="text/css">
.summarize { margin-left:6em;width:40em;background:#CC9966; }
div.summary { float:left;background:#FF00CC; }
</style>
</head>
<body>
<div class="summary">Summary:</div>
<p class="summarize">
From the sample correlation it is possible to estimate the population
correlation. This page previews the techniques of inferential statistics
that can estimate the correlation coefficient of the population.
</p>
<div class="summary">See also:</div>
<p class="summarize">
A downloadable Excel workbook does all these calculations. The
downloadable TI-83/84 program Extra Statistics Utilities part 6 computes
confidence intervals and hypothesis tests.
</p>
<div class="summary">Contents:</div>
<div class="summarize">
<ul>
<li><a
href="#Overview"><code>MATH200B</code> Program Overview</a>:
<small><a
href="#Download">Getting the Program</a></small> |
<small><a href="#Using">Using the Program</a></small>
</li><li><a href="#MenuSkurt">1. Skewness and Kurtosis</a>:
<small><a
href="#MenuSkurtUsing">Using the Program</a></small> |
<small><a
href="#MenuSkurtExampleHeight">Example: College Students' Heights</a></small> |
<small><a
href="#MenuSkurtExampleDice">Example: Throwing Dice</a></small>
</li><li><a href="#MenuTimeser">2. Time Series Plots</a>
</li><li><a href="#MenuCriticalt">3. Critical t or Inverse t</a>
</li><li>Blah, blah...
</li><li><a href="#WhatsNew">What's New</a>
</li></ul>
</div>
<div style="width:90%;margin-left:5%;">
<h1>Two points:</h1>
<p>1. The magenta items are floated left. The tan items have a left
margin applied and flow to the right of the floats (I also gave them a
width).</p>
dorayme
Gus Richter <gusri...@netscape.net> wrote:
> On 1/2/2010 4:51 PM, dorayme wrote:
> > In article<hho6gj$7um$1...@news.eternal-september.org>,
> > Gus Richter<gusri...@netscape.net> wrote:
> >
> >> On 1/2/2010 8:46 AM, Stan Brown wrote:
> >>>
> >>> Am I missing something?
> >>>
> >> Note the title of the stuff below and try it.
> >>
> >> <!DOCTYPE html ...
> >
> > Great quoting Gus, demonstrates comprehensive reading! Never mind third
> > party readers though ...
> >
> > Happy New Year!
> >
>
> Thank you for the cynical sentiment following the terse comment. It
> really does pain me that I didn't do justice by being careful, check my
> work and validate. Get out your cat o' nine tails. In any case, here is
> a corrected and validated version. Oh and Happy New Year to you too.
>
>
I had not meant to point out any mistakes in your HTML. I was just
trying to make you feel terrible and ghastly pain for cutting out my
name in your quoting. <g>
--
dorayme
Gus Richter
> In article<hhpj11$qss$1...@news.eternal-september.org>,
Oh, you mean this part:
<quote>
It [table] is the simplest and most apt solution and
one least likely to play up cross browser wise.
</quote>
Which I thought was meant in jest. (See my "last" recommended solution.)
Or this:
<quote>
To try to control the position of a UL, on the other
hand, does mean you are likely to use left margin and/or padding.
</quote>
Item #2 in my "Two Points" of my "last" recommended solution contains a
_gem_ regarding List positioning to avoid the can of worms.
--
Gus
dorayme
Gus Richter <gusri...@netscape.net> wrote:
No, no, Gus, my mind is on holidays, I meant nothing as deep as this!
Merely that you failed to provide any context in your post that went:
On 1/2/2010 8:46 AM, Stan Brown wrote:
> Am I missing something?
Note the title of the stuff below and try it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
I am meaning to take a look at your markup soon... Cheers...
--
dorayme
Stan Brown
<gusri...@netscape.net>:
>
> On 1/2/2010 4:51 PM, dorayme wrote:
> > In article<hho6gj$7um$1...@news.eternal-september.org>,
> > Gus Richter<gusri...@netscape.net> wrote:
> >
> >> On 1/2/2010 8:46 AM, Stan Brown wrote:
> >>>
> >>> Am I missing something?
> >>>
> >> Note the title of the stuff below and try it.
> >>
> >> <!DOCTYPE html ...
> >
> > Great quoting Gus, demonstrates comprehensive reading! Never mind third
> > party readers though ...
> >
> > Happy New Year!
> >
>
> Thank you for the cynical sentiment following the terse comment. It
> really does pain me that I didn't do justice by being careful, check my
> work and validate. Get out your cat o' nine tails. In any case, here is
> a corrected and validated version. Oh and Happy New Year to you too.
Thanks for posting, but unfortunately, though your new version does
validate, it doesn't work in IE6. The paragraphs begin not on the
same line as the captions but on the next line.
Stan Brown
>
> On 2010-01-02, Stan Brown <the_sta...@fastmail.fm> wrote:
> > Any way to fix the top-margin problem?
>
> Here's one:
>
> p.summarize {
> margin-left: 6em;
> position: relative;
> }
> p.summarize span {
> display: block; position: absolute; left: -6em; top: 0;
> }
>
> Here we make the Ps relatively positioned, not so we can move them
> themselves, but so they become "containing blocks" for the spans.
Thanks, Ben. This works in IE6, at least, and I'll try it in IE7
tomorrow.
> > I've reread the spec sections 9.4 and 9.8 yet again, but I still
> > don't understand it. Is there a correct but clearer explanation
> > somewhere?
>
> All there is to know about position: relative is:
>
> 1. The offset specified with top/left/bottom/right is relative to where
> the box would have been if it were position: static.
> 2. It leaves a hole behind-- everything else flows around its original
> un-offsetted position as if it hadn't moved.
> 3. It creates a containing-block for positioned descendents.
> 4. Relatively positioned boxes are stacked higher than normal, and you
> can control their stacking with z-index.
Thanks for this too. I had noticed the hole during my
experimentation, but now it makes more sense to me.
Gus Richter
> Sun, 03 Jan 2010 03:03:43 -0500 from Gus Richter
> <gusri...@netscape.net>:
>>
>> On 1/2/2010 4:51 PM, dorayme wrote:
>>> In article<hho6gj$7um$1...@news.eternal-september.org>,
>>> Gus Richter<gusri...@netscape.net> wrote:
>>>
>>>> On 1/2/2010 8:46 AM, Stan Brown wrote:
>>>>>
>>>>> Am I missing something?
>>>>>
>>>> Note the title of the stuff below and try it.
>>>>
>>>> <!DOCTYPE html ...
>>>
>>> Great quoting Gus, demonstrates comprehensive reading! Never mind third
>>> party readers though ...
>>>
>>> Happy New Year!
>>>
>>
>> Thank you for the cynical sentiment following the terse comment. It
>> really does pain me that I didn't do justice by being careful, check my
>> work and validate. Get out your cat o' nine tails. In any case, here is
>> a corrected and validated version. Oh and Happy New Year to you too.
>
> Thanks for posting, but unfortunately, though your new version does
> validate, it doesn't work in IE6. The paragraphs begin not on the
> same line as the captions but on the next line.
>
I wonder which IE6 you're using, because it looks perfect in my IE6 -
that's to say that IE6 and Fx3.5.6 both look the same.
--
Gus
Gus Richter
>
> I am meaning to take a look at your markup soon... Cheers...
>
In that case, change the first 5 lines, in order to stay in step, to:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>KISS Way</title>
--
Gus
dorayme
Stan Brown <the_sta...@fastmail.fm> wrote:
> Tue, 22 Dec 2009 07:40:09 +1100 from dorayme
> <dorayme...@optusnet.com.au>:
> > Again, you need to try it for real to see the problems - mere aesthetic
> > ones in your context. Briefly, when there are bullets, you have to be
> > careful with margins and paddings (zeroing them on a UL can make the
> > bullets disappear, different browsers cook up their bullets positions a
> > bit differently). To try to control the position of a UL, on the other
> > hand, does mean you are likely to use left margin and/or padding. You
> > presently have the bullets neatly against the vertical line that can be
> > imagined to be the left of the right cells.
>
> This seems to work for me at creating a bulleted list with no
> (visible) left margin:
>
> ul.purelist { margin-left:0.6em; padding-left:0.6em }
>
> Am I missing something? I got that suggestion from this newsgroup a
> couple of years ago.
Hope it was not me you got it from! Now let's see, which of my enemies
are the most likely suspects... <g>
The problem is that different browsers make different calculations for
placing bullets. To take your style above, look at:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Bullets, paddings, margins</title>
</head>
<body>
<div id="container" style="border: 1px solid;">
<ul style="margin-left:0.6em; padding-left:0.6em">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</body>
</html>
and see what happens to the bullets in realtion to the left border of
the list element container in different browsers. In Safari, for
example, they travel (like the moon <g>) *across* the border at certain
smaller user text settings.
--
dorayme
Stan Brown
<gusri...@netscape.net>:
6.0.2900.2180.xpsp_sp2_rtm.040803-2158
Stan Brown
<gusri...@netscape.net>:
6.0.2900.2180.xpsp_sp2_rtm.040803-2158
I've got it on line at
http://www.tc3.edu/instruct/sbrown/zonkrichter.htm
The output of IE7 does look correct:
http://www.tc3.edu/instruct/sbrown/zonkrichter.jpg
and matches Firefox 3.5.6.
Stan Brown
> > Any way to fix the top-margin problem?
>
> Here's one:
>
> p.summarize {
> margin-left: 6em;
> position: relative;
> }
> p.summarize span {
> display: block; position: absolute; left: -6em; top: 0;
> }
I think this is the goods, Ben. I modified Mr. Little's code using
your styles above and put it up at
http://www.tc3.edu/instruct/sbrown/zonk_benc.htm
IE6 output looks fine, and IE7 output also looks fine:
http://www.tc3.edu/instruct/sbrown/zonk_benc.jpg
I then modified the beginning of my original page using relative and
absolute positions similar to the above:
http://www.tc3.edu/instruct/sbrown/zonk_stan.htm
Again, good in IE7
http://www.tc3.edu/instruct/sbrown/zonk_stan.jpg
and also in IE6.
Many thanks!
Stan Brown
<news...@gtalbot.org>:
Thanks for your comments, and especially for browsershots.org. I've
bookmarked it for future use.
Gus Richter
> Sun, 03 Jan 2010 16:03:40 -0500 from Gus Richter
> <gusri...@netscape.net>:
>>
>> On 1/3/2010 3:42 PM, Stan Brown wrote:
>>> Thanks for posting, but unfortunately, though your new version does
>>> validate, it doesn't work in IE6. The paragraphs begin not on the
>>> same line as the captions but on the next line.
>>>
>>
>> I wonder which IE6 you're using, because it looks perfect in my IE6 -
>> that's to say that IE6 and Fx3.5.6 both look the same.
>
> 6.0.2900.2180.xpsp_sp2_rtm.040803-2158
>
> I've got it on line at
> http://www.tc3.edu/instruct/sbrown/zonkrichter.htm
It looks perfect to me on my IE6 which is:
6.0.2900.5512.xpsp_sp3_gdr.090804-1435
Looks to me like your IE6 is an older version which supports even less
than the latest updated, which mine is. Hey, you can support to every
minor and major release of every browser if you want (what a massive
job). I support only to the very latest of every browser. It's the
user's responsibility (you in this case) to keep his/her browser
updated. Like as if it's a difficult thing - MS lets you know that there
is an update available. You must have gone with that reported garbage
where some folks advised not to go with Service Pack 3 (sp3).
> The output of IE7 does look correct:
> http://www.tc3.edu/instruct/sbrown/zonkrichter.jpg
> and matches Firefox 3.5.6.
Well, at least here you have success.
Another way to look at it: Do you care to support a Firefox user that,
for one reason or another, did not update from 2.8.x (numbers picked out
of my hat) or whatever? Of course not. You only care about the support
of the latest Fx Version. Same for all other browsers.
N.B. You cannot rely on your IE6 that you are using! However, use tables
if you feel more comfortable, or whatever.
--
Gus
Stan Brown
paragraph captions. When I tried to apply it to all my pages, it
worked for <div> but not for <p>, even though the styles were
identical.
It turns out there's an IE7 bug all right, but it's not what we
thought. Instead, styles from a <p> within a <div> "leak" to the <p>
that follows the </div>. This affects background-color and text-
align, at least, in addition to the messed-up layout of the paragraph
caption. If a <div> follows the </div>, there's no leakage and the
paragraph caption is placed correctly, either with float or with
position.
Quite surprisingly, if I insert a simple comment after the </div>,
then the leakage does not occur and the caption is placed correctly.
I've put together test cases with screen shots to show this:
http://www.tc3.edu/instruct/sbrown/ie7bug/ie7bug.htm
M. Talbot: If you want to take any of these to document IE7 bugs,
please feel free. However, please move fast: I'll be removing all
the pages in about a week.
Stan Brown
<dorayme...@optusnet.com.au>:
>
> In article <MPG.25a91829...@news.individual.net>,
> Stan Brown <the_sta...@fastmail.fm> wrote:
> > This seems to work for me at creating a bulleted list with no
> > (visible) left margin:
> >
> > ul.purelist { margin-left:0.6em; padding-left:0.6em }
> >
> > Am I missing something? I got that suggestion from this newsgroup a
> > couple of years ago.
>
> Hope it was not me you got it from! Now let's see, which of my enemies
> are the most likely suspects... <g>
>
> The problem is that different browsers make different calculations for
> placing bullets.
What is the right way, please?
dorayme
Stan Brown <the_sta...@fastmail.fm> wrote:
> Mon, 04 Jan 2010 08:31:12 +1100 from dorayme
> <dorayme...@optusnet.com.au>:
> >
> > In article <MPG.25a91829...@news.individual.net>,
> > Stan Brown <the_sta...@fastmail.fm> wrote:
> > > This seems to work for me at creating a bulleted list with no
> > > (visible) left margin:
> > >
> > > ul.purelist { margin-left:0.6em; padding-left:0.6em }
> > >
> > > Am I missing something? I got that suggestion from this newsgroup a
> > > couple of years ago.
> >
> > The problem is that different browsers make different calculations for
> > placing bullets.
>
> What is the right way, please?
Ah! Now that is a good question but we better remind ourselves of what
the context is. I am going on memory here, you are welcome to define the
problem more.
The issue is that we want a bulleted list to be pretty consistently,
browser to browser the same distance right of left edge of a containing
element, in a context where it would look odd not to have the bullets
neatly lined up to the left edge like in. The slight blemish as in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css" media="all">
#wrap {border-left: 1px solid;}
</style>
</head>
<body>
<div id="wrap">
<table>
<tr><td>data item :</td><td>data item</td><td>...</td></tr>
<tr><td>data item :</td><td>data item</td><td>...</td></tr>
</table>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>...</li>
</ul>
</div>
</body>
</html>
I would probably either redesign slightly the context so the comparison
with any left aligned table items above would not be there to compare or
I might do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css" media="all">
#wrap {border-left: 1px solid;}
table {margin-bottom: 1em;}
ul, li {list-style: none; margin-left: 0; padding-left: 0;}
</style>
</head>
<body>
<div id="wrap">
<table>
<tr><td>data item :</td><td>data item</td><td>...</td></tr>
<tr><td>data item :</td><td>data item</td><td>...</td></tr>
</table>
<ul>
<li>· list item</li>
<li>· list item</li>
<li>· list item</li>
</ul>
</div>
</body>
</html>
Or even
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css" media="all">
#wrap {border-left: 1px solid;}
table {margin-bottom: 1em;}
ul {list-style: none; margin: 0; padding: 0;s}
li {color: #000; padding-left: .5em; margin-left: .2em; background:
#fff url(pics/blackbullet3*3.gif) no-repeat 0em .5em;}
</style>
</head>
<body>
<div id="wrap">
<table>
<tr><td>data item :</td><td>data item</td><td>...</td></tr>
<tr><td>data item :</td><td>data item</td><td>...</td></tr>
</table>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</body>
</html>
where the bullet image is simply a black 3x3px dot.
--
dorayme