Paragraph with caption in margin
in [CSS]
|
Prev: Top Align Div and Paragraph
Next: How to place a picture centered on a webpage / with fixed offset of 300 pixels from left border?
From: Stan Brown on 20 Dec 2009 13:00 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
From: Jonathan N. Little on 20 Dec 2009 14:06 Stan Brown wrote: > > 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? > <!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
From: dorayme on 20 Dec 2009 16:37 In article <hglsk0$a5m$1(a)news.eternal-september.org>, "Jonathan N. Little" <lws4art(a)gmail.com> wrote: > Stan Brown wrote: > > > > 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? > > > > <!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> 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
From: Stan Brown on 21 Dec 2009 05:07 Mon, 21 Dec 2009 08:37:28 +1100 from dorayme <doraymeRidThis(a)optusnet.com.au>: > > In article <hglsk0$a5m$1(a)news.eternal-september.org>, > "Jonathan N. Little" <lws4art(a)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? -- 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
From: Jonathan N. Little on 21 Dec 2009 13:01
Stan Brown wrote: > Mon, 21 Dec 2009 08:37:28 +1100 from dorayme > <doraymeRidThis(a)optusnet.com.au>: >> >> In article<hglsk0$a5m$1(a)news.eternal-september.org>, >> "Jonathan N. Little"<lws4art(a)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. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |