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: dorayme on 21 Dec 2009 15:40 In article <MPG.259912fc8a6991b998bde2(a)news.individual.net>, Stan Brown <the_stan_brown(a)fastmail.fm> 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? 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
From: Gus Richter on 21 Dec 2009 16:58 On 12/21/2009 3:40 PM, dorayme wrote: > In article<MPG.259912fc8a6991b998bde2(a)news.individual.net>, > Stan Brown<the_stan_brown(a)fastmail.fm> 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? > > 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. > Have a look again at Jonathan's ASCII art. I would like to suggest floating the expandd description, right and flowing the topic on the left. -- Gus
From: GTalbot on 24 Dec 2009 14:08 On 20 déc, 13:00, Stan Brown <the_stan_br...(a)fastmail.fm> wrote: 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/
From: Stan Brown on 2 Jan 2010 08:41 Mon, 21 Dec 2009 13:01:22 -0500 from Jonathan N. Little <lws4art(a)gmail.com>: > > 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 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, 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 2 Jan 2010 08:46
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. > 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, 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 |