[css-d] Font-size affecting line-height?
I've come across some really strange behavior when trying to mix multiple
font-sizes within a single block element. I've built an example page here:
http://kage23.com/line-height.html
Basically, it seems like I'm getting an extra pixel of height and I can't
track down how or why. In my example, the paragraph inside of the first
block is 24px tall, as one would expect from a line of text with
line-height of 24px and no margins or padding. However, the paragraph
inside of the second block is 25px tall, even though it has a line-height
of 24px. The span has a font-size of 20px, so it should still fit within
the line-height. (In fact, as I was playing with it, I was still seeing the
same issue, in some cases even more pronounced, when I made the span a
smaller font-size than the rest of the paragraph.)
This only seems to happen when I mess with varying font-sizes within the
same BLOCK-LEVEL element. If, for example, I assign { display: block; } to
.block p span, then the span becomes 24px tall, and the p becomes 48px
tall, as I would expect. So when my span is inline, why does changing the
font-size on the span affect the line-height of the p???
I've been banging my head against this for a while now. I would greatly
appreciate any thoughts or suggestions!
~Kyle
--
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com
510-665-1200 + 128
www.bepress.com
bepress: the frontier of scholarly publishing since 1999
Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.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-d] Setting height relative to width
I've been doing some googling and not having great luck in solving this problem. I've got some old pixel-based layouts that I'm trying to retrofit to responsive layouts. I know all about the magic target / context = result% formula for figuring percentage-based widths, but what I can't figure out how to do is how to set the height of an element relative to the element's width, so it maintains the same proportions as it is resized. Can anyone point me in the right direction? Thanks, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Setting height relative to width
On Mon, Feb 11, 2013 at 11:50 AM, Barney Carroll barney.carr...@gmail.comwrote: Thierry wrote up an excellent technique for this that is incidentally very useful when scaling embedded media. The linked article frames it in that context, but the principles are the same: a padding property percentage will take relative width as its reference: alistapart.com/article/creating-intrinsic-ratios-for-video Thanks, Barney and Thierry! I might have to get a bit tricky and fancy to apply this to all the wide range of client sites I'm working on, but at least now I know what I'm trying to do! -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Setting height relative to width
On Mon, Feb 11, 2013 at 11:50 AM, Barney Carroll barney.carr...@gmail.comwrote: Thierry wrote up an excellent technique for this that is incidentally very useful when scaling embedded media. The linked article frames it in that context, but the principles are the same: a padding property percentage will take relative width as its reference: alistapart.com/article/creating-intrinsic-ratios-for-video I must be doing something wrong. I thought I was implementing this as Thierry suggested, but my padding-bottom percentage seems to end up being a percentage of the parent element, rather than the element itself. I set up a really simple example here: http://kage23.com/blah.html Could someone possibly take a look and tell me what I'm doing wrong? If it turns out that I should just be using the parent element to set the relative height (i.e. in this case, I should be setting padding-top to 5.306122448979591836734693877551% (52/980)), I can probably do that, and in fact, it might actually be easier in the long run. But I was hoping to set the height as a percentage of the element itself, rather than it's parent element. Thanks! Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] Display: table and CSS3
Hi everyone, I have a div in my project that I had styled with rounded corners (border-radius: 4px; border: 1px solid #aaa;). Then, later on, for layout/display purposes, I gave that div display: table-row-group;. (I've actually tried several table-related display options, with the same result.) But as soon as I give it that, I lose my rounded corners and my border. I suspect that border and border-radius probably only apply to block elements, and any table-related display option means it's no longer block display? Any ideas what I can do about this? Incidentally, giving it a table-related display also broke the width. I'm working on a mobile project, and when this div has a table-related display option, the content inside the div forces it to be too wide for my mobile browser, where, as a block-level element, it fits. Thanks in advance, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Display: table and CSS3
Thanks, Philippe!
On Tue, Nov 27, 2012 at 4:15 PM, Philippe Wittenbergh e...@l-c-n.comwrote:
Le 28 nov. 2012 à 08:17, Kyle Sessions ksessi...@bepress.com a écrit :
I have a div in my project that I had styled with rounded corners
(border-radius: 4px; border: 1px solid #aaa;). Then, later on, for
layout/display purposes, I gave that div display: table-row-group;. (I've
actually tried several table-related display options, with the same
result.) But as soon as I give it that, I lose my rounded corners and my
border. I suspect that border and border-radius probably only apply to
block elements, and any table-related display option means it's no longer
block display? Any ideas what I can do about this?
Setting the element to display: table would allow the border and
border-radius to apply. display: table-row-group is equivalent to tbody
and only allows limited styling due to how the table-painting model works.
Note also that the browser will generate a (anonymous) display:table parent
element and (anonymous) display:table-row and display:table-cell elements.
[*]
My markup essentially follows this structure:
div id=container
div id=sidebar ... /div
div id=content ... /div
/div
On the desktop version, it's all fine. #sidebar is floated right, #content
is floated left, everything looks good. On the mobile version, I've
disabled floating entirely, but I'd like to display #content above
#sidebar, which is why I went down the route of table display. I figured I
could give display: table-footer-group; to #sidebar, and give display:
table-row; to #content. Or alternatively, #content can be
table-header-group and #sidebar can be table-row. But #content is what I
want to style with border and border-radius. In my schemes, #container
would get the implicit display:table, but I don't want to style #container
at all. You suggested giving display:table to #content, but as far as I
understand, that would do nothing to display it above, instead of below,
#sidebar. Am I missing something? Is it just not possible to do what I'm
trying to do?
Incidentally, giving it a table-related display also broke the width. I'm
working on a mobile project, and when this div has a table-related
display
option, the content inside the div forces it to be too wide for my mobile
browser, where, as a block-level element, it fits.
That it to be expected, depending on the contents of that element, the
same as if it was a real table. You might try
div {
display: table;
width: 100%;
table-layout: fixed;
}
[*] http://www.w3.org/TR/CSS21/tables.html
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/
--
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com
510-665-1200 + 128
www.bepress.com
bepress: the frontier of scholarly publishing since 1999
Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.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] Multi-column layouts without CSS3
On Wed, Oct 3, 2012 at 9:29 AM, Hahnel, Fred (DET-MRM) fred.hah...@mrmworldwide.com wrote: Take a look at this: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/ Thanks Fred, that just might be my solution. I'll definitely look into it! ~K~ -Fred Hahnel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto: css-d-boun...@lists.css-discuss.org] On Behalf Of Kyle Sessions Sent: Tuesday, October 02, 2012 5:48 PM To: css-d@lists.css-discuss.org Subject: [css-d] Multi-column layouts without CSS3 Hi all, This _might_ be off-topic; I think it's kind of a grey area. So if the moderators want to shut this discussion down, I understand. I'm working on a project involving a series of dls. They're each pretty narrow, so I wanted to display them in columns, so I used column-count and column-gap from CSS3. Of course, IE doesn't respect these rules (not even IE9), and I have to support IE on this project, so I'm looking for alternatives. So far, I've come across the following: http://www.csscripting.com/css-multi-column/ This won't work for me because it only processes linked stylesheets, and the stylesheet that contains my column rules is not linked in the HTML; it's imported from another stylesheet. http://randysimons.nl/125,english/129,multi-column-text/ This actually _almost_ gets me there, except that the two columns it generates are not even. The first has five of my seven dls and the second has the final two dls, where I'd prefer to see four and three. So ... does anyone have any other thoughts or suggestions? Please keep in mind that, once this project is live in production, I won't be able to predict how many dls might be generated and displayed at any given point; it needs to be flexible. If I can't find anything else, I'm probably going to end up restoring my CSS3, and serving the Javascript from randysimons.nl to IE only. Best, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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/ This message contains information which may be confidential and privileged. Unless you are the intended recipient (or authorized to receive this message for the intended recipient), you may not use, copy, disseminate or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and delete the message. Thank you very much. __ 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/ -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] Multi-column layouts without CSS3
Hi all, This _might_ be off-topic; I think it's kind of a grey area. So if the moderators want to shut this discussion down, I understand. I'm working on a project involving a series of dls. They're each pretty narrow, so I wanted to display them in columns, so I used column-count and column-gap from CSS3. Of course, IE doesn't respect these rules (not even IE9), and I have to support IE on this project, so I'm looking for alternatives. So far, I've come across the following: http://www.csscripting.com/css-multi-column/ This won't work for me because it only processes linked stylesheets, and the stylesheet that contains my column rules is not linked in the HTML; it's imported from another stylesheet. http://randysimons.nl/125,english/129,multi-column-text/ This actually _almost_ gets me there, except that the two columns it generates are not even. The first has five of my seven dls and the second has the final two dls, where I'd prefer to see four and three. So ... does anyone have any other thoughts or suggestions? Please keep in mind that, once this project is live in production, I won't be able to predict how many dls might be generated and displayed at any given point; it needs to be flexible. If I can't find anything else, I'm probably going to end up restoring my CSS3, and serving the Javascript from randysimons.nl to IE only. Best, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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 not re-drawing when markup changes?
On Fri, Aug 17, 2012 at 9:30 PM, David Hucklesby huckle...@gmail.comwrote:
On 8/17/12 6:25 PM, Kyle Sessions wrote:
Hi all,
I was wondering if one of you might have some insight into this problem
I'm
experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
a list of items on my website. We display a few items in a list, and then
have a More link to display the rest of the items. The showing/hiding of
the rest of the items is controlled via bootstrap-transition.js and
bootstrap-collapse.js. This is all working well enough. The problem is
that, in my markup, I actually have a More link _and_ a Fewer link. I
want to hide the Fewer link when the additional list is closed, and hide
the More link when the additional list is open. I'm using the following
CSS to control the showing and hiding of the links (I have a live example
that I'll link to at the end of this, but here's some code if you don't
want to follow the link):
.collapse+.switch.more {display:inline;}
.collapse+.switch.fewer {display:none;}
.in.collapse+.switch.more {display:none;}
.in.collapse+.switch.fewer {display:inline;}
[...]
The actual problem is that, when the list is closed, and I click on More
to open it, More does not disappear until I mouse over it. ...
Yes. Very odd. Same in Safari 6 (Mac).
Anyway, simplifying the CSS a bit, this seems to work as you wish:
.switch.more {display:inline;}
.switch.fewer {display:none;}
.in+.switch.more {display:none;}
.in+.switch.fewer {display:inline;}
Thanks, David! That does seem to totally fix the issue. How bizarre.
Just purely out of curiosity (and hoping to avoid this in the future), does
anyone have any ideas _why_ this was happening? Is it maybe just a case of
Chrome not wanting to deal with more-complicated CSS unless / until it has
to? I have no idea.
Thanks,
Kyle
__
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 not re-drawing when markup changes?
Hi all,
I was wondering if one of you might have some insight into this problem I'm
experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
a list of items on my website. We display a few items in a list, and then
have a More link to display the rest of the items. The showing/hiding of
the rest of the items is controlled via bootstrap-transition.js and
bootstrap-collapse.js. This is all working well enough. The problem is
that, in my markup, I actually have a More link _and_ a Fewer link. I
want to hide the Fewer link when the additional list is closed, and hide
the More link when the additional list is open. I'm using the following
CSS to control the showing and hiding of the links (I have a live example
that I'll link to at the end of this, but here's some code if you don't
want to follow the link):
.collapse+.switch.more {display:inline;}
.collapse+.switch.fewer {display:none;}
.in.collapse+.switch.more {display:none;}
.in.collapse+.switch.fewer {display:inline;}
.collapse is my ul with the additional items. .switch is my div holding
the two links, More and Fewer. .collapse and .switch are adjacent siblings.
When you click the link to toggle the list, Bootstrap toggles class=in on
the target element. So, .collapse should always select the ul and
.in.collapse should select the ul only when it's open.
The actual problem is that, when the list is closed, and I click on More
to open it, More does not disappear until I mouse over it. This is only a
problem with hiding More. The Fewer link appears as soon as you click
More. And, oddly enough, this is only a problem when opening the list.
When it's already open, and I click Fewer to close it, the More link
immediately appears and the Fewer link immediately disappears. But when
the list is closed and I go to open it, it's like the browser is not
noticing that it needs to hide the More link until I force it to notice
by hovering over the link. (Actually, on closer watching, it looks like the
More link does disappear immediately, then once the list expands, it
reappears until you mouse over it.)
I'm experiencing this problem only in Chrome. Firefox and IE both seem
fine. (Actually, in my real-world project, IE9 was showing the same
behavior as Chrome, but in my test-case here, IE's fine; it's only Chrome
that's misbehaving.)
Anyway, as promised, a live example: http://kage23.com/collapse.html
Any insight would be greatly appreciated!
Thanks in advance,
Kyle
--
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com
510-665-1200 + 128
www.bepress.com
bepress: the frontier of scholarly publishing since 1999
Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.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] Help with CSS3 transitions?
On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.comwrote: On 7/20/12 12:24 PM, Kyle Sessions wrote: Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-**test.htmlhttp://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property [...] Transitions only work from one specific value to another. Auto won't work, as you discovered. Try deleting the height properties, and use max-height instead. Make sure the max-height on the .open state is big enough for any future number of list items in the submenu. I'd use ems for this. Thanks, David! I couldn't use max-height because in the actual production environment that this is intended for, there's no way to predict what the maximum number of additional items is. I did get it working, though. I put the additional items into a containing div, then I measured the height of the additional-items ul, and then used Javascript to adjust the height of the containing div, rather than the actual ul itself. Throw an overflow:hidden onto the containing div, and it's good to go. http://kage23.com/transition-test.html Best, Kyle -- Cordially, David __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Help with CSS3 transitions?
On Mon, Jul 23, 2012 at 1:02 PM, David Hucklesby huckle...@gmail.comwrote: On 7/23/12 11:25 AM, Kyle Sessions wrote: On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.com wrote: On 7/20/12 12:24 PM, Kyle Sessions wrote: Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-test.htmlhttp://kage23.com/transition-**test.html http://kage23.com/**transition-test.htmlhttp://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property [...] Transitions only work from one specific value to another. Auto won't work, as you discovered. Try deleting the height properties, and use max-height instead. Make sure the max-height on the .open state is big enough for any future number of list items in the submenu. I'd use ems for this. Thanks, David! I couldn't use max-height because in the actual production environment that this is intended for, there's no way to predict what the maximum number of additional items is. I did get it working, though. I put the additional items into a containing div, then I measured the height of the additional-items ul, and then used Javascript to adjust the height of the containing div, rather than the actual ul itself. Throw an overflow:hidden onto the containing div, and it's good to go. http://kage23.com/transition-**test.htmlhttp://kage23.com/transition-test.html Cool! But I hope you don't anticipate having more than a dozen sub-items, though. The bottom items might not be visible in that case. YMMV of course. -- Cordially, David Why would the bottom items not be visible? Unless I'm misunderstanding, I _think_ this solution should allow for any number of sub-items, since I'm measuring the height of the sub-items themselves, and toggling the height of the sub-item container between 0 and the actual measured height of the sub-items. In the actual production environment, there will certainly be more than a dozen sub-items in many cases. -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] Help with CSS3 transitions?
Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property (along with all the vendor-prefixed transition properties) to my hidden ul, so when you click the link, it should take a second for the hidden stuff to slide down and become visible. However, for whatever reason, the transition is not being applied, and the hidden stuff is instantly visible upon clicking More. This lack of transition is happening in all the browsers I care about, and I have no idea what I'm doing wrong. Any thoughts? Thanks in advance! Best, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] Vendor-prefixed CSS3
When utilizing CSS3, I know it's generally best to make vendor-prefixed AND non-vendor-prefixed declarations, i.e., you should declare -moz-transform, -webkit-transform, -o-transform, and -ms-transform, along with just transform itself. Is there a suggested best practice for what order these declarations should be made in? My instinct would be to declare the non-vendor-prefixed one last, so if/when the browser supports that version of the declaration, it will overwrite the vendor-prefixed version of the declaration. Does that sound right? Is there something I'm not thinking of? Thanks, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Vendor-prefixed CSS3
On Wed, Jul 11, 2012 at 5:50 PM, Georg gunla...@c2i.net wrote: On 12.07.2012 02:05, Kyle Sessions wrote: My instinct would be to declare the non-vendor-prefixed one last, so if/when the browser supports that version of the declaration, it will overwrite the vendor-prefixed version of the declaration. Does that sound right? Yes. Always the non-prefixed version last, for the reason you state. Is there something I'm not thinking of? Only that a browser vendor may choose to mess up the order/priority for whatever reason. And if that happens they will soon have to fix their own mess anyway, so no need for us to bother about it. regards Georg Thanks, Philippe and Georg; that all makes total sense! I saw some vendor-prefixed declarations after some non-prefixed declarations in a CSS file I'm working on, and, after a long day, I wasn't entirely sure if that was right or not. ;) Best, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] CSS3 multi-column layout: columns of unequal width?
Hi all, I'm looking into using the new CSS3 multi-column module for a layout on a site I'm working on, and I was wondering, is there a way to set unequal widths on columns generated with column-count? I have a ul that I'd like to display in two columns, but the items in the second half of the ul are all longer than the items in the first half, so if I could set the second column to be wider than the first, that would be cool. :) Thanks, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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-d] Converting UPPER CASE TEXT to Title Case Text or Sentence case text
Hi all, I'm trying to figure out if it's possible (via purely CSS) to take some UPPERCASE TEXT and display it as Title Case (i.e. The First Letter Of Every Word Capitalized), or, less ideally but better than all-caps, Sentence case (i.e. The first letter of the sentence/element capped, the rest lowercase). My first thought was to just use text-transform: capitalize, but that won't work because it only touches the first letter of each word. All-uppercase text would be unaffected by text-transform: capitalize because the first letters are already capped, and the other letters don't get touched. So then I thought maybe I could apply text-transform: lowercase to the entire element, and text-transform: uppercase to the ::first-letter pseudo-element. That should give me sentence case, rather than title case, but might be preferable to all uppercase. This worked in my proof-of-concept test, but not in the thing I was actually working on. Rather than getting bogged down too much in technical / implementation details, I'll just point you to the test page I created, which includes working and non-working examples, and some explanation as well. http://kage23.com/text-transform.html If anyone has any ideas why this is not working as I expect it to work, I'd love to hear it! Best, and TIA, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Converting UPPER CASE TEXT to Title Case Text or Sentence case text
On Tue, Jun 26, 2012 at 3:43 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Perhaps the spaces here : p class=grid_10 search-result span class=title Philip Taylor Thanks, Philip. Hmm, interesting thought. I wouldn't think it would make a difference, since my CSS is targeting #results-list .title and #results-list .title::first-letter, rather than .search-result, but I thought I'd give it a try anyway. I have now removed _all_ extraneous spacing from my #results-list div, but I'm still seeing the same behavior, or lack thereof, regarding #results-list .title::first-letter. (Note: I've also removed the search-result class; it wasn't necessary and wasn't in the original code I was working on, anyway.) Further testing seems to reveal that the problem is somehow with my selector. I added a background-color: red declaration to all my rule sets involving ::first-letter, and it's working on my simple examples, but not on my live / production example. http://kage23.com/text-transform.html Any other ideas? Kyle Sessions wrote: I'm trying to figure out if it's possible (via purely CSS) to take some UPPERCASE TEXT and display it as Title Case (i.e. The First Letter Of Every Word Capitalized), or, less ideally but better than all-caps, Sentence case (i.e. The first letter of the sentence/element capped, the rest lowercase). http://kage23.com/text-**transform.htmlhttp://kage23.com/text-transform.html __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Converting UPPER CASE TEXT to Title Case Text or Sentence case text
On Tue, Jun 26, 2012 at 4:29 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: W3C : The :first-letter pseudo-element applies to block container elements. The :first-letter pseudo-element can be used with all such elements that contain text, or that have a descendant in the same flow that contains text. A UA should act as if the fictional start tag of the first-letter pseudo-element is just before the first text of the element, even if that first text is in a descendant. Hmm, so no :first-letter on a span, since a span is not block-level. That sucks, but at least explains why my code isn't working. Thanks! Incidentally, it seems like I've seen it in various places online as :first-letter and in other places as ::first-letter. Does it matter if you use one colon or two? Why? Thanks again! ~K~ __ 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] Wrapper DIV vs. BODY
On Thu, Jun 21, 2012 at 10:47 AM, mem talofo.l...@gmail.com wrote: I'm taking the body element as the viewport area and the wrapper as the content container area That's how I usually interpret it. I might want my content to have an explicit width, but I'd like an unlimited-width repeating background image. So body gets the background image and div#wrapper gets the width and margins. ~K~ -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Wrapper DIV vs. BODY
I'm taking the body element as the viewport area and the wrapper as the content container area That's how I usually interpret it. I might want my content to have an explicit width, but I'd like an unlimited-width repeating background image. So body gets the background image and div#wrapper gets the width and margins. You could use the body tag as your explicit width wrapper, and put the repeating background on your html tag as well! I always forget this. Tim -- tim.arn...@gmail.com Hmm, I hadn't thought about that, but it seems like it could work ... I have generally avoided styling html at all. Not sure there's any reason to avoid it; maybe I'm just superstitious. ;) -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] strange problem with float
There was recent talk on this list of using MultipleIEs for that sort of thing, but I seem to remember some issue with MultipleIEs not playing nicely with IE8. For my cross-browser testing, I use IE Collection, available here: http://finalbuilds.edskes.net/iecollection.htm . For users of Win XP, Vista, or 7, it allows you to simultaneously have installed standalone versions of all versions of IE from 1.5 through 8.0 (and a subset of those versions for other flavors of Windows. There's a compatibility chart on the website). I have had no problems with it so far. Kyle On Fri, Jan 22, 2010 at 3:03 PM, oliver oliver.schoenb...@gmail.com wrote: On Fri, Jan 22, 2010 at 4:22 PM, Climis, Tim tcli...@indiana.edu wrote: Not sure yet what the fix is. Or, if you know of a free CSS exploration tool *for IE* like the (awesome!) javascript console that comes with Chrome, I could try using such a tool to figure it out. Well, there's the IE Developer toolbar. It's only good for IE7 (although IE8 comes with it built in). ... It's not as awesome as Firebug, or the Webkit Console, but it's significantly better than nothing, and it's what let me find your color issue so quickly. Thanks Tim, I'll check it out... though I'd like to not get rid of my IE6. Are there ways to install IE7 and/or IE8 without loosing IE6? I've seen a couple sites that discuss that but replies by users who tried the techniques/installer indicate system crashes etc can result. __ 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/ -- Kyle Sessions The Berkeley Electronic Press 510/665-1200 x128 http://www.bepress.com bepress: 10 years of accelerating and enhancing the flow of scholarly ideas __ 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/
