Re: [css-d] aligning some text in td at bottom
Thanks, David. The flex solution is really nice - I'm so glad you worked that through! I have to support IE7+ (not my choice), so I would have to use JS in addition to this. (And for some reason, I'm not getting the flex tags in IE10 - but I haven't taken a look at why these aren't coming through) On Nov 15, 2013, at 7:23 PM, David Hucklesby huckle...@gmail.com wrote: On 11/14/13, 5:43 AM, Sara Haradhvala wrote: I ended up using JavaScript to set the height of each cell - that seems to work in all browsers! On Nov 13, 2013, at 5:03 PM, Chris Rockwell ch...@chrisrockwell.com wrote: [...] Pretty sure display:flex is going to make this a non-issue, so if you're only needing to work with latest releases, I'd go with that. On Wed, Nov 13, 2013 at 4:02 PM, Sara Haradhvala har...@comcast.net wrote: Would really appreciate a suggestion and explanation from this group. I'd like to align a link at the bottom of a table cell. The rest of the text should be aligned at the top of the cell. I'd also like to leave some padding above the link so that I can reduce the width of the window and there's room for the link to wrap to become 3 short lines rather than 1 long line without bumping into the text. I'd like the cell sizes to be variable if at all possible. [code snipped] A day late and a dollar short, as I am new to flex boxes. But Chris is right, and here's my attempt, with table display fallback for old browsers. The flex seems to work for far more browsers than I thought. (But I cheated and use prefixfree.js to get old versions to work.) http://cdpn.io/ynfie Glad you got some JavaScript that works, Sara. Here's Chris Coyier's solution: http://css-tricks.com/absolutely-position-element-within-a-table-cell/ -- Cordially, David __ css-discuss [css-d@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] aligning some text in td at bottom
Chris, I agree with this. And adding new rows means you have to turn off some borders to make it look right - you don't want borders between the text and its link. Sara On Nov 16, 2013, at 4:05 PM, Chris Rockwell ch...@chrisrockwell.com wrote: Except that to position the link inside the table cell isn't the only solution, Why not on a new row for instance? Why must the link belong on the exact same row? I don't see that. Should the link not appear in the cell in which the content it relates to resides? Putting it in a new row would take the link out of context and, arguably, be a misuse of the table row - adding a row for styling purposes. It would be acceptable (and semantically correct) to add a new row if the links contained in the cells within that row were applicable to the entire column (or adding a new cell if applicable to entire row) but if a link only relates to the contents in that cell, I would argue it should be in that cell. Sometimes you may have to resort to scripting for good reasons, but commonly I try and rethink what I'm doing in that case. I've found in my experience this type of thing only creep up on me when I don't have the proper control over the design ideas that must be implemented. I had a scrolling column design once which controls just had to have the same look on all platforms and the only way to do that then — known to me at least — was to get some scripts for the controls. I still thought this was unwise and in the end I also couldn't use that site for my portfolio. Everyone loses from such situations. This isn't an issue of JavaScript making things usable, it's using JavaScript to make things look the most desired way. Think of it in layers, get as close as you can with HTML, then as close as you can with CSS, then finish it off with JavaScript. I don't think you'll ever get some elements to look the exact same cross-browser even with JavaScript (unless you use an image, of course). Use JavaScript to your advantage, just as you do CSS. __ css-discuss [css-d@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 [css-d@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] aligning some text in td at bottom
Hi Karl - thanks. This doesn't work for me in IE. Did you see it working there?
Sara
On Nov 16, 2013, at 7:58 PM, Karl DeSaulniers k...@designdrumm.com wrote:
On Nov 13, 2013, at 3:02 PM, Sara Haradhvala wrote:
Would really appreciate a suggestion and explanation from this group.
I'd like to align a link at the bottom of a table cell. The rest of the text
should be aligned at the top of the cell. I'd also like to leave some
padding above the link so that I can reduce the width of the window and
there's room for the link to wrap to become 3 short lines rather than 1 long
line without bumping into the text. I'd like the cell sizes to be variable
if at all possible.
Is this possible in all browsers? I got it to work in Firefox as follows,
but in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
box-sizing:content-box, it works - but that doesn't work in Firefox. And
neither box-sizing works in IE.
table border=1
tr
td
divLorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum. a href=#link/a
/div
/td
td
divSmall amount of text a href=#link/a
/div
/td
/tr
/table
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0;
display:block;
}
Hi Sara,
Is this what your talking about?
http://designdrumm.com/test.zip
This was a fluid layout template from dreamweaver with your html added to.
I am not positive from your description that this is what your looking for.
May still need some media queries of your own added though.
HTH,
Best,
Karl
__
css-discuss [css-d@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 [css-d@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] aligning some text in td at bottom
The link to the zip file or the html files inside the zip didn't work in IE? I am not able to test on IE being that I am on a Mac at the moment. Sry. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 17, 2013, at 6:17 AM, Sara Haradhvala wrote: Hi Karl - thanks. This doesn't work for me in IE. Did you see it working there? -- Sara Haradhvala Manager, Harlen Web Consulting LLC s...@harlenweb.com __ css-discuss [css-d@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] aligning some text in td at bottom
On Nov 16, 2013, at 4:05 PM, Chris Rockwell ch...@chrisrockwell.com wrote: Except that to position the link inside the table cell isn't the only solution, Why not on a new row for instance? Why must the link belong on the exact same row? I don't see that. Should the link not appear in the cell in which the content it relates to resides? It may or it may not. Putting it in a new row would take the link out of context and, arguably, be a misuse of the table row - adding a row for styling purposes. Not quite. Not every row must be of the same type in a all tables. It depends on the content. I'm not trying to solve Saras design problem here, I'm talking generally. Chances are that if you actually NEED to present the link visually apart from the rest of the cell content, it may very well logically belong on a row with just links. I disagree this must be done for style purposes. The semantic relation is still clear on the vertical axis to the cell content above. It really depends on the actual content, doesn't it? It would be acceptable (and semantically correct) to add a new row if the links contained in the cells within that row were applicable to the entire column (or adding a new cell if applicable to entire row) but if a link only relates to the contents in that cell, I would argue it should be in that cell. Yes, that may be the case, but then again not. If it is then you can also use structured markup for the cell content and style it as any box. Yes, issues like this may turn up. One can choose to resolve to javascript if so inclined. I won't. I'm going to do a lot of product tables in the project I'm starting tomorrow so I'm sure this will creep up. __ css-discuss [css-d@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] Chrome for Mac disowns children
Developing a drop-down menu, I'm following an idea I came across that adds a
marker to a menu item that has a following sub-menu[1]. It uses this selector
that works in CSS3 browsers:
.nav li a:first-child:nth-last-child(2) {...}
While this works in modern browsers, the marker disappears in Chrome v.31.0 for
Mac. In this simplified Pen, it disappears on :hover. With slightly more complex
CSS it does not appear on Chrome at all. (Okay on Chrome for Windows.)
http://codepen.io/hucklesby/full/KghaC
If you have Chrome on a Mac, I'd be grateful if you let me know whether you see
this phenomenon. Could be something to do with my install (on Mavericks, FWIW).
Thanks in advance.
[1] http://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
--
Cordially,
David
__
css-discuss [css-d@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] Chrome for Mac disowns children
Le 18 nov. 2013 à 13:11, David Hucklesby huckle...@gmail.com a écrit : While this works in modern browsers, the marker disappears in Chrome v.31.0 for Mac. In this simplified Pen, it disappears on :hover. With slightly more complex CSS it does not appear on Chrome at all. (Okay on Chrome for Windows.) http://codepen.io/hucklesby/full/KghaC If you have Chrome on a Mac, I'd be grateful if you let me know whether you see this phenomenon. Could be something to do with my install (on Mavericks, FWIW). Seems to work fine here on Chrome 33dev - OSX10.9 Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@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] Chrome for Mac disowns children
Marker disappears on hover in chrome 31 on windows 7 also. I would try to help you debug, but all those positional selectors make my head hurt. I think it's cool for dev's to figure out what can be done, but I seriously hope I *never* have to debug a site with CSS like that :D On Sun, Nov 17, 2013 at 11:51 PM, Philippe Wittenbergh e...@l-c-n.comwrote: Le 18 nov. 2013 à 13:11, David Hucklesby huckle...@gmail.com a écrit : While this works in modern browsers, the marker disappears in Chrome v.31.0 for Mac. In this simplified Pen, it disappears on :hover. With slightly more complex CSS it does not appear on Chrome at all. (Okay on Chrome for Windows.) http://codepen.io/hucklesby/full/KghaC If you have Chrome on a Mac, I'd be grateful if you let me know whether you see this phenomenon. Could be something to do with my install (on Mavericks, FWIW). Seems to work fine here on Chrome 33dev - OSX10.9 Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@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/ -- Chris Rockwell __ css-discuss [css-d@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] aligning some text in td at bottom
On Nov 13, 2013, at 3:02 PM, Sara Haradhvala wrote:
Would really appreciate a suggestion and explanation from this group.
I'd like to align a link at the bottom of a table cell. The rest of the text
should be aligned at the top of the cell. I'd also like to leave some padding
above the link so that I can reduce the width of the window and there's room
for the link to wrap to become 3 short lines rather than 1 long line without
bumping into the text. I'd like the cell sizes to be variable if at all
possible.
Is this possible in all browsers? I got it to work in Firefox as follows,
but in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
box-sizing:content-box, it works - but that doesn't work in Firefox. And
neither box-sizing works in IE.
table border=1
tr
td
divLorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum. a href=#link/a
/div
/td
td
divSmall amount of text a href=#link/a
/div
/td
/tr
/table
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0;
display:block;
}
Hi Sara,
I THINK this is what your wanting.
style type=text/css
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
display:block;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
border: 0px solid #fff;
}
ul {
border-collapse:collapse;
list-style:none;
}
li {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0px;
display:block;
}
/style
/head
body
table border=1
tr
td
div style=width:80%;Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. a
href=#link/a
/div
div style=width:20%;height:auto;right:0px;bottom:0px;padding:10px
10px 60px;position:relative;float:right;Small amount of text a
href=#link/a/div
/td
/tr
/table
or maybe just this...
style type=text/css
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
display:block;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
ul {
border-collapse:collapse;
list-style:none;
}
li {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
bottom:0px;
}
/style
/head
body
table border=1
tr
td
div style=width:80%;Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. a
href=#link/a
/div
div
style=width:20%;height:auto;right:0px;bottom:0px;padding:10px;position:relative;float:right;Small
amount of text a href=#link/a/div
/td
/tr
/table
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@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] Chrome for Mac disowns children
On Nov 17, 2013, at 10:11 PM, David Hucklesby wrote:
Developing a drop-down menu, I'm following an idea I came across that adds a
marker to a menu item that has a following sub-menu[1]. It uses this selector
that works in CSS3 browsers:
.nav li a:first-child:nth-last-child(2) {...}
While this works in modern browsers, the marker disappears in Chrome v.31.0
for
Mac. In this simplified Pen, it disappears on :hover. With slightly more
complex
CSS it does not appear on Chrome at all. (Okay on Chrome for Windows.)
http://codepen.io/hucklesby/full/KghaC
If you have Chrome on a Mac, I'd be grateful if you let me know whether you
see
this phenomenon. Could be something to do with my install (on Mavericks,
FWIW).
Thanks in advance.
[1] http://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
--
Cordially,
David
__
css-discuss [css-d@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/
Works for me. Version 28.0.1500.71 OS 10.7.5
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@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] Chrome for Mac disowns children
This sounds uncannily familiar to Georg's reported bug for Chrome v31 3
days ago on this list whereby stateful re-rendering didn't happen. His
example involved invisible checkboxes expanding content via the :checked
pseudo-class.
My take on this is that the Chrome team did some aggressive
over-optimisation on the rendering engine for v31 whereby state changes do
not perform a proper repaint, for the benefit of not having to recalculate
layout whenever a user mouseovers each individual element.
I've previously managed to deal with these increasingly common Chrome
rendering bugs by hacking in -webkit-transform: translateZ( 0 ); on the
troublesome element (which brings it into a separate rendering thread
that's given more priority) — another trick which has worked for me in the
past is applying a CSS animation on a property which could in theory modify
the layout properties of the element, but in practice don't — such as
animating a bottom margin when there is no following content, or the
container has overflow hidden.
The problem with these methods is that they're obvious hacks but they also
eat at performance and can sometimes cause further bugs of their own —
still I'd appreciate you're trying them out just to see if they do indeed
have any effect.
The general topic of performance-based CSS hacks is generally quite
interesting — I've recently read about reliable, measurable (~2x) layout
repaint speeds on changes for elements that have fixed positioning and
fixed heights, for example. On the one hand the rapid release cycle for
Chrome is fantastic, but at the same time the moving target for bugs is
exasperating. Hopefully the next release fixes this and comes out in the
next week!
On Monday, 18 November 2013, Karl DeSaulniers wrote:
On Nov 17, 2013, at 10:11 PM, David Hucklesby wrote:
Developing a drop-down menu, I'm following an idea I came across that
adds a
marker to a menu item that has a following sub-menu[1]. It uses this
selector
that works in CSS3 browsers:
.nav li a:first-child:nth-last-child(2) {...}
While this works in modern browsers, the marker disappears in Chrome
v.31.0 for
Mac. In this simplified Pen, it disappears on :hover. With slightly more
complex
CSS it does not appear on Chrome at all. (Okay on Chrome for Windows.)
http://codepen.io/hucklesby/full/KghaC
If you have Chrome on a Mac, I'd be grateful if you let me know whether
you see
this phenomenon. Could be something to do with my install (on Mavericks,
FWIW).
Thanks in advance.
[1]
http://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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/
Works for me. Version 28.0.1500.71 OS 10.7.5
Karl DeSaulniers
Design Drumm
http://designdrumm.com
__
css-discuss [css-d@lists.css-discuss.org javascript:;]
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/
--
Regards,
Barney Carroll
barney.carr...@gmail.com
+44 7429 177278
barneycarroll.com
__
css-discuss [css-d@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] Chrome for Mac disowns children
On Nov 17, 2013, at 11:32 PM, Barney Carroll wrote: This sounds uncannily familiar to Georg's reported bug for Chrome v31 3 days ago on this list whereby stateful re-rendering didn't happen. His example involved invisible checkboxes expanding content via the :checked pseudo-class. My take on this is that the Chrome team did some aggressive over-optimisation on the rendering engine for v31 whereby state changes do not perform a proper repaint, for the benefit of not having to recalculate layout whenever a user mouseovers each individual element. I've previously managed to deal with these increasingly common Chrome rendering bugs by hacking in -webkit-transform: translateZ( 0 ); on the troublesome element (which brings it into a separate rendering thread that's given more priority) — another trick which has worked for me in the past is applying a CSS animation on a property which could in theory modify the layout properties of the element, but in practice don't — such as animating a bottom margin when there is no following content, or the container has overflow hidden. The problem with these methods is that they're obvious hacks but they also eat at performance and can sometimes cause further bugs of their own — still I'd appreciate you're trying them out just to see if they do indeed have any effect. The general topic of performance-based CSS hacks is generally quite interesting — I've recently read about reliable, measurable (~2x) layout repaint speeds on changes for elements that have fixed positioning and fixed heights, for example. On the one hand the rapid release cycle for Chrome is fantastic, but at the same time the moving target for bugs is exasperating. Hopefully the next release fixes this and comes out in the next week! Just currious, but wouldn't putting just... zoom: 1; on the element do the same thing as far as the repaint? Tha isn't a hack last time I checked. Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@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/
