[css-d] bookmarks in invisible table rows not working
Hello In FireFox, Is there a way to get bookmarks placed in invisible table rows to work? The CSS: #invsbl{ display:none; line-height:0px; height: 0px; overflow: hidden; border:0; margin:0; } And the table row is: td id='invsbl' colspan='2'a name='$n'nbsp;/a/td The above works fine in IE. In FireFox, when links are clicked, nothing happens? Any suggestion please? __ 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] Best Practices For Sprites?
On 9/26/11 12:49 PM, Elli Vizcaino wrote: I usually have a standard sprite which contains icons that never repeat. A horizontal sprite which contains all of my button/ribbon treatments as we use sliding door method a great deal. And on occasion I also have a vertical sprite which contained elements that repeat vertically such as shadow edges where the required browser support didn't let me get away with using CSS3 drop shadows. [...] Thanks Elizabeth! Guess there are quite a few factors to consider. Seems like I'll have to determine the best approach to use after some experimentation. Yes. One consideration is the technique you use to add sprite images. My favorite technique for most - not all - is to add them using :before or :after content, and to position the pseudo-element absolutely. [...] David would mind sharing some links to the various techniques you have/there are for implementing sprites? Or point to some resources? As a developer who believes in a progressive web I no longer support IE6 nor do I target anything lower than 3.6 in FF so those are two less browsers to worry about. Elli Vizcaino This article was the source of my information: http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/ (If that link breaks, try http://goo.gl/aSyxW ) -- 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/
[css-d] Media Queries
List, I'm going around and around with this and can't see the source of my woes. Can anyone see the cause of layout issues in IE8 and IE7? IE8 is close, but it seems like selectivzr isn't working. IE7 seems to not be using/loading the respond.js and i'm not sure why. Works as desired in IE9, Safari 5.0.5 Mac. My IE installs are in separate VMs using VMWare... Could very well be my media queries as I am still wrapping my head around them... http://proof.mlinc.com/tl/cssd/ Thanks -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Best Practices For Sprites?
Yes. One consideration is the technique you use to add sprite images. My favorite technique for most - not all - is to add them using :before or :after content, and to position the pseudo-element absolutely. [...] David would mind sharing some links to the various techniques you have/there are for implementing sprites? Or point to some resources? As a developer who believes in a progressive web I no longer support IE6 nor do I target anything lower than 3.6 in FF so those are two less browsers to worry about. Elli Vizcaino This article was the source of my information: http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/ (If that link breaks, try http://goo.gl/aSyxW ) -- Cordially, David Thanks David! I love smashing magazine great resource :) Elli Vizcaino Web Designer Developer http://www.E7Flux.com The Best Compliment We Can Receive Is A Referral! __ 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] Media Queries
On 9/27/11 3:26 PM, Tom Livingston wrote: List, I'm going around and around with this and can't see the source of my woes. Can anyone see the cause of layout issues in IE8 and IE7? IE8 is close, but it seems like selectivzr isn't working. IE7 seems to not be using/loading the respond.js and i'm not sure why. Works as desired in IE9, Safari 5.0.5 Mac. My IE installs are in separate VMs using VMWare... Could very well be my media queries as I am still wrapping my head around them... http://proof.mlinc.com/tl/cssd/ Thanks It looks and feels pretty much the same to me in IE 7/8/9, Mac Safari, Mac Opera, and Mac FF. And would be the same with a has layout issue correction for the height of the callout boxes in IE/6. But I may be missing something-- exactly what is the issue? Is it a layout issue or a behavior issue? Best, ~d aside Validate markup and CSS2.1. Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.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] Media Queries [+1}
On 9/27/11 3:57 PM, David Laakso wrote: On 9/27/11 3:26 PM, Tom Livingston wrote: List, I'm going around and around with this and can't see the source of my woes. Can anyone see the cause of layout issues in IE8 and IE7? http://proof.mlinc.com/tl/cssd/ Thanks Hmm. Try changing the media query to read: @media screen and (max-device-width:480px),screen and (max-width:480px){#foo{...}}/*mind last brace*/ ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.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] Fwd: Media Queries
On Tue, Sep 27, 2011 at 3:57 PM, David Laakso da...@chelseacreekstudio.com wrote: On 9/27/11 3:26 PM, Tom Livingston wrote: List, I'm going around and around with this and can't see the source of my woes. Can anyone see the cause of layout issues in IE8 and IE7? IE8 is close, but it seems like selectivzr isn't working. IE7 seems to not be using/loading the respond.js and i'm not sure why. Works as desired in IE9, Safari 5.0.5 Mac. My IE installs are in separate VMs using VMWare... Could very well be my media queries as I am still wrapping my head around them... http://proof.mlinc.com/tl/cssd/ Thanks It looks and feels pretty much the same to me in IE 7/8/9, Mac Safari, Mac Opera, and Mac FF. And would be the same with a has layout issue correction for the height of the callout boxes in IE/6. But I may be missing something-- exactly what is the issue? Is it a layout issue or a behavior issue? Best, ~d aside I changed my tactics on the media queries, so I am going about it a different way. Some may say for the better. The html errors i can live with. I do not know how to do cellspacing with CSS and I think classing table columns to control width is kinda silly. CSS errors are vendor prefixes etc., and they will stay. If you play with the browser window width in a good browser, you will see what I am after. IE7 and 8 aren't playing nice and I dont see why the scripts intended to help aren't working. THanks for the help. -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] Query on P:First-letter
Could anyone explain why the leading M of the following paragraph : p style=margin-top: 2.3em!-- #BeginLibraryItem /Library/Ugandan infant in a laundry basket.lbi --img id=Infant-Uganda-001 src=Resources/Images/Photographs/Web/Scaled/240/Infant-Uganda.001.jpg longdesc=../Resources/Images/Photographs/Web/Longdesc/Infant-Uganda-001.html alt=Ugandan infant in a laundry basket width=320 height=240!-- #EndLibraryItem --Mspan class=Keyphraseany of us/span are lucky enough to take anaesthesia for granted. Surely a world without safe anaesthesia has long been confined to the history booksnbsp;?nbsp; Not in the developing world, where hospitals lack suitable equipment, medicines and trained staff./p is not matched by this CSS rule : DIV.Content P:first-letter {color: red; letter-spacing: 0.075em} whereas the leading M of the following paragraph is ? p style=margin-top: 2.3emMspan class=Keyphraseany of us/span are lucky enough to take anaesthesia for granted. Surely a world without safe anaesthesia has long been confined to the history booksnbsp;?nbsp; Not in the developing world, where hospitals lack suitable equipment, medicines and trained staff./p The obvious difference is that an IMG element intervenes, but should that really cause the M not to be classed as the first /letter/ of the paragraph ? Live URLs for those wishing to investigate further : With intervening image : http://safe4all.org.uk/Index-images.html (Valid HTML 4.01 Strict, valid CSS Level 3, one error at CSS Level 2.1) Without intervening image : http://safe4all.org.uk/Index.html (Valid HTML 4.01 Strict, valid CSS Level 3, one error at CSS Level 2.1) Philip Taylor __ 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] Query on P:First-letter
On Sep 28, 2011, at 8:29 AM, Philip TAYLOR (Webmaster, Ret'd) wrote: Could anyone explain why the leading M of the following paragraph : p style=margin-top: 2.3em!-- #BeginLibraryItem /Library/Ugandan infant in a laundry basket.lbi --img id=Infant-Uganda-001 src=Resources/Images/Photographs/Web/Scaled/240/Infant-Uganda.001.jpg longdesc=../Resources/Images/Photographs/Web/Longdesc/Infant-Uganda-001.html alt=Ugandan infant in a laundry basket width=320 height=240!-- #EndLibraryItem --Mspan class=Keyphraseany of us/span are lucky enough to take anaesthesia for granted. Surely a world without safe anaesthesia has long been confined to the history booksnbsp;?nbsp; Not in the developing world, where hospitals lack suitable equipment, medicines and trained staff./p is not matched by this CSS rule : DIV.Content P:first-letter {color: red; letter-spacing: 0.075em} whereas the leading M of the following paragraph is ? p style=margin-top: 2.3emMspan class=Keyphraseany of us/span are lucky enough to take anaesthesia for granted. Surely a world without safe anaesthesia has long been confined to the history booksnbsp;?nbsp; Not in the developing world, where hospitals lack suitable equipment, medicines and trained staff./p The obvious difference is that an IMG element intervenes, but should that really cause the M not to be classed as the first /letter/ of the paragraph ? Have you tested this in anything beside a Gecko browser ? See https://bugzilla.mozilla.org/show_bug.cgi?id=159403 WFM in WebKit and Opera. 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] Query on P:First-letter
On Wednesday, September 28, 2011, Philip TAYLOR (Webmaster, Ret'd) p.tay...@rhul.ac.uk wrote: Could anyone explain why the leading M of the following paragraph : p style=margin-top: 2.3em!-- #BeginLibraryItem /Library/Ugandan infant in a laundry basket.lbi --img id=Infant-Uganda-001 src=Resources/Images/Photographs/Web/Scaled/240/Infant-Uganda.001.jpg longdesc=../Resources/Images/Photographs/Web/Longdesc/Infant-Uganda-001.html alt=Ugandan infant in a laundry basket width=320 height=240!-- #EndLibraryItem --Mspan class=Keyphraseany of us/span are lucky enough to take anaesthesia for granted. Surely a world without safe anaesthesia has long been confined to the history booksnbsp;?nbsp; Not in the developing world, where hospitals lack suitable equipment, medicines and trained staff./p is not matched by this CSS rule : DIV.Content P:first-letter {color: red; letter-spacing: 0.075em} ... http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. The first-letter CSS3 spec is a quite interesting read. I did not know this: The first letter must occur on the first formatted line. For example, in this HTML fragment: pbrFirst... the first line doesn't contain any letters and ::first-letter doesn't match anything (assuming the default style for br in HTML 4). In particular, it does not match the F of First. Ingo __ 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] Query on P:First-letter
On 9/27/11 7:29 PM, Philip TAYLOR (Webmaster, Ret'd) wrote: Could anyone explain why the leading M of the following paragraph : Philip Taylor Dunno. But, this will do...:-) /*SPAN.Keyphrase {text-transform: uppercase; font-size: 1.4ex; font-weight: bold; letter-spacing: 0.075em; color: red} delete */ /*DIV.Content P:first-letter {color: red; letter-spacing: 0.075em} delete */ Best, Someyoungguy Hanoi -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.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] Fwd: Media Queries
On Sep 28, 2011, at 5:55 AM, Tom Livingston wrote: The html errors i can live with. I do not know how to do cellspacing with CSS border-collapse border-spacing http://www.w3.org/TR/CSS21/tables.html#borders and I think classing table columns to control width is kinda silly. hmm. The col element ? http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-col-element width=59.2537329% feels kinda silly as well. De gustibus et coloribus… 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] Query on P:First-letter
On Sep 28, 2011, at 9:10 AM, Ingo Chao wrote: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. Yes, but... what with a floated image ? http://dev.l-c-n.com/_temp/first-letter-img.html IE 9, WebKit and Opera style the first-letter in the 3rd and 4th paragraph. Gecko does not 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/
[css-d] Query on P:First-letter
On Wednesday, September 28, 2011, Philippe Wittenbergh e...@l-c-n.com wrote: On Sep 28, 2011, at 9:10 AM, Ingo Chao wrote: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. Yes, but... what with a floated image ? http://dev.l-c-n.com/_temp/first-letter-img.html IE 9, WebKit and Opera style the first-letter in the 3rd and 4th paragraph. Gecko does not Philippe Ah. Did not had a look into that page, sorry. A floated image does not sit on the linebox where the first letter lives in. The presence of the float just shortens the linebox. However, the phrase on its line is a bit difficult, since the float spec uses a similar phrase on the same line for a different thing: http://www.w3.org/TR/CSS2/visuren.html#floats The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. Ingo Ingo __ 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] Fwd: Media Queries
Thanks Philippe. Besides simple html emails, I haven't used a table in a long time. I'll dig into border-collapse and spacing. For the col element, it seems that besides passing the validator, it's kinda the same as setting widths on ths or tds, no? Adding a row of cols - extra markup - just to set widths. What am I missing? As for the long percentage amount, I was merely following steps from Ethan Marcotte's book for creating a flexible layout. Who am I to argue with him? It was copy/paste from a calculator. Seems a bit nerdy maybe, but it causes no harm. On Tue, Sep 27, 2011 at 8:15 PM, Philippe Wittenbergh e...@l-c-n.com wrote: On Sep 28, 2011, at 5:55 AM, Tom Livingston wrote: The html errors i can live with. I do not know how to do cellspacing with CSS border-collapse border-spacing http://www.w3.org/TR/CSS21/tables.html#borders and I think classing table columns to control width is kinda silly. hmm. The col element ? http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-col-element width=59.2537329% feels kinda silly as well. De gustibus et coloribus… Philippe -- Philippe Wittenbergh http://l-c-n.com/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/