Re: [css-d] Table with fixed headers
Le 2 juil. 2014 à 04:19, Larry Martell larry.mart...@gmail.com a écrit : But I want the table to be scrollable with a fixed header, so I do this: http://jsfiddle.net/mrLVG/ From testing I found that I have to have display: block; on both tbody.scrollContent and thead.fixedHeader tr or I do not get the scrollbars and fixed headers. But it is also the display: block that seems to be causing the misalignment. Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? By setting display:block on the tbody, you essentially remove the “tableness”. As a result the browsers actually recreate a table inside your tbody, wrapping around all your tr/td [*]. Same applies to your thead tr. Messy situation… You might fix it partly by locking the width on each th/td - which is no very attractive (cough… understatement). Have you seen this stack overflow? http://stackoverflow.com/questions/21003235/creating-a-sticky-header-on-a-thead No clean solutions, though. In the future, creating such a table-with-fixed-header will be much easier thanks to position: sticky http://dev.w3.org/csswg/css-position-3/#sticky-positioning That is already implemented in Safari 6.1/7, is coming to Firefox 32, and is implemented behind a flag in Bink based browsers (Opera, Chrome) – ask $search_engine for the details about that flag. Unfortunately sticky positioning on a table-header is not yet implemented; it works in Webkit nightly builds but not in release builds, yet. Firefox has an open bug for it. Quick Example™: http://dev.l-c-n.com/_temp/scrollable-table.html The ‘some fixed heading’ is already sticky in Safari 7, the table works in WebKit nightly builds and maybe Opera/chrome with the aforementioned flag turned on. [*] see the CSS 2.1 spec for the reasons: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes 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] Table with fixed headers
On Thu, Jul 3, 2014 at 6:27 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 2 juil. 2014 à 04:19, Larry Martell larry.mart...@gmail.com a écrit : But I want the table to be scrollable with a fixed header, so I do this: http://jsfiddle.net/mrLVG/ From testing I found that I have to have display: block; on both tbody.scrollContent and thead.fixedHeader tr or I do not get the scrollbars and fixed headers. But it is also the display: block that seems to be causing the misalignment. Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? By setting display:block on the tbody, you essentially remove the “tableness”. As a result the browsers actually recreate a table inside your tbody, wrapping around all your tr/td [*]. Same applies to your thead tr. Messy situation… You might fix it partly by locking the width on each th/td - which is no very attractive (cough… understatement). Have you seen this stack overflow? http://stackoverflow.com/questions/21003235/creating-a-sticky-header-on-a-thead No clean solutions, though. In the future, creating such a table-with-fixed-header will be much easier thanks to position: sticky http://dev.w3.org/csswg/css-position-3/#sticky-positioning That is already implemented in Safari 6.1/7, is coming to Firefox 32, and is implemented behind a flag in Bink based browsers (Opera, Chrome) – ask $search_engine for the details about that flag. Unfortunately sticky positioning on a table-header is not yet implemented; it works in Webkit nightly builds but not in release builds, yet. Firefox has an open bug for it. Quick Example™: http://dev.l-c-n.com/_temp/scrollable-table.html The ‘some fixed heading’ is already sticky in Safari 7, the table works in WebKit nightly builds and maybe Opera/chrome with the aforementioned flag turned on. [*] see the CSS 2.1 spec for the reasons: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes Thanks for the detailed reply. I had seen a lot of SO posts about this, but not the one you gave. I'll check it out. The problem with specifying an explicit width for each column is that I have 10 tables, each with 30-40 columns, and I don't always know the width of the data. Also, we sort a table sorting package and that puts an up/down arrow in the header when you click on it, and that changes the width of the column. All this new stuff sounds promising, but the client doesn't use Chrome, and only allows FF version 12 and IE version 9. Hard to believe, but true. They were running PHP version 5.1 and it took me 3 months to get them to upgrade to 5.4. __ 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] Is There A Way to Shrink Wrap Inline Elements?
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley a...@css-class.com wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Regards,
Elli Vizcaino
http://www.e7flux.com
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing /span tag.
Alan
Alan Gresley
http://css-3d.org/
http://css-class.com/
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
http://www.e7flux.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] Is There A Way to Shrink Wrap Inline Elements?
On 4/07/2014 1:58 AM, Elli Vizcaino wrote:
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley a...@css-class.com wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
.re {
display: block;
/* margin: -02.89855072463768% 0 0; -16px/552px 0 0 REMOVE or ALTER */
text-align: right;
font-size: 32.25em; /* 516px/16px */
letter-spacing: -17px;
}
.vamp, .ing {
clear: both;
display: block;
text-align: right;
}
.vamp {
font-size: 12.75em; /* 204px/16px */
/* margin-top: -04.52898550724638%; -25px/552px REMOVE or ALTER */
/* margin-bottom: 06.70289855072464%; 37px/552px REMOVE or ALTER */
}
.ing {
font-size: 9em; /* 144px/16px */
margin-bottom: 11.05072463768116%; /* 61px/552px */
}
You have a missing /span tag.
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
http://www.e7flux.com
Hello Elli,
I believe I know what is happening but I don't know what style is
causing it. Please see this screenshot.
http://css-class.com/test/temp/italic.jpg
It's this font-family.
h1, h1 a.logo {
font-family: Calluna Sans,Arial,Helvetica,sans-serif;
}
To get that 'Arial italic' fallback when I remove the reset CSS.
http://www.e7flux.com/e7flux2014/css/reset.css
I don't understand why the fallback is Arial italic instead of Arial but
I suspect the italic aspect is the thing that causing the space.
--
Alan Gresley
http://css-3d.org/
http://css-class.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] Is There A Way to Shrink Wrap Inline Elements?
On Thu, Jul 3, 2014 at 12:08 PM, Peter H. li...@artworkers.net wrote: El 03/07/2014, a las 17:58, Elli Vizcaino escribió: I want to be able to control this and get the alignment even. http://www.e7flux.com/e7flux2014/.html Elli Vizcaino that gap between the letters and the right-hand edge is just the inherent kerning of the font. Why don't you experiment with a slight negative margin-right on the SPON element? It should work OK, even with different screen widths. Peter H. I will give the suggestion a try. I too, was suspicious that the inherent kerning is what's causing it. It's just frustrating though when you see that the behavior can be controlled with a floated div. Though in this case it would be invalid markup to place it inside of a header tag. Elli Vizcaino http://www.e7flux.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] Is There A Way to Shrink Wrap Inline Elements?
On 7/3/14, 9:36, Alan Gresley wrote:
On 4/07/2014 1:58 AM, Elli Vizcaino wrote:
On Thu, Jul 3, 2014 at 1:20 AM, Alan Gresley a...@css-class.com wrote:
On 3/07/2014 1:19 PM, Elli Vizcaino wrote:
Hello CSS Discuss,
I'm presently working on building out a responsive redesign of my site
and in order to keep the HTML semantic, I can't use divs inside of my
H1. I have an H1 tag with nested spans and ems that are floated.
However, the spans and ems don't behave like divs do when
floated--shrink wrapping to the contained content. I would love to be
able to replicate this same shrink wrap effect on the ems so I have
better control of their placement and alignment with the other text
elements on the page. The ems and spans seem to have inherent padding
I can not control. Hoping someone has some suggestions on a way to do
what I'd like or can suggest appropriate markup that will behave like
I want it to.
Please take a look at the
RE
SPON
SIVE
text on the following page: http://www.e7flux.com/e7flux2014/.html
Hello Elli. The padding is really line-height.
Insert the following into your CSS or something like it (the border is to
help you see).
em {border: 1px solid red; line-height: 0.8; }
em+em {border: 1px solid red; line-height: 0.9; }
em+em+em { line-height: 1; }
And remove or alter the margins below where I have inserted REMOVE or ALTER.
I commented them out before using the above CSS.
[code removed]
You have a missing /span tag.
Thanks for catching the missing span tag--corrected. I tried your
suggestion Alan but it's only giving me control over the vertical
spacing between the elements. What I'm looking to do is get the text
flushed against the bounding box's left and right sides as in the
sample floated test div I've now added to the page.
I also added a red right border to the ems to show how those elements
are not flushed right even though floated and because I'm using
different size text in my design they cause an uneven vertical
alignment on the right hand side. I want to be able to control this
and get the alignment even.
http://www.e7flux.com/e7flux2014/.html
Elli Vizcaino
Hello Elli,
I believe I know what is happening but I don't know what style is causing it.
Please see this screenshot.
http://css-class.com/test/temp/italic.jpg
It's this font-family.
h1, h1 a.logo {
font-family: Calluna Sans,Arial,Helvetica,sans-serif;
}
To get that 'Arial italic' fallback when I remove the reset CSS.
http://www.e7flux.com/e7flux2014/css/reset.css
I don't understand why the fallback is Arial italic instead of Arial but I
suspect the italic aspect is the thing that causing the space.
I think you may be looking at the normal letter spacing that occurs between
letters. If you increase the font-size of your test text, you will notice small
gaps there as well.
As this spacing varies by letter and font, I’m sorry I have no good solution.
Playing with the CSS letter-spacing value did not give a useful result. YMMV.
--
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] Is There A Way to Shrink Wrap Inline Elements?
Le 4 juil. 2014 à 06:09, David Hucklesby huckle...@gmail.com a écrit : I think you may be looking at the normal letter spacing that occurs between letters. If you increase the font-size of your test text, you will notice small gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. As this spacing varies by letter and font, I’m sorry I have no good solution. Playing with the CSS letter-spacing value did not give a useful result. YMMV. letter-spacing: -.05em works here for the bottom span, at the price of pulling each of the 3 letters closer to each other. But that “fix” might be browser and platform dependent, and is dependent on the font font-size as well. A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. Le 4 juil. 2014 à 01:40, Elli Vizcaino e7f...@gmail.com a écrit : [snip] It's just frustrating though when you see that the behavior can be controlled with a floated div. Though in this case it would be invalid markup to place it inside of a header tag. Nope, nothing to do with div vs span vs em vs whatever. You’d have the exact same problem with a div. As noted above, it is the metrics of the given font. 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] Is There A Way to Shrink Wrap Inline Elements?
Just curious if text-rendering:optimizeLegibility might help. I've found it can really be helpful with type. Rick Gordon On 7/3/14 5:07 PM, Philippe Wittenbergh wrote: Le 4 juil. 2014 à 06:09, David Hucklesbyhuckle...@gmail.com a écrit : I think you may be looking at the normal letter spacing that occurs between letters. If you increase the font-size of your test text, you will notice small gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.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] Table with fixed headers
On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) __ 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/ Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. 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] Is There A Way to Shrink Wrap Inline Elements?
On 4/07/2014 10:07 AM, Philippe Wittenbergh wrote: Le 4 juil. 2014 à 06:09, David Hucklesby huckle...@gmail.com a écrit : I think you may be looking at the normal letter spacing that occurs between letters. If you increase the font-size of your test text, you will notice small gaps there as well. Close; it is the full font-metrics, in this case the intrinsic kerning for the given font. As this spacing varies by letter and font, I’m sorry I have no good solution. Playing with the CSS letter-spacing value did not give a useful result. YMMV. letter-spacing: -.05em works here for the bottom span, at the price of pulling each of the 3 letters closer to each other. But that “fix” might be browser and platform dependent, and is dependent on the font font-size as well. A more stable fix is using a small negative margin-right (something like -.1em). But again, this is dependent on platform, browser and font-metrics. I agree with Philippe, it's the font metrics. A possible solution is to simplify. Why use three ems (this causes it to be italic) and other elements to achieve something which can be simply done with a SVG. Below is a demo with an inline svg which looks fine in Firefox and Chrome. Fails in IE12. http://css-class.com/test/temp/elli-code.htm I would recommend to redo the SVG as an image since the can be scaled as a percentage width of the h1 header and would look much more graceful as you re-sized the view-port. The only problem is it also fails in IE12. http://css-class.com/test/temp/elli.htm http://css-class.com/test/temp/elli.svg FYI, the E7FLUX could also be done as a SVG. -- Alan Gresley http://css-3d.org/ http://css-class.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] Table with fixed headers
That is well done, and best of all, without a table. On 2014-07-03, at 8:49 PM, Karl DeSaulniers wrote: On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) __ 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/ Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. 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/ __ 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/
