Re: [css-d] transform-style set to preserve-3d

2011-06-30 Thread Mark Volkmann 
On Wed, Jun 29, 2011 at 10:12 PM, Alan Gresley  wrote:
> On 30/06/2011 8:24 AM, Mark Volkmann wrote:
>>
>> I'm pretty sure I understand what setting -webkit-transform-style to
>> preserve-3d is supposed to do, but I see no difference between that
>> and the value flat.
>> Can someone point me to an example that demonstrates a 3d effect
>> during a flip (rotate) transform?
>
>
> Possibly here.
>
> http://css-3d.org/
>
> Note that the branding does not have perspective, thus the occasional
> illusion where the cube distorts and spins in the reversed direction (right
> to left) before it switches back again.

I checked there, but didn't see an example of what I'm looking for. I
want to see a demonstration of this from the 3D Transforms Working
Draft ... "The ‘transform-style’ property defines how nested elements
are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all
children of this element are rendered flattened into the 2D plane of
the element. Therefore, rotating the element about the X or Y axes
will cause children positioned at positive or negative Z positions to
appear on the element's plane, rather than in front of or behind it.
If the ‘transform-style’ is ‘preserve-3d’, this flattening is not
performed, so children maintain their position in 3D space."

I created a basic flip demo where a "card" flips on hover. There is an
image on the front and three lines of text on the back. The lines of
text all have different z-index values and a transform to different z
locations using translateZ. Here's the CSS for those lines:

#line1 {
  transform: translateZ(10px);
  z-index: 1;
}

#line2 {
  transform: translateZ(20px);
  z-index: 2;
}

#line3 {
  transform: translateZ(30px);
  z-index: 3;
}

When the flip to the text side occurs, the three lines of text appear
to be on the same plane despite the fact that I set
"-webkit-transform-style: preserve-3d;" for the face that contains the
text.

So I'm looking for an example that demonstrates how the
transform-style value of preserve-3d differs from flat.

-- 
R. Mark Volkmann
Object Computing, Inc.
__
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] transform-style set to preserve-3d

2011-06-30 Thread Alan Gresley 

On 1/07/2011 1:25 AM, Mark Volkmann wrote:

On Wed, Jun 29, 2011 at 10:12 PM, Alan Gresley  wrote:



Possibly here.

http://css-3d.org/

Note that the branding does not have perspective, thus the occasional
illusion where the cube distorts and spins in the reversed direction (right
to left) before it switches back again.


I checked there, but didn't see an example of what I'm looking for. I
want to see a demonstration of this from the 3D Transforms Working
Draft ... "The ‘transform-style’ property defines how nested elements
are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all
children of this element are rendered flattened into the 2D plane of
the element. Therefore, rotating the element about the X or Y axes
will cause children positioned at positive or negative Z positions to
appear on the element's plane, rather than in front of or behind it.
If the ‘transform-style’ is ‘preserve-3d’, this flattening is not
performed, so children maintain their position in 3D space."

I created a basic flip demo where a "card" flips on hover. There is an
image on the front and three lines of text on the back. The lines of
text all have different z-index values and a transform to different z
locations using translateZ. Here's the CSS for those lines:

#line1 {
   transform: translateZ(10px);
   z-index: 1;
}

#line2 {
   transform: translateZ(20px);
   z-index: 2;
}

#line3 {
   transform: translateZ(30px);
   z-index: 3;
}

When the flip to the text side occurs, the three lines of text appear
to be on the same plane despite the fact that I set
"-webkit-transform-style: preserve-3d;" for the face that contains the
text.

So I'm looking for an example that demonstrates how the
transform-style value of preserve-3d differs from flat.



OK, here is a very good demo.

http://www.webkit.org/blog-files/3d-transforms/transform-style.html

This was found here.

http://www.webkit.org/blog/386/3d-transforms/

--
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/

[css-d] IE9 fixes?

2011-06-30 Thread Sohail Aboobaker 
Hi,

I was wondering if there was a universal stylesheet to fix known IE9
compatibility issues. There are so many sites broken with IE9. Is there
something quick that can be done to avoid IE9 issues while these are being
fixed one by one?

