[css-d] Examples of -webkit-mask-image in the wild

2010-07-30 Thread Ben Darlow 
Hi all,

I'm experimenting with webkit masks, but have been unable to find any  
working examples of -webkit-mask-image in use anywhere. All the  
examples on the webkit blog and on the Apple developer site have pre- 
processed images in place, and when I try to follow the same syntax it  
doesn't work for me locally (Safari 4.0.5 and WebKit r64341). I can  
however reproduce the gradient-based mask effects, so I'm wondering if  
there's just some secret sauce to the image you use as a mask? I've  
tried using 8-bit and 24-bit PNGs, as well as a JPEG. In each case I'm  
converting these images to greyscale before saving (although from what  
I can tell, a 24-bit PNG is always saved with all 3 channels anyway).

Any assistance on this would be appreciated.

~B
__
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/

[css-d] absolute positioning

2010-07-30 Thread Angela French 
I'm being driving nuts by absolute positioning rendering between IE and FF.  I 
just want to confirm what I think is correct about absolute positioning.  My 
understanding is that an absolutely position element positions itself relative 
to its parent container.  If the parent has not positioning, then it positions 
itself absolutely relative to the grandparent container, and so forth, up to 
the body.  Is this correct?

If so, do both IE and FF follow this?

Thank you.

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.comhttp://www.checkoutacollege.com/

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

Re: [css-d] absolute positioning

2010-07-30 Thread Luc 
Good afternoon Angela, 

It was foretold that
on 30/07/2010 @ 12:25:52 GMT-0700 (which was 16:25:52 where I live)
Angela French would write:

snipped a bit

 I'm being driving nuts by absolute positioning rendering between IE
 and FF.  I just want to confirm what I think is correct about
 absolute positioning.  My understanding is that an absolutely
 position element positions itself relative to its parent container. 
 If the parent has not positioning, then it positions itself
 absolutely relative to the grandparent container, and so forth, up to the 
 body.  Is this correct?  


An  absolutely  positioned  element is removed from the normal flow of
the  document  and  placed  precisely at the co-ordinates specified by
top,left, right or bottom.

But  what  is the element absolutely positioned from? It is positioned
absolutely from the top left hand corner of its containing block (i.e.
its  parent).  The  containing  block of the positioned element is the
nearest  ancestor  element which has a value for the property position
other  than  static. If there is no ancestor then the containing block
is the root element , which is the html element outside of all margins
set on the body.

So  what  this  boils  down  to  is that an element will be absolutely
positioned  from  the  top left of the viewport unless it is nested in
another  element that has a value for the property position other than
static.  e.g.  position:relative  or position:absolute. In these cases
the  element  will  position  itself the specified amount from the top
left of its parent elements.

So  the  usual way to place an element in relation to its parent is to
give  the  parent a position:relative without co-ordinates which keeps
the  parent in the flow of the document. The nested child element will
then takes its absolute positioning co-ordinates using the parents top
left co-ordinates as its starting point.

If i'm mistaken, i'm sure somebody here will correct me :-)
 
-- 
Best regards,
 Luc
_

http://www.dzinelabs.com

Using the best e-mail client: The Bat! version 4.2.6 with
Windows XP (build 2600), version
5.1 Service Pack 3 and
using the best browser: Opera.

  


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

Re: [css-d] absolute positioning

2010-07-30 Thread David Laakso 
Angela French wrote:
 I'm being driving nuts by absolute positioning rendering between IE and FF.  
 I just want to confirm what I think is correct about absolute positioning.  
 My understanding is that an absolutely position element positions itself 
 relative to its parent container.  If the parent has not positioning, then it 
 positions itself absolutely relative to the grandparent container, and so 
 forth, up to the body.  Is this correct?

 If so, do both IE and FF follow this?

 Thank you.

 Angela French

   



/As always a clickable link to your page in question is always advisable.../

The best source for confirmation is the CSS specs proper--
http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

There is a good explanation of absolute positioning here:
http://www.brainjar.com/css/positioning/default4.asp

For the most part compliant browsers follow the CSS specifications.
IE 7.0 sometimes follows these specifications.
One never quite knows what IE 6.0 may do in any given situation...

Best,
~d

-- 
http://chelseacreekstudio.com/

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

[css-d] absolute positioning

2010-07-30 Thread Alex Mitchell 
On Fri, Jul 30, 2010 at 12:25 PM, Angela French afre...@sbctc.edu wrote:

 I'm being driving nuts by absolute positioning rendering between IE and FF.
  I just want to confirm what I think is correct about absolute positioning.
  My understanding is that an absolutely position element positions itself
 relative to its parent container.  If the parent has not positioning, then
 it positions itself absolutely relative to the grandparent container, and so
 forth, up to the body.  Is this correct?

 If so, do both IE and FF follow this?

 Thank you.

 Angela French
 Internet Specialist
 State Board for Community and Technical Colleges
 360-704-4316
 afre...@sbctc.edu
 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/


It's my understanding that an absolutely positioned element will be
positioned absolutely relative to the nearest relatively or absolutely
positioned parent.
If no parents are relatively positioned it will be positioned relative to
the viewport or the html element.

I've created a demo of how this works here:
http://gumware.com/absolute-positioning.html

