Re: [css-d] The CSS Position Property
On 16/12/2010 6:28 PM, Chetan Crasta wrote: @Thierry: Happy to help. the element is taken out of flow, thus float is rendered impotent @Barney: It doesn't necessarily follow that because the element is out of the flow, float cannot work. If the spec hadn't disallowed it, it would be conceivable for position:absolute and float to be used together to get the combined effect of 5) and 6), that is: a stretched, right or left aligned element, with text or inline elements flowing around it. http://roughtech.com/t/posit.html (corrected) ~Chetan Hello Chetan, It not that the spec disallowed it, but rather float is one of the three positioning schemes [1]. They being: 1. Normal flow. 2. Floats - laid out according to the normal flow, then taken out of the flow. 3. AP. - removed from the normal flow entirely (it has no impact on later siblings). In 9.3.1 Choosing a positioning scheme: 'position' property [2] we see this for position absolute: # Absolutely positioned boxes are taken out of the normal flow. This means # they have no impact on the layout of later siblings. Also, though absolutely # positioned boxes have margins, they do not collapse with any other margins. 1. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme 2. http://www.w3.org/TR/CSS21/visuren.html#choose-position -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
Chetan, Philippe: http://barneycarroll.com/floatAndPos.html Assigned float properties are computed, they just don't take effect. Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 On 16 December 2010 10:12, Alan Gresley a...@css-class.com wrote: On 16/12/2010 6:28 PM, Chetan Crasta wrote: @Thierry: Happy to help. the element is taken out of flow, thus float is rendered impotent @Barney: It doesn't necessarily follow that because the element is out of the flow, float cannot work. If the spec hadn't disallowed it, it would be conceivable for position:absolute and float to be used together to get the combined effect of 5) and 6), that is: a stretched, right or left aligned element, with text or inline elements flowing around it. http://roughtech.com/t/posit.html (corrected) ~Chetan Hello Chetan, It not that the spec disallowed it, but rather float is one of the three positioning schemes [1]. They being: 1. Normal flow. 2. Floats - laid out according to the normal flow, then taken out of the flow. 3. AP. - removed from the normal flow entirely (it has no impact on later siblings). In 9.3.1 Choosing a positioning scheme: 'position' property [2] we see this for position absolute: # Absolutely positioned boxes are taken out of the normal flow. This means # they have no impact on the layout of later siblings. Also, though absolutely # positioned boxes have margins, they do not collapse with any other margins. 1. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme 2. http://www.w3.org/TR/CSS21/visuren.html#choose-position -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
It not that the spec disallowed it The spec did explicitly disallow it, see point number 2: http://www.w3.org/TR/2009/CR-CSS2-20090423/visuren.html#dis-pos-flo Absolutely positioned boxes are taken out of the normal flow The phrase taken out of the flow is used a bit loosely in the spec. Both absolutely positioned and floated elements are out of the flow, the difference being that floated elements are still visible to inline boxes. I'm not sure why the spec disallowed combining absolute positioning with floating, because it seems to be the only way an element could be stretched to the width or height of its auto-height containing element while being aligned to the left or right. http://roughtech.com/t/posit.html example 5 and 6. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
http://barneycarroll.com/floatAndPos.html Assigned float properties are computed, they just don't take effect. Firebug shows computed value of float as none on an element with position:absolute and float:left or float:right ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Box dropping down behind footer in IE7
Hi I have a box on the home page (http://fattoad.co.uk/) which is dropping below the footer in IE7 and cutting off some of the text. There should be 30px between the box and the footer. I have tried a number of different tactics but can't get anything to work. Many thanks, David __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
On 16/12/2010 9:39 PM, Chetan Crasta wrote: It not that the spec disallowed it The spec did explicitly disallow it, see point number 2: http://www.w3.org/TR/2009/CR-CSS2-20090423/visuren.html#dis-pos-flo Thank you, I was looking for that. Absolutely positioned boxes are taken out of the normal flow The phrase taken out of the flow is used a bit loosely in the spec. Both absolutely positioned and floated elements are out of the flow, the difference being that floated elements are still visible to inline boxes. No, taken out of the flow is not used a bit loosely. When you have a float, a UA generates something called a float holder. This is used to check if a run on inline boxes can sit beside the float, or before the float. This can be examined in great detail by how FF, Safari, Opera and IE8+ positions the line boxes appearing before the floats on this page. http://css-class.com/test/css/visformatting/float-inline-content.htm Adjusting the width of the viewport (especially from Example 3a to 4b) shows how the inline boxes jumps above the float when the width of the series of line boxes and the width of the floats combined is greater then the width of their containing block (in this instance the body). Some examples in this test case fails in early versions of Gecko 1.9. I believe FF 3.5 had fixed the bug and IE7-. Float holders also help browsers calculate when a line of floats should begin to drop. This is with or without line boxes. http://css-class.com/test/css/visformatting/float-inline-content.htm Float holders also are used to help browsers know where to position line boxes (or with elements with a display value of inline) to properly flow around floats or better said, not having the text appear over the floats. See this test case which shows Safari 5 still failing two test. http://css-class.com/test/css/visformatting/floats-with-inline-elements2.htm WebKit renders this test different to other browser. http://css-class.com/test/css/visformatting/first-letter-floated-abc2.htm This is due to where WebKit places the float holder and something to do with differences between line boxes and line-height in WebKit and other brwosers. Philippe explains better. I'm not sure why the spec disallowed combining absolute positioning with floating, because it seems to be the only way an element could be stretched to the width or height of its auto-height containing element while being aligned to the left or right. http://roughtech.com/t/posit.html example 5 and 6. ~Chetan I do not know what you mean by the only way an element could be stretched to the width or height of its auto-height containing element while being aligned to the left or right. What do you mean by stretched? -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The CSS Position Property
On Dec 16, 2010, at 7:39 PM, Chetan Crasta wrote: It not that the spec disallowed it The spec did explicitly disallow it, see point number 2: http://www.w3.org/TR/2009/CR-CSS2-20090423/visuren.html#dis-pos-flo Better to quote the latest text: http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo (not that it makes much difference for this particular point). Absolutely positioned boxes are taken out of the normal flow The phrase taken out of the flow is used a bit loosely in the spec. Not really; I don't think the spec ever says that floated boxes are 'taken out of the flow', where as it is explicit about it when referring to absolute positioned boxes. Compare the 1st 2 paragraphs of CSS2.1:9.5 with the definition of absolute positioning in 9.6. http://www.w3.org/TR/CSS21/visuren.html#floats http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning Granted the text in 9.5 also says 'not in the flow'... Both absolutely positioned and floated elements are out of the flow, the difference being that floated elements are still visible to inline boxes. Floated boxes are shifted left or right with respect to the line of content but still participate in the general flow of said content, whereas absolute positioned elements are completely removed from the flow, and are sort of layered above it (or below it !). I'm not sure why the spec disallowed combining absolute positioning with floating, because it seems to be the only way an element could be stretched to the width or height of its auto-height containing element while being aligned to the left or right. Because absolute positioning is ultimately orthogonal to float, by its nature it is not affected by the surrounding contents, as stated in 9.6. On Dec 16, 2010, at 11:04 PM, Alan Gresley wrote: WebKit renders this test different to other browser. http://css-class.com/test/css/visformatting/first-letter-floated-abc2.htm This is due to where WebKit places the float holder and something to do with differences between line boxes and line-height in WebKit and other brwosers. Philippe explains better. Uh, Opera reders the same as Webkit (and last I checked, IE does the same). What I'm missing in your test ? Gecko renders it differently. But read carefully about floated first-letter - second paragraph: http://www.w3.org/TR/CSS21/selector.html#first-letter This is what Gecko does: [quote] To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements. [/quote] Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] outdenting 1st line?
Is there a way to use CSS to outdent some text? I will have a list of items (vertical). Some items will be short enough to fit on 1 line. Some will wrap; to clarify that those wrapped items are 1 item and not 2 separate items, I want to outdent the first line, 2nd line would be indented. Like this: This is some text that wraps onto a second line and maybe even a third This is a 2nd item This is the 3rd one which wraps too Can this be done with CSS? -- Rory Bernstein : Web Developer r...@rorybernstein.com http://www.rorybernstein.com phone: 347-469-0414 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box dropping down behind footer in IE7
Give div#inner_wrap a height of around 1100px. The testimonial is getting cutoff because the height of 1015px is insufficient. ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] outdenting 1st line?
Hi,
On Thu, Dec 16, 2010 at 3:20 PM, Rory Bernstein r...@rorybernstein.comwrote:
Is there a way to use CSS to outdent some text? I will have a list of
items (vertical). Some items will be short enough to fit on 1 line. Some
will wrap; to clarify that those wrapped items are 1 item and not 2 separate
items, I want to outdent the first line, 2nd line would be indented.
I´m not sure if I understand what you try to do, but, did test this?
li {
margin-left: 2em;
text-indent: -2em;
}
HTH
--
Camilo Kawerín
kawerin.com.ar
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with absolute positioning?
Hi again,
I am not able to figure out how to position some text on top of a photo (don't
want to use the photo as a background image).
On this page:
http://www.grassrootsfitness.com/
The graphic with the drums that has the orange text trial class week is the
part I am working on. I want the photo to be horizontally alined with the other
photos. The orange HTML text needs to be positioned towards the bottom of the
graphic. (to mimic the look of the other graphics, that have text in the image
itself)
I used 2 divs: one for the graphic, and one for the text that sits on it. Both
have a z-index. I thought that if I used top: 40px for the text, it would
push the text down 40px from the top of the photo. but it is pushing down the
photo instead. What am I doing wrong here?
I am using inline styles just for dev purposes; will put that in a stylesheet
when i get the layout right. The stuff in the curly braces is dynamically
inserted content.
This is the HTML in question:
div id=home-promo1 class=home-promo left rt-gutter
div class=title_overlay style=position: relative; z-index: 10; top:
40px; left: 10px;h2 class=programs-titlea
href={promo_1_link}{promo_1_title}/a/h2/div
div class=photo_under style=position: relative; z-index: 1;a
href={promo_1_link}img src={promo_1_image} width=220 height=108
border=0 alt={promo_1_title} class=home-promo-img //a/div
p{promo_1_text}br /nbsp;/p
/div !-- #home-promo1 --
Thanks!
Rory
--
Rory Bernstein : Web Developer
http://www.rorybernstein.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with absolute positioning?
Hi again, I am not able to figure out how to position some text on top of a photo (don't want to use the photo as a background image). On this page: http://www.grassrootsfitness.com/ The graphic with the drums that has the orange text trial class week is the part I am working on. I want the photo to be horizontally alined with the other photos. The orange HTML text needs to be positioned towards the bottom of the graphic. (to mimic the look of the other graphics, that have text in the image itself) I used 2 divs: one for the graphic, and one for the text that sits on it. Both have a z-index. I thought that if I used top: 40px for the text, it would push the text down 40px from the top of the photo. but it is pushing down the photo instead. What am I doing wrong here? I am using inline styles just for dev purposes; will put that in a stylesheet when i get the layout right. The stuff in the curly braces is dynamically inserted content. This works fine for me: div *style=position: relative;* id=home-promo1 class=home-promo left rt-gutter div class=title_overlay style=*position: absolute; *z-index: 10; top: 40px; left: 10px;h2 class=programs-titlea href=/programs/trial_class_weekTrial Class Week/a/h2/div div class=photo_under *style=*a href=/programs/trial_class_weekimg height=108 border=0 width=220 src=http://everydayathletestudio.com/images/channels/Drums_web2.jpg; alt=Trial Class Week class=home-promo-img//a/div p/p TRIAL WEEK December 13th - December 19th!/p br/ /div -- Camilo Kawerín kawerin.com.ar __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Anchor tags and ability of browser window to scroll
I have been struggling for a few days with a problem related to using anchor tags. The page is question is here http://www.hartley-consultants.com/forum/index.php/board,1.0.html where the Go Up and Go Down links at the bottom and top of the list of forum topics are causing problems. The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a When I have jumped via these links, the browser window will no long scroll to the part of the page above these anchors. Also the page wrapper and associated shadow seems to be offset from the page itself. The problem shows up in Firefox, IE8,Chrome and Safari - but Opera seems to work fine If I change the forum theme to the default that comes with SMF, it works fine. This obviously uses different div's etc surrounding the page and header - the code inside the main page template is the same. When looking at the anchors in Firebug on the HTML tab in this case they are greyed out where as in my own theme they are not, yet there doesn't seem to be any CSS related to visibility. I've wondered if I have mistakenly screwed up the nesting of divs, but if I have, I can't find it. Any ideas? -- Alan Chandler http://www.chandlerfamily.org.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchor tags and ability of browser window to scroll
On Thu, Dec 16, 2010 at 11:37 AM, Alan Chandler a...@chandlerfamily.org.uk wrote: I have been struggling for a few days with a problem related to using anchor tags. The page is question is here http://www.hartley-consultants.com/forum/index.php/board,1.0.html The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a Any ideas? Hello Alan, I am not familiar with using a id=top/a I am more familiar with a name=top/a Try that and see if it helps. Also, this is more of an html question. There is a list specifically designed to handle html specific issues. Folks there might be a better target for your question. Folks on both lists are equally friendly and knowledgeable. WebDesign l...@webdesign-l.com Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchor tags and ability of browser window to scroll
On 16/12/10 19:50, Claude Needham wrote: On Thu, Dec 16, 2010 at 11:37 AM, Alan Chandler a...@chandlerfamily.org.uk wrote: I have been struggling for a few days with a problem related to using anchor tags. The page is question is here http://www.hartley-consultants.com/forum/index.php/board,1.0.html The are links (iea href=#topGo Up/a to anchors of the forma id=top/a Any ideas? Hello Alan, I am not familiar with usinga id=top/a I am more familiar witha name=top/a Try that and see if it helps. Also, this is more of an html question. There is a list specifically designed to handle html specific issues. Folks there might be a better target for your question. Folks on both lists are equally friendly and knowledgeable. WebDesignl...@webdesign-l.com One of the reasons I suspect its a mixture of CSS and HTML is that the links work perfectly with the default theme. Its also the reason I would prefer not to change the id for a name in the anchor tag - the default theme is writing the middle part of the page, and it is this default that is writing the part with the links and the anchors in it. But I will also try the other list -- Alan Chandler http://www.chandlerfamily.org.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchor tags and ability of browser window to scroll
Alan Chandler wrote: http://www.hartley-consultants.com/forum/index.php/board,1.0.html where the Go Up and Go Down links at the bottom and top of the list of forum topics are causing problems. The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a When I have jumped via these links, the browser window will no long scroll to the part of the page above these anchors. Also the page wrapper and associated shadow seems to be offset from the page itself. Any ideas? removing overflow: hidden; for #page_wrapper seems to solve the problem (at least in Seamonkey). hth Susanne __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Frameworks
On 12/15/10 11:50 PM, Joseba Roldan wrote: Hi all, I've just discovered the amazing world of CSS frameworks. I've been using 960Grid so far and I think is pretty good. Anyway, do you know any other recommendable CSS framework? Rather than relying on one particular framework, I suggest studying as many frameworks as you can. There are many useful (and not-so-useful) ideas in all of them. I think I radically improved my CSS by trawling through as many as I could find. Also, many good ideas are consolidated in the HTML5 Boilerplate - even if you don't use HTML5: http://html5boilerplate.com/ Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box dropping down behind footer in IE7
On 12/16/10 10:28 AM, Chetan Crasta wrote re: http://fattoad.co.uk/ Give div#inner_wrap a height of around 1100px. The testimonial is getting cutoff because the height of 1015px is insufficient. FWIW I generally find that min-height works better than plain height in a majority of cases. (And height behaves like min-height in IE 6...) Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchor tags and ability of browser window to scroll
On 16/12/10 20:10, Susanne Jäger wrote: Alan Chandler wrote: http://www.hartley-consultants.com/forum/index.php/board,1.0.html where the Go Up and Go Down links at the bottom and top of the list of forum topics are causing problems. The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a When I have jumped via these links, the browser window will no long scroll to the part of the page above these anchors. Also the page wrapper and associated shadow seems to be offset from the page itself. Any ideas? removing overflow: hidden; for #page_wrapper seems to solve the problem (at least in Seamonkey). Interesting Unfortunately, overflow:hidden is necessary to prevent the right side shadows continuing down the page forever (or rather for 2px). I can't quite remember why - I think its because I need to extend sh_side to at least the bottom of the page, and its one of those column equalising tricks where you use a massive padding and negative margin But at least it corrects my other problem. Now to understand why - seems to indicate that the anchor is somehow causing the content above it to overflow the top of #page_wrapper. -- Alan Chandler http://www.chandlerfamily.org.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
On Thu, Dec 16, 2010 at 12:23 PM, David Hucklesby huckle...@gmail.com wrote: On 12/16/10 10:28 AM, Chetan Crasta wrote re: http://fattoad.co.uk/ Give div#inner_wrap a height of around 1100px. The testimonial is getting cutoff because the height of 1015px is insufficient. FWIW I generally find that min-height works better than plain height in a majority of cases. (And height behaves like min-height in IE 6...) Cordially, David -- I hope it is okay to fork this discussion. (didn't want to disturb the original thread) Reading David's response I realize that I vastly under use min-height. I would like to correct that and start using it in appropriate settings. For the life of me I can't recall why I shied away from min-height a few years back. I started to use it. But, ran into some trouble and an article or two that somehow convinced me that I was better off trying to make due without it. That was then, this is now. I am hoping that someone might be able to point to a good source of info on proper use of min-height so that I don't open a can of worms with cross-browser issues or other gotchas. Regards, Claude Needham __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] outdenting 1st line?
Well, that does the trick! Exactly what I wanted. Thank you SO MUCH!
Mission accomplished,
Rory
On Dec 16, 2010, at 1:28 PM, Camilo Kawerín wrote:
Hi,
On Thu, Dec 16, 2010 at 3:20 PM, Rory Bernstein r...@rorybernstein.com
wrote:
Is there a way to use CSS to outdent some text? I will have a list of items
(vertical). Some items will be short enough to fit on 1 line. Some will wrap;
to clarify that those wrapped items are 1 item and not 2 separate items, I
want to outdent the first line, 2nd line would be indented.
I´m not sure if I understand what you try to do, but, did test this?
li {
margin-left: 2em;
text-indent: -2em;
}
HTH
--
Camilo Kawerín
kawerin.com.ar
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with absolute positioning?
This was the perfect solution. I love it. Now I have to play with the text styles so that the text on the photo reads better. But that's easy! Thank you! Rory On Dec 16, 2010, at 1:56 PM, Camilo Kawerín wrote: This works fine for me: div style=position: relative; id=home-promo1 class=home-promo left rt-gutter div class=title_overlay style=position: absolute; z-index: 10; top: 40px; left: 10px;h2 class=programs-titlea href=/programs/trial_class_weekTrial Class Week/a/h2/div div class=photo_under style=a href=/programs/trial_class_weekimg height=108 border=0 width=220 src=http://everydayathletestudio.com/images/channels/Drums_web2.jpg; alt=Trial Class Week class=home-promo-img//a/div p/p TRIAL WEEK December 13th - December 19th!/p br/ /div -- Camilo Kawerín kawerin.com.ar __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] outdenting 1st line?
At 13:20 16 12 10, Rory Bernstein wrote:
Is there a way to use CSS to outdent some text? I will have a list
of items (vertical). Some items will be short enough to fit on 1
line. Some will wrap; to clarify that those wrapped items are 1 item
and not 2 separate items, I want to outdent the first line, 2nd
line would be indented.
Like this:
This is some text that
wraps onto a second line
and maybe even a third
This is a 2nd item
This is the 3rd one
which wraps too
Can this be done with CSS?
Yes. Use the text-indent property and give it a negative value,
such as:
li {text-indent: -10px;}
Reese
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] is style=float: left identical to align=left
for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? background is, someone required to support legacy HTML content fragments -- or to migrate it, as long as the rendered result is identical, to a new technology named CSS. best would be to have a link to a doc that says yes, all implementations use float for that, internally. Thanks Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Templates 1: Outside The Box
During my work I spend a lot of time searching for CSS templates, and I'm always struck by the fact that __all__ the templates I find are non-semantical and with enormous fixed widths... I know that if you want to post something on Theme Forest you have to stick to pixels and divitis but, hey, there's a limit... I guess. So here's my first, basic test/demo: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html comments are welcome, improvements either. criticisms are too easy with me... I'm a psycho workaholic! HTH http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] is style=float: left identical to align=left
for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? background is, someone required to support legacy HTML content fragments -- or to migrate it, as long as the rendered result is identical, to a new technology named CSS. best would be to have a link to a doc that says yes, all implementations use float for that, internally. Thanks Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
Gabriele, why does DOLOR overlay power of combining when I reduce the width of the window ? Is that truly fluid ? Philip Taylor Gabriele Romanato wrote: Here's my first, basic test/demo: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html comments are welcome, improvements either. criticisms are too easy with me... I'm a psycho workaholic! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
I'm interested in responses to this aspect: There are currently a lot of validation errors with the template; both css and xhtml. My personal rule of thumb is to get as close to validation as possible - shooting for perfect. Now and then I question the strictness of my train of thought. However, if one is creating a template - I am thinking one should shoot for validated code. Any thoughts pro or con for the above? Sincerely, Greg greg wilker | video/web producer *:: 415-388-8200 _ From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gabriele Romanato Subject: [css-d] CSS Templates 1: Outside The Box During my work I spend a lot of time searching for CSS templates, and I'm always struck by the fact that __all__ the templates I find are non-semantical and with enormous fixed widths... I know that if you want to post something on Theme Forest you have to stick to pixels and divitis but, hey, there's a limit... I guess. So here's my first, basic test/demo: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html comments are welcome, improvements either. criticisms are too easy with me... I'm a psycho workaholic! __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [Solved]Anchor tags and ability of browser window to scroll
On 16/12/10 20:31, Alan Chandler wrote: On 16/12/10 20:10, Susanne Jäger wrote: Alan Chandler wrote: http://www.hartley-consultants.com/forum/index.php/board,1.0.html where the Go Up and Go Down links at the bottom and top of the list of forum topics are causing problems. The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a When I have jumped via these links, the browser window will no long scroll to the part of the page above these anchors. Also the page wrapper and associated shadow seems to be offset from the page itself. Any ideas? removing overflow: hidden; for #page_wrapper seems to solve the problem (at least in Seamonkey). Interesting Unfortunately, overflow:hidden is necessary to prevent the right side shadows continuing down the page forever (or rather for 2px). I can't quite remember why - I think its because I need to extend sh_side to at least the bottom of the page, and its one of those column equalising tricks where you use a massive padding and negative margin But at least it corrects my other problem. Now to understand why - seems to indicate that the anchor is somehow causing the content above it to overflow the top of #page_wrapper. Thanks to those who replied. Its now Solved. Overflow:hidden seems to be the enemy of anchors, but an alternative approach to the sidebar, using a background image on #page_wrapper instead of a separate div removes the need for the overflow:hidden directive. -- Alan Chandler http://www.chandlerfamily.org.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
On 12/16/10 5:20 PM, Gabriele Romanato wrote: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html comments are welcome... HTH Test more, for example... 1/ 640 window 2/ 800 window 3/ FF @ minimum font-size 24. 4/ Opera @ minimum font-size 32. 5/ Monitor the character plus space count of the content block line-measure at 1024, 1280, 1400, 1680 and wider. 6/ Is a such a large block of all uppercase a good idea? -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] is style=float: left identical to align=left
On Dec 17, 2010, at 7:14 AM, Ingo Chao wrote: for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? background is, someone required to support legacy HTML content fragments -- or to migrate it, as long as the rendered result is identical, to a new technology named CSS. best would be to have a link to a doc that says yes, all implementations use float for that, internally. Yes, that is the case in all browsers. I don't have an all encompassing doc, except for the html5 spec http://dev.w3.org/html5/spec/Overview.html#alignment http://dev.w3.org/html5/spec/Overview.html#attributes-for-embedded-content-and-images For Gecko it is coded in the UA stylesheet; WebKit has it hardcoded somewhere, I forgot where though http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
On Thu, 16 Dec 2010, Gabriele Romanato wrote: During my work I spend a lot of time searching for CSS templates, and I'm always struck by the fact that __all__ the templates I find are non-semantical and with enormous fixed widths... I know that if you want to post something on Theme Forest you have to stick to pixels and divitis but, hey, there's a limit... I guess. So here's my first, basic test/demo: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html comments are welcome, improvements either. criticisms are too easy with me... I'm a psycho workaholic! http://t.cfaj.ca/outsidethebox.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
Object: http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html On 17.12.2010 00:22, Greg Wilker wrote: There are currently a lot of validation errors with the template; both css and xhtml. Source code claim to be HTML 5, and as such there's nothing wrong with validity, just a warning that HTML 5 isn't a rock-solid standard yet - and we all know that. CSS contains the usual browser-specific -moz- and -webkit- code/workarounds, and apart from that it is valid. It is the construction - visual design - that fails on several points, and those validators can't check that. My personal rule of thumb is to get as close to validation as possible - shooting for perfect. Now and then I question the strictness of my train of thought. Good to have validity as part of the base for coding web sites. I always start there, and source-code can in most cases be made clean enough to pass 100%. OTOH: browsers need those CSS workarounds until they have reached stable handling/rendering of regular CSS, so no need to be too strict on CSS if you want proper results. There's also those old browser version that we are not allowed to ignore yet, so our stylesheets will probably have to carry non-valid bits and pieces for a long time. Non-valid source-code and CSS isn't a problem as long as the designer/coder knows what he/she is doing and why the non-valid code is there and what it's doing. Apparently such knowledge is quite often absent, and then both valid and non-valid code and all sorts of solutions and workarounds tend to become, or create, problems. However, if one is creating a template - I am thinking one should shoot for validated code. Same (as above) goes for templates, but it is more important that a template is well documented, and that it actually works. To Gabriele: your out of the box template is in need of a lot more testing and tuning visually across browser-land and with various browser settings. As it is it can't take much of anything in any browser, so it certainly isn't out of the box yet. Good idea though. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Templates 1: Outside The Box
On 17/12/2010 12:57 PM, Chris F.A. Johnson wrote:
On Thu, 16 Dec 2010, Gabriele Romanato wrote:
[snip]
http://onwebdev.blogspot.com/2010/12/css-templates-outside-box.html
comments are welcome, improvements either. criticisms are too easy
with me... I'm a psycho workaholic!
http://t.cfaj.ca/outsidethebox.jpg
The overlap is caused by the absolute height given on the header which
allows the line boxes (Lorem ipsum dolor) to escape. Gabriele needs to
remove the height and rethink the padding right approach.
#main h2 {
height: 102px; /* remove */
padding-right: 105px; /* different approach */
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] is style=float: left identical to align=left
Am Freitag, 17. Dezember 2010 schrieb Philippe Wittenbergh e...@l-c-n.com: On Dec 17, 2010, at 7:14 AM, Ingo Chao wrote: for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? ... Yes, that is the case in all browsers. I don't have an all encompassing doc, except for the html5 spec http://dev.w3.org/html5/spec/Overview.html#alignment http://dev.w3.org/html5/spec/Overview.html#attributes-for-embedded-content-and-images For Gecko it is coded in the UA stylesheet; WebKit has it hardcoded somewhere, I forgot where though http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css Philippe Perfect. Thank you, Philippe! Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
I am hoping that someone might be able to point to a good source of info on proper use of min-height This is a good reference on min-height: http://reference.sitepoint.com/css/min-height ~Chetan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help with IE6 and #*? Box Model
Hi all, I'm moving a site from tables into html5 and css, and onto WordPress. The head of the organization is concerned that the front page drops the 2 rows of 3 images out of alignment in her browser, which is ... AOL. Aargh. I've added a conditional statement to serve iecss.css to IE6, and I've tried a number of rules in it, but haven't managed a fix. The page is here: http://ohalah.org/wp/resources/member-sites The site is using the html5 doctype, which throws the page into quirks mode for IE6, yes? The page validates as html5. I could serve some other doctype to just the home page to avoid quirks mode, or deal with quirks mode. Any philosophy or wisdom on which approach is better? I kind of lean toward keeping the entire site as html5, since time is only marching forward. Regards, Beth Lee www.bethleedesign.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE6 and #*? Box Model
On Thu, Dec 16, 2010 at 10:34 PM, Beth Lee callib...@gmail.com wrote: Hi all, I'm moving a site from tables into html5 and css, and onto WordPress. The head of the organization is concerned that the front page drops the 2 rows of 3 images out of alignment in her browser, which is ... AOL. Aargh. Aargh again. The URL I gave was one of only 2 remaining tables on the site. I have other issues with those. I meant to reference this URL regarding the IE6 box model: http://ohalah.org/wp/index.php Beth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
On Dec 17, 2010, at 5:45 AM, Claude Needham wrote: I am hoping that someone might be able to point to a good source of info on proper use of min-height so that I don't open a can of worms with cross-browser issues or other gotchas. The spec is a good start :-) see 10.7: http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height one or two things to note: * min-height (and max-height) trigger 'haslayout' in IE 7 http://www.satzansatz.de/cssd/onhavinglayout.html#prop http://www.satzansatz.de/cssd/onhavinglayout.html#reset * conflicting behaviour with margin-collapsing see Bruno's test / demo page: http://www.brunildo.org/test/collminmax.html Neither of these issues have ever prevented me from using this property. ps - Can someone send me a screenshot of what IE 9 does with Bruno's page ? Tia. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE6 and #*? Box Model
On Dec 17, 2010, at 2:38 PM, Beth Lee wrote:
'm moving a site from tables into html5 and css, and onto WordPress. The
head of the organization is concerned that the front page drops the 2 rows
of 3 images out of alignment in her browser, which is ... AOL.
The site is using the html5 doctype, which throws the page into quirks mode
for IE6, yes? The page validates as html5.
The HTML5 doctype doesn't trigger quirksmode in IE 6, last I checked. (the
space you have before the doctype may trigger quirksmode, though.
I meant to reference this URL regarding the IE6 box model:
http://ohalah.org/wp/index.php
As far as I can see without checking in IE 6 (the VM being on another machine),
the issue is not one of box model, but margin-doubling on floated blocks
Your images have a left margin, IE 6 doubles that, and making a mess.
The usual fix:
#home-content img {
display:block;
float:left;
margin:0 0 0.6em 0.6em;
display: inline /* -- add */
}
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with IE6 and #*? Box Model
http://ohalah.org/wp/index.php While you're fixing IE6, note that you have serious typos in the IE6 stylesheet link in that page... link href=link rel=stylesheet type=text/css media=all href=http://ohalah.org/wp/wp-content/themes/o-twentyten/iecss.css; rel=stylesheet type=text/css ...should rather be... link rel=stylesheet type=text/css media=all href=http://ohalah.org/wp/wp-content/themes/o-twentyten/iecss.css; rel=stylesheet type=text/css regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-height best-practices
On Thu, Dec 16, 2010 at 9:32 PM, Chetan Crasta chetancra...@gmail.com wrote: This is a good reference on min-height: http://reference.sitepoint.com/css/min-height On Thu, Dec 16, 2010 at 10:04 PM, Philippe Wittenbergh e...@l-c-n.com wrote: The spec is a good start :-) see 10.7: http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height one or two things to note: * min-height (and max-height) trigger 'haslayout' in IE 7 http://www.satzansatz.de/cssd/onhavinglayout.html#prop http://www.satzansatz.de/cssd/onhavinglayout.html#reset * conflicting behaviour with margin-collapsing see Bruno's test / demo page: http://www.brunildo.org/test/collminmax.html Thanks to you both for the references. I'll dig into them. As you say the spec is a good place to start. However, the parts I am mostly looking is how navigate the idiosyncrasies created by implementations from the various browsers. The other references look to be good starting points for those. Thanks again, Claude __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