Sohail
__
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] tables in print.css file

2011-06-30 Thread Angela French 
I'm working on a print style sheet.  I'm trying to style a data table and 
make the row that contains the table header a very light gray so that it 
presents as the headings when printed.  I styled as below, but it does not 
print with any color.  Thank you for any advice.

table.PolicyHistory th

{

background-color:#dfdbdb!important;

}


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] tables in print.css file

2011-06-30 Thread Kevin A. Cameron 
Shouldn't there be a space before the '!' ?

Kevin
__
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] tables in print.css file

2011-06-30 Thread Tim Duffy 
Do you have a url to the page in question.

I wouldnt think it would matter, but maybe there needs to be a space
between #dfdbdb and !important

table.PolicyHistory th {
background-color : #dfdbdb !important ;
}

Also a stab in the dark--css is case sensitive, is PolicyHistory
possibly Policyhistory


Tim
__
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] tables in print.css file

2011-06-30 Thread David Laakso 

On 6/30/11 4:13 PM, Angela French wrote:

 I'm working on a print style sheet.  I'm trying to style a data table and 
make the row that contains the table header a very light gray so that it 
presents as the headings when printed.  I styled as below, but it does not 
print with any color.  Thank you for any advice.

 table.PolicyHistory th

 {

 background-color:#dfdbdb!important;

 }


Angela French




Have you enabled printing background color in the browser you are using?
A clickable link to the page in your post is always an advantage...
~d



--
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] tables in print.css file

2011-06-30 Thread Kevin A. Cameron 
Are you testing by looking at a physical printout or a PDF? Sometimes a
light grey wont be noticeable in print.

You've set the media type in the style sheet link?
eg: 

Kevin
__
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] print.css: Firefox won't show multiple pages

2011-06-30 Thread Angela French 
I'm working on a print style sheet in development .  On what should be a 
multiple page print out, FF only prints the first page.  FF also renders the 
font much larger (set at 100% in preview preferences) than IE.  I have not set 
any font size in the print.css file.  How do the browsers decide what size to 
print at if I don't set it in the CSS?  Thank you for your help.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] tables in print.css file

2011-06-30 Thread Philippe Wittenbergh 

On Jul 1, 2011, at 5:33 AM, Tim Duffy wrote:

> 
> I wouldnt think it would matter, but maybe there needs to be a space
> between #dfdbdb and !important

It does not matter (as in: white-space is optional) - and it is ignored at 
parse time anyway (except with escaped characters).

see http://www.w3.org/TR/CSS21/syndata.html
(part. 4.1.8, but read through the whole thing)


> Do you have a url to the page in question.
what he said...

Seriously, it is immensely helpful to provide a link to the problem page. 
Remember, you  rely on the benevolence of people on this list. Nobody gets paid 
to help you troubleshoot your issue. Make it easy.

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] print.css: Firefox won't show multiple pages

2011-06-30 Thread Tom Livingston 
Just a stab in the dark, but if you are not specifying a size in the print 
sheet, it will use default or if the cascade is in effect with multiple sheets 
in the head, use what ever was last Specified in another sheet.

Sent from my iPhone

On Jun 30, 2011, at 4:40 PM, Angela French  wrote:

> I'm working on a print style sheet in development .  On what should be a 
> multiple page print out, FF only prints the first page.  FF also renders the 
> font much larger (set at 100% in preview preferences) than IE.  I have not 
> set any font size in the print.css file.  How do the browsers decide what 
> size to print at if I don't set it in the CSS?  Thank you for your help.
> 
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> http://www.checkoutacollege.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/

Re: [css-d] IE9 fixes?

2011-06-30 Thread David Laakso 

On 6/30/11 3:52 PM, Sohail Aboobaker wrote:

Hi,

I was wondering if there was a universal stylesheet to fix known IE9
compatibility issues. There are so many sites broken with IE9. Is there
something quick that can be done to avoid IE9 issues while these are being
fixed one by one?

Sohail







