[css-d] Stretch over a cell
Hi, which browsers render my test case correctly? http://cim.szm.com/stretch-over-cell.html Thank you. Michal Cizmazia __ 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] Stretch over a cell
On 9/20/10 5:31 AM, Michal Čizmazia wrote: Hi, which browsers render my test case correctly? http://cim.szm.com/stretch-over-cell.html Thank you. Michal Cizmazia On Mac OS X 10.4.11 Pass Opera/10.62 Fail Camino/2.0.3 Safari/4.1.2 WebKit nightly trunk 63031 [crashes browser] SeaMonkey/2.0.7 Firefox/3.6.10 Best, ~d -- :: desktop and mobile :: 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] Stretch over a cell
Wow, thank you David, is the specification clear in this case? Is there a way how can I stretch the nested span over a table cell in all browsers? The test case: - http://jsfiddle.net/Vwg7T/ - http://cim.szm.com/stretch-over-cell.html Michal Cizmazia __ 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] Stretch over a cell
On 9/20/10 6:46 AM, Michal Čizmazia wrote: Wow, thank you David, is the specification clear in this case? Is there a way how can I stretch the nested span over a table cell in all browsers? The test case: - http://jsfiddle.net/Vwg7T/ - http://cim.szm.com/stretch-over-cell.html Michal Cizmazia We will both need to rely on someone else for the answer to your question... Best, ~d -- :: desktop and mobile :: 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] Stretch over a cell
On Sep 20, 2010, at 7:46 PM, Michal Čizmazia wrote: is the specification clear in this case? Is there a way how can I stretch the nested span over a table cell in all browsers? The test case: - http://jsfiddle.net/Vwg7T/ - http://cim.szm.com/stretch-over-cell.html quote from the spec: The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. http://www.w3.org/TR/CSS21/visuren.html#propdef-position depending on what you really want to do, this may work: http://dev.l-c-n.com/_temp/tx-cssd20100920.html 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] Stretch over a cell
Thanks Philippe, your test case works for me. Your quote from the specification seemed to be related to the relatively positioned element itself. I use relative positioning just to create a containing block: If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ... http://www.w3.org/TR/CSS2/visudet.html#containing-block-details Michal Cizmazia __ 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] Stretch over a cell
On Sep 20, 2010, at 9:24 PM, Michal Čizmazia wrote: Your quote from the specification seemed to be related to the relatively positioned element itself. I use relative positioning just to create a containing block: well you apply position relative to the table-cell. What happens in that case is undefined. That is what the part of the spec I quoted says. In Gecko WebKit, position: relative has no effect on a table cell; thus your absolute positioned span takes the width of the viewport (nearest containing block in your case). 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] Multiple select dropdown on a single line
OK, but what you've drawn (posted) is not what you are trying to achieve, but what you can already achieve but which does not match your needs. What I (and perhaps others) need to see is what you are trying to achieve visually; we know from your prose description the intended effect, but not how you envisage it looking to the intending user. Philip Taylor Tod wrote: On 9/15/2010 3:44 PM, Philip Taylor (Webmaster, Ret'd) wrote: Tod, could you draw a picture of what you are attempting to achieve ? Philip Taylor Attached are two files, single.gif and multi.gif. The single dropdown takes up only one line until you click the selector to make it drop down but allows you to select only a *single* item. The multi dropdown offers the ability to select multiple items but at the expense of taking up the amount of real estate specified by the size=x attribute. A size of 1 disables the dropdown. __ 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] Multiple select dropdown on a single line
Tod,
It seems that when you make the height of the select too small there isn't
room for the scrollbar. This simple hack might give you some ideas:
select { height: 1.5em; }
select:focus { height: 3em; }
You can also use Javascript to achieve a similar effect.
I tried playing around with this to achieve the closest thing I could to a
one-line, drop-down, multi-select box but there were lots of problems,
most importantly that it doesn't look like a select when the scrollbar is
not visible.
Mark
On Mon, Sep 20, 2010 at 15:16, Philip Taylor (Webmaster, Ret'd)
p.tay...@rhul.ac.uk wrote:
OK, but what you've drawn (posted) is not what you are trying
to achieve, but what you can already achieve but which does not
match your needs. What I (and perhaps others) need to see is
what you are trying to achieve visually; we know from your
prose description the intended effect, but not how you
envisage it looking to the intending user.
Philip Taylor
Tod wrote:
On 9/15/2010 3:44 PM, Philip Taylor (Webmaster, Ret'd) wrote:
Tod, could you draw a picture of what you are attempting to achieve ?
Philip Taylor
Attached are two files, single.gif and multi.gif.
The single dropdown takes up only one line until you click the selector
to make it drop down but allows you to select only a *single* item.
The multi dropdown offers the ability to select multiple items but at
the expense of taking up the amount of real estate specified by the
size=x attribute. A size of 1 disables the dropdown.
__
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-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] 3-column layouts, current state of play
It's a while since I did a 3 column layout, and while looking around a couple of sites (Alex Robinson's onetruelayout and Matthew James Taylor's) I realised that most of this information is 4-5 years old. Which of the gotchas are still valid in latest versions? (I recall not using onetruelayout originally because of scrollbar issues in Opera) My requirements are: - 3 columns, percentage width based) (one is purely decorative and will contain only a background image) - wrapper will be fluid with maximum and minimum widths set - any order (in fact there will be four templates using all 4 possible order permutations) - image backgrounds on some columns (difficult with - full height columns - sticky footer Are there any more up-to-date layout articles? -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] Making GridView's Header Fixed while Scrolling vertically or horizantally
On Fri, Sep 17, 2010 at 9:32 PM, Dilip Nagle nagle...@gmail.com wrote:
*The Problem:*
At present, I use following css to achieve above; This CSS is
then associated with gridview.header of the gridview
HeaderStyle CssClass=gvFixedHeader_Aqua /
.gvFixedHeader_Aqua{position:relative;
top:expression(this.parentNode.parentNode.parentNode.parentNode.scrollTop-1)
;
background-color: Aqua;
color:Black;
font-family:Arial;
font-size: X-Small;
font-weight: lighter;
border : none;
text-align:center;
height: 20px;}
*The Help Needed:*
The *expression* is not css2 compliant. While, it still works in IE6 to 8,
what is the best alternative?
Use the expression, but in an external stylesheet targeted to the
versions of IE which need it, called from a conditional comment.
Everything the validator and non-IE browsers will see can be valid.
--
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] 3-column layouts, current state of play
I would say that Mathew James Taylor's 3-col holy grail layout is the way to go. He updated them last year I believe, so they're not all that old. On a site I am working on I am using a modified version of his 3col theory in a responisive layout with percentage-based widths. Works like a charm. ~Nate Sent from my Palm Pre On Sep 20, 2010 4:39 PM, Richard Grevers lt;richard.grev...@gmail.comgt; wrote: It's a while since I did a 3 column layout, and while looking around a couple of sites (Alex Robinson's onetruelayout and Matthew James Taylor's) I realised that most of this information is 4-5 years old. Which of the gotchas are still valid in latest versions? (I recall not using onetruelayout originally because of scrollbar issues in Opera) My requirements are: - 3 columns, percentage width based) (one is purely decorative and will contain only a background image) - wrapper will be fluid with maximum and minimum widths set - any order (in fact there will be four templates using all 4 possible order permutations) - image backgrounds on some columns (difficult with - full height columns - sticky footer Are there any more up-to-date layout articles? -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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-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] property for aligning vertical text in a div
Hi, I have no idea what property i need to accomplish the following. If anyone can point me in the right direction i can then go and look it up. I have footer div which has a background image. Question 1: To get the background image to display i needed to add width and height values. Is that correct practice? I obviously presumed wrong that it would just display automatically! Question 2: I have my footer text, in a p. I want the text to be at the bottom of the div not at the top as it is now. Is there a property to accomplish this? The dev page is here: http://www.koolfish.com/devtest/ The css is here: http://www.koolfish.com/devtest/css/mainstyles.css Any pointers appreciated. Lisa __ 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] property for aligning vertical text in a div
You can easily add a margin on the p tag within the footer to push the text down the page to where you need it to be. The height and width you added are NOT for your background image but rather for the DIV you are assigning it to. Otherwise that div will only grow as large as your content, the copyright notice. Regards, Daniel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Lisa Frost Sent: Monday, September 20, 2010 5:09 PM To: css-d@lists.css-discuss.org Subject: [css-d] property for aligning vertical text in a div Hi, I have no idea what property i need to accomplish the following. If anyone can point me in the right direction i can then go and look it up. I have footer div which has a background image. Question 1: To get the background image to display i needed to add width and height values. Is that correct practice? I obviously presumed wrong that it would just display automatically! Question 2: I have my footer text, in a p. I want the text to be at the bottom of the div not at the top as it is now. Is there a property to accomplish this? The dev page is here: http://www.koolfish.com/devtest/ The css is here: http://www.koolfish.com/devtest/css/mainstyles.css Any pointers appreciated. Lisa __ 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-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] property for aligning vertical text in a div
You can easily add a margin on the p tag within the footer to push the text down the page to where you need it to be. Never thought of that. Thanks, that's an easy solution. But going back to my original question. Is there an actual property to accomplish it, like you can have vertical-align in table cells? Lisa __ 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] property for aligning vertical text in a div
Classing the div as display:table-cell would allow the vertical-align to operate -- and does not necessarily require that it be enclosed in table-rows or a table. -- On 9/21/10 at 7:27 AM +0700, Lisa Frost wrote in a message entitled Re: [css-d] property for aligning vertical text in a div: You can easily add a margin on the p tag within the footer to push the text down the page to where you need it to be. Never thought of that. Thanks, that's an easy solution. But going back to my original question. Is there an actual property to accomplish it, like you can have vertical-align in table cells? Lisa -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.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/
