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: Gus Richter on 3 Jan 2010 16:03 On 1/3/2010 3:42 PM, Stan Brown wrote: > Sun, 03 Jan 2010 03:03:43 -0500 from Gus Richter > <gusrichter(a)netscape.net>: >> >> On 1/2/2010 4:51 PM, dorayme wrote: >>> In article<hho6gj$7um$1(a)news.eternal-september.org>, >>> Gus Richter<gusrichter(a)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
From: Gus Richter on 3 Jan 2010 16:11 On 1/3/2010 3:30 PM, dorayme wrote: > > 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
From: dorayme on 3 Jan 2010 16:31 In article <MPG.25a9182955e8ea698be27(a)news.individual.net>, Stan Brown <the_stan_brown(a)fastmail.fm> wrote: > Tue, 22 Dec 2009 07:40:09 +1100 from dorayme > <doraymeRidThis(a)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
From: Stan Brown on 4 Jan 2010 20:25 Sun, 03 Jan 2010 16:03:40 -0500 from Gus Richter <gusrichter(a)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 The output of IE7 does look correct: http://www.tc3.edu/instruct/sbrown/zonkrichter.jpg and matches Firefox 3.5.6. -- 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: Stan Brown on 4 Jan 2010 20:29
Sat, 02 Jan 2010 11:06:56 -0600 from Ben C <spamspam(a)spam.eggs>: > On 2010-01-02, Stan Brown <the_stan_brown(a)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; > } 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, 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 |