[css-d] bookmarks in invisible table rows not working

2011-09-27 Thread David Halliday
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?

2011-09-27 Thread David Hucklesby

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

2011-09-27 Thread Tom Livingston
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?

2011-09-27 Thread Elli Vizcaino
 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

2011-09-27 Thread David Laakso

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}

2011-09-27 Thread David Laakso

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

2011-09-27 Thread Tom Livingston
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

2011-09-27 Thread Philip TAYLOR (Webmaster, Ret'd)

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

2011-09-27 Thread Philippe Wittenbergh

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

2011-09-27 Thread Ingo Chao
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

2011-09-27 Thread David Laakso

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

2011-09-27 Thread Philippe Wittenbergh

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

2011-09-27 Thread Philippe Wittenbergh

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

2011-09-27 Thread Ingo Chao
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

2011-09-27 Thread Tom Livingston
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/