Regards,
Alex Mitchell
http://gumware.com

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

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

Re: [css-d] absolute positioning

2010-07-30 Thread Ed Seedhouse 
On Fri, Jul 30, 2010 at 12:25 PM, Angela French afre...@sbctc.edu wrote:
 I'm being driving nuts by absolute positioning rendering between IE and FF.

While the others have given you accurate information about how AP
works, I should suggest that for laying out major elements of the page
you stick to floats and margins.  They are easier to work with and
easier to understand, although there are some snags, especially with
IE and you have to learn how to make a floated element enclose it's
children, which it won't by default.

AP is great for positioning elements for special effect, but using it
to lay out major divisions on your page is pretty complicated and with
floats and margins  your browser and it's normal flow will do much of
the work for you.

-- 
Ed Seedhouse
__
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/

Re: [css-d] absolute positioning

2010-07-30 Thread Angela French 


-Original Message-
From: Ed Seedhouse [mailto:eseedho...@gmail.com] 
Sent: Friday, July 30, 2010 1:31 PM
To: Angela French
Cc: css-d
Subject: Re: [css-d] absolute positioning

On Fri, Jul 30, 2010 at 12:25 PM, Angela French afre...@sbctc.edu wrote:
 I'm being driving nuts by absolute positioning rendering between IE and FF.


AP is great for positioning elements for special effect, but using it
to lay out major divisions on your page is pretty complicated and with
floats and margins  your browser and it's normal flow will do much of
the work for you.

-- 
Ed Seedhouse

I am using AP to position an overlay/popup div that is acivated with javascript.
__
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/

Re: [css-d] absolute positioning

2010-07-30 Thread Rick Gordon 
To add to what others have said, another issue related to this may be the 
z-index bug, which can affect the layering of positioned elements in IE7 and 
lower. Google z-index bug.

Rick Gordon

--

On 7/30/10 at 12:25 PM -0700, Angela French wrote in a message entitled
[css-d] absolute positioning:

I'm being driving nuts by absolute positioning rendering between IE and FF.  I 
just want to confirm what I think is correct about absolute positioning.  My 
understanding is that an absolutely position element positions itself relative 
to its parent container.  If the parent has not positioning, then it positions 
itself absolutely relative to the grandparent container, and so forth, up to 
the body.  Is this correct?

If so, do both IE and FF follow this?

-- 
___

RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___

WWW:   http://www.shelterpub.com
__
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/

[css-d] Simple menu bar

2010-07-30 Thread Peter Lawson 
I doubt you get questions more basic than this :-[

How do I get this menu bar to centre itself on the page?
And show its background colour?

style type=text/css
#nav {
margin: 0 auto 3em auto; float: left; padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; }
#nav li { float: left; }
#nav li a {
display: block;
padding: 8px 9px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 2px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
.bl { border-left: 2px solid #ccc; }
   /style
/head
body
ul id=nav
   li class=bla href=index.htmlHome/a/li
   lia href=History.htmlHistory and Structure/a/li
   lia href=Groups.htmlGroups/a/li
   lia href=Constitutions.htmlConstitutions/a/li
   lia href=Concessions.htmlConcessions/a/li
   lia href=Opportunities.htmlOpportunities/a/li
   lia href=Magazines.htmlMagazines/a/li
   lia href=Links.htmlLinks/a/li
/ul


-- 
Peter Lawson
Cape Town: 021-797-4493
France 06 18 28 96 43

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

Re: [css-d] Simple menu bar

2010-07-30 Thread Rick Gordon 
Why do you need the floats? Just at a glance, I'd suspect that that's what's 
messing up your centering.

Rick Gordon

--

On 7/30/10 at 1:16 PM +0200, Peter Lawson wrote in a message entitled
[css-d] Simple menu bar:

I doubt you get questions more basic than this :-[

How do I get this menu bar to centre itself on the page?
And show its background colour?

style type=text/css
#nav {
   margin: 0 auto 3em auto; float: left; padding: 0;
   list-style: none;
   background-color: #f2f2f2;
   border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; }
#nav li { float: left; }
#nav li a {
   display: block;
   padding: 8px 9px;
   text-decoration: none;
   font-weight: bold;
   color: #069;
   border-right: 2px solid #ccc; }
#nav li a:hover {
   color: #c00;
   background-color: #fff; }
.bl { border-left: 2px solid #ccc; }
   /style
/head
body
ul id=nav
   li class=bla href=index.htmlHome/a/li
   lia href=History.htmlHistory and Structure/a/li
   lia href=Groups.htmlGroups/a/li
   lia href=Constitutions.htmlConstitutions/a/li
   lia href=Concessions.htmlConcessions/a/li
   lia href=Opportunities.htmlOpportunities/a/li
   lia href=Magazines.htmlMagazines/a/li
   lia href=Links.htmlLinks/a/li
/ul

-- 
___

RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___

WWW:   http://www.shelterpub.com
__
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/

Re: [css-d] Simple menu bar

2010-07-30 Thread David Laakso 
Peter Lawson wrote:
 I doubt you get questions more basic than this :-[

   






It is basic questions that make the world tick.
Fwiw, a stab at your very good question 
http://chelseacreekstudio.com/ca/cssd/8.html

Best,
~d



-- 
http://chelseacreekstudio.com/

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