Are you talking about /your/ "human bugs" or /their/ "browser bugs;" 
and, either way, patience is a virtue. Well, sort of.. [so little time; 
so much to learn].


And this in the head of the document may help push their envelope...



Best,
~d


--
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] detecting user interaction

2011-06-30 Thread Mark Volkmann 
Are :hover and :focus the only ways that CSS can change something
based on user interaction?
I realize that there are many more ways that involve JavaScript.
It would be interesting if there was a :click pseudo-class so CSS
properties of a clicked element could be changed.

-- 
R. Mark Volkmann
Object Computing, Inc.
__
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] Iframe and CSS

2011-06-30 Thread Brian M. Curran 
Hello,

I suspect I have a position command problem with my Facebook widget, at the
bottom of this page:

 

http://www.draftingservices.com/3d-laser-scanning.html

 

(it's top aligned, while my other two widgets are bottom aligned)

 

Does the iframe receive css styling from some other source than what is
included in the code I have in my web page html? - When I inspect the widget
using firebug, this seems to be the case.

 

Sincerely,

Brian

__
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] detecting user interaction

2011-06-30 Thread Philippe Wittenbergh 

On Jul 1, 2011, at 10:53 AM, Mark Volkmann wrote:

> Are :hover and :focus the only ways that CSS can change something
> based on user interaction?

And :active
http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act

> I realize that there are many more ways that involve JavaScript.
> It would be interesting if there was a :click pseudo-class so CSS
> properties of a clicked element could be changed.

:active ?

Limited to elements defined as interactive, though (buttons, links).

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] Iframe and CSS

2011-06-30 Thread Philippe Wittenbergh 

On Jul 1, 2011, at 11:37 AM, Brian M. Curran wrote:

> I suspect I have a position command problem with my Facebook widget, at the
> bottom of this page:
> 
> 
> 
> http://www.draftingservices.com/3d-laser-scanning.html
> 
> 
> 
> (it's top aligned, while my other two widgets are bottom aligned)
> 
> 
> 
> Does the iframe receive css styling from some other source than what is
> included in the code I have in my web page html? - When I inspect the widget
> using firebug, this seems to be the case.

That widget specifies a height of '90px' for the iframe, whereas the 2 other 
widgets specify a height of 60px; the behaviour you see is then normal. All 3 
widgets rest on the same baseline. If you can't change the code for those 
iframe, you could specify 'vertical-align: top' for the 3 widgets.
BTW - you wrap those widgets in a  That is invalid html, you should use a 
 instead.

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] detecting user interaction

2011-06-30 Thread David Hucklesby 

On 6/30/11 7:37 PM, Philippe Wittenbergh wrote:


On Jul 1, 2011, at 10:53 AM, Mark Volkmann wrote:


Are :hover and :focus the only ways that CSS can change something
based on user interaction?


And :active
http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act


I realize that there are many more ways that involve JavaScript.
It would be interesting if there was a :click pseudo-class so CSS
properties of a clicked element could be changed.


:active ?

Limited to elements defined as interactive, though (buttons, links).

Philippe


For changes on click to a _different_ element, you can use the :target
pseudo-class together with a link to an element's ID -

http://reference.sitepoint.com/css/pseudoclass-target

--
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] Styling won't take on link

2011-06-30 Thread Kim Brooks Wei 

Hi People,

I can't get the visited styling to take on the link in the footer at 
http://is.gd/6dsvHD - can anyone spot my error?


Kimi
--

[ Kimi Wei
thewei.com
@kimiwei
(t) 862.203.8814
p o box 626
fair lawn, nj 07410 ]
__
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] Styling won't take on link

2011-06-30 Thread Alex Mitchell 
On Thu, Jun 30, 2011 at 11:46 PM, Kim Brooks Wei wrote:

> I can't get the visited styling to take on the link in the footer at
> http://is.gd/6dsvHD - can anyone spot my error?
>

Try the LoVe/HAte method of styling the links. (:link, :visited, :hover,
:active in that order.)

The reasoning? The default a style overrides all the others because it's
cool like that. Good luck.

Alex
__
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/