Re: [css-d] transparencies
On Fri, Jul 11, 2008 at 9:39 PM, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote: > > [quote] > The uniform opacity setting to be applied across an entire object > [/quote] > In other words, 'opacity' is applied to an _entire_ element (border, > background, foreground) and all its descendants. And no, it has nothing to > do with inheritance. > Well, that makes sense. However, it seems both Safari and Firefox are then displaying it incorrectly. I have an untitled list with a semitransparent background, and the contained list items should be fully opaque (though they have no background, they have text). The way I can tell is that the yellow text is dimmer inside the li tags than in the main body. http://sotabot.com/site_map.html (the background image is 1.2MB, so it may take a bit to load on slower connections Also, this is one of my pages in full context; hopefully it won't be too hard to wade through) -- ~ Marshal Horn http://sotabot.com webmaster since May 6th, 2008 __ css-discuss [EMAIL PROTECTED] 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] transparencies
On Jul 12, 2008, at 4:03 PM, Marshal Horn wrote:
> On Fri, Jul 11, 2008 at 9:39 PM, Philippe Wittenbergh <[EMAIL PROTECTED]
> n.com> wrote:
>>
>> [quote]
>> The uniform opacity setting to be applied across an entire object
>> [/quote]
>> In other words, 'opacity' is applied to an _entire_ element (border,
>> background, foreground) and all its descendants. And no, it has
>> nothing to
>> do with inheritance.
>>
>
> Well, that makes sense. However, it seems both Safari and Firefox are
> then displaying it incorrectly.
> I have an untitled list with a semitransparent background, and the
> contained list items should be fully opaque (though they have no
> background, they have text). The way I can tell is that the yellow
> text is dimmer inside the li tags than in the main body.
You have a ul with opacity applied:
div.sitemap ul {
background:#22 none repeat scroll 0% 0%;
border-top:0.35em ridge #AA;
float:left;
list-style-type:none;
margin:0px;
opacity:0.8; /* <--- This - */
padding:0em 0em 0.2em 0.5em;
}
/* site_map.html (line 36) */
The elements contained by (descendants of) the : , are
affected by the opacity of the parent element.
Thus, yes, Opera, Gecko (Firefox) and WebKit (Safari) are correct to
display the list-items as 'semi-transparent'. Their colour is affected
by setting 'opacity' on the ul.
As I said, if what you want is a semi-transparent --background-- for
the , allowing for the main background image to be visible, you'll
have to use rgba or hsla colours (works fine in Safari 3.x and Firefox
3.0x), or use a semi-transparent image as a background for the .
Again: 'opacity' is not making the background of an element semi-
transparent. It makes the whole element (border, background,
foreground colour) semi-transparent.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
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] transparencies
Marshal Horn wrote:
> Well, that makes sense. However, it seems both Safari and Firefox are
> then displaying it incorrectly.
> I have an untitled list with a semitransparent background, and the
> contained list items should be fully opaque (though they have no
> background, they have text). The way I can tell is that the yellow
> text is dimmer inside the li tags than in the main body.
>
> http://sotabot.com/site_map.html
> (the background image is 1.2MB, so it may take a bit to load on slower
> connections
> Also, this is one of my pages in full context; hopefully it won't be
> too hard to wade through)
Marshal,
As a colorblind person, I can tell you that the link you sent us (for
me, at least) was completely unreadable. Granted, with a 78% color
deficiency, I'm probably an extreme case, but this may something more
akin to the look you're going for (and it makes that page much more
readable):
Replace this in your style sheet:
div.sitemap ul {
padding: 0em 0em .2em .5em;
margin:0px;
float: left;
border-top:.35em #aa ridge;
list-style-type: none;
/* FF2 and Opera (1x1 Black PNG at 80% opacity) */
background:url(data:image/png;base64,iVBORw0KGgoNSUhEUgEBCAYfFcSJAXNSR0IArs4c6QZiS0dEAP8A/wD/oL2nkw1JREFUCNdjYGBgOAMAANEAzdAP7DMASUVORK5CYII=);
/* FF3 and Safari; CSS3 syntax support */
background-color: rgba(0,0,0,0.8);
}
...and add this to your HTML for IE:
Hope it helps!
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com & MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
css-discuss [EMAIL PROTECTED]
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] border-spacing and IE
>From everything I can find, border-spacing is still not supported by IE,
correct? Is there a workaround for this that allows for different vertical
and horizontal spacing? (The goal is for there to be spacing between table
rows, but not between table cells within a row.)
The css I've got (working on everything except IE) is:
table {
border-collapse: separate;
border-spacing: 0 10px;
}
I just need to replicate this on IE. :-/
Jeniffer
Jeniffer C. Johnson
OffLead Productions
http://www.offlead.com
__
css-discuss [EMAIL PROTECTED]
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] transparencies
Marshal Horn wrote:
> Well, that makes sense. However, it seems both Safari and Firefox are
> then displaying it incorrectly.
> I have an untitled list with a semitransparent background, and the
> contained list items should be fully opaque (though they have no
> background, they have text). The way I can tell is that the yellow
> text is dimmer inside the li tags than in the main body.
>
> http://sotabot.com/site_map.html
> (the background image is 1.2MB, so it may take a bit to load on slower
> connections
> Also, this is one of my pages in full context; hopefully it won't be
> too hard to wade through)
Sorry...
Small typo in my last post. Try this:
Replace this in your style sheet:
div.sitemap ul {
padding: 0em 0em .2em .5em;
margin:0px;
float: left;
border-top:.35em #aa ridge;
list-style-type: none;
/* FF2 and Opera (1x1 Black PNG at 80% opacity) */
background:url(data:image/png;base64,iVBORw0KGgoNSUhEUgEBCAYfFcSJAXNSR0IArs4c6QZiS0dEAP8A/wD/oL2nkw1JREFUCNdjYGBgOAMAANEAzdAP7DMASUVORK5CYII=);
/* FF3 and Safari; CSS3 syntax support */
background:rgba(0,0,0,0.8);
}
...and add this to your HTML for IE:
Again...hope it helps.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com & MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
css-discuss [EMAIL PROTECTED]
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] border-spacing and IE
J.C. Johnson wrote:
> From everything I can find, border-spacing is still not supported by
> IE, correct?
Correct.
> Is there a workaround for this that allows for different
> vertical and horizontal spacing?
The simplest workaround I can figure out is to use extra markup within
each cell, setting the desired border properties on that extra element
and margins for it, and setting no border for cells and no spacing
between the cells.
> The css I've got (working on everything except IE) is:
>
> table {
> border-collapse: separate;
> border-spacing: 0 10px;
> }
>
> I just need to replicate this on IE. :-/
The clumsy workaround that I have in mind would be something like the
following:
Instead of each ... write ...
(and ditto for if present). For the table use ,
with something sensible instead of "foo". In CSS, use something like
.foo{ border-collapse: collapse;
border: none; }
.foo td { border: none;
padding: 0; }
.td { margin: 5px 0;
padding: 1px; }
Note: 5px top and bottom margin correspond to 10px in your example,
because these margins do not collapse. The 1px padding is there to
simulate the default cell padding in most browsers. Naturally, if you
want borders on the cells, you set the border property for .td ("fake
cells" so to say).
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
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] CSS2 child selector not working IE7
Hi All,
I am using IE7 but facing view problems. I saw one article
http://msdn.microsoft.com/en-us/library/bb250496.aspx (child selector
is support in IE7). I tried that but not showing yet. I think its not
implemented.
My XML
title text
title text>
section title text here
I want all title showing different view. My requirment is view only
through CSS Style sheet.Please suggest anyone what should i do.
My CSS File.
article, book {
margin:.5em;
}
book>title, article>title {
font-size:xx-large;
text-align:center;
border-bottom-style:solid;
}
sect1 > title {
font-size:medium;
text-align:center;
}
..
Please advice me...may be anything i m missing
--
Thanks
Byomokesh Sahoo
__
css-discuss [EMAIL PROTECTED]
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] USS: Unidentifiable small space
Hello People! I have a small space at the bottom of the bounding box for this page's content. I can't see what's causing it. Help appreciated as always. http://thewei.com Kimi -- This email sent by Kimi Wei http://thewei.com 201-475-1854 __ css-discuss [EMAIL PROTECTED] 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] USS: Unidentifiable small space
Kim Brooks Wei wrote:
> Hello People!
>
> I have a small space at the bottom of the bounding box for this
> page's content. I can't see what's causing it. Help appreciated as
> always.
>
> http://thewei.com
>
> Kimi
>
>
img {
display:block;
}
Clyde
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
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] USS: Unidentifiable small space
- Original Message -
From: "Kim Brooks Wei" <[EMAIL PROTECTED]>
To: "CSS Discuss"
Sent: Saturday, July 12, 2008 12:46 PM
Subject: [css-d] USS: Unidentifiable small space
> Hello People!
>
> I have a small space at the bottom of the bounding box for this
> page's content. I can't see what's causing it. Help appreciated as
> always.
>
> http://thewei.com
>
> Kimi
Kimi:
Not sure what's causing it, but adding ... #pagegrfx img {display: block;}
... gets rid of it.
The same happens if you change the CSS selector '#pagegrfx' to '#pagegrfx
img'. Some other erudite soul will undoubtedly have a detailed technical
explanation to this.
Best,
Peter
www.fatpawdesign.com
__
css-discuss [EMAIL PROTECTED]
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] Opera sees content and draws a scrollbar, others ok
On 12 Jul 2008, at 08:41, Ingo Chao wrote:
> ok, did you try
>
> a .extraLinktext {
> position: absolute;
> left: -999em;
> top:-999em;
> }
> a:focus .extraLinktext {
> position: relative;
> left: 0;
> top:auto;
> }
> That seems to quit the scrollbar in Opera. Can't test the focus
> thing locally, though.
Perfect Ingo, thank you very much.
Just for my own enlightenment, would you consider this a bug in Opera
or a flaw in my CSS? Ordinarily of course I'd immediately assume the
latter, but in this case the fact that the page works fine in all the
other browsers that I've tested makes me wonder. Still, some browsers
are more forgiving than others; maybe Opera is simply applying the
letter of the law whilst others are being lenient?
--
Rick Lecoat
__
css-discuss [EMAIL PROTECTED]
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] ul li unordered lists list level indent control II
On Jul 6, 2008, at 5:25 PM, Jens Nedal wrote:
> Barrett wrote:
>> What do you think about controlling a list levels as seen by the
>> enduser in browser with css padding ?
>> I just contemplated this while wrangling with some server side code
>> SNIP
>>
>> .firstlevel {padding-left: 1em;}
>> .secondlevel {padding-left: 2em;}
>> Like this:
>>
>>
>> Parent One
>>
>> SNIP
>>
>> Parent Two
>>
>> SNIP
>>
>>
>>
>>
> When for example a Screenreader tries reading that list, the
> information
> about levels is lost, in contrary to actually nesting the ul elements.
> Semantically all you have is list with one level, nothing else.
>
> In terms of have a structure that already conveys meaning without
> styling i would regard this as bad practice.
Here is a revision to this since I have been successful at server
side getting the dynamic template built to build the list properly
now afaik.
This link will land you drilled down in the list. This list of the
day is in orange border div.
CSS W3C valid except mozilla border radius http://tinyurl.com/6lbmqs
http://beta.handmade-paper.us/page/CPO/CTGY/testcat2.2
W3C valid http://tinyurl.com/678lua
Would like input on best practices here for indent control the the
list that I have found now is complicated by my "active category"
BLACK RIGHT-POINTING POINTER (present in WGL4) ►
I've experimented with some negative margins on this.
►Bottom1 Sub
Bottom2 Sub
These seem to have a remaining tiny alignment issue.
Is there a better way to deal with multi level lists ?
Thanks,
Barrett
AOL/AIM handmadepaperus
Side note:
My ► is not displaying in IE6, but does display on test page in
IE6.
Test Page: http://www.alanwood.net/unicode/geometric_shapes.html
If it display on test page in IE6, then why not on my beta page ???
Relevant CSS -
#cattree {
margin-left: 0;
padding-left: 0;
font-size: .8em;
float: left;
border: 3px solid orange;
line-height: 1.2em;
padding-right: 2px;
margin-right: 3px;
}
#cattree ul {
padding-left: 0;
list-style-type: none;
margin-left: 1em;
}
#cattree ul li ul {
margin-left: 1em;
padding-left: 0;
}
#cattree ul li ul li ul li ul li {
padding-left: 0;
margin-left: 0;
}
#cattree ul li ul li ul li ul #current_cat {
padding-left: 0;
margin-left: -1em;
}
#cattree ul li ul li ul li ul {
margin-left: 1em;
}
#cattree ul li ul li ul li {
padding-left: 0;
}
#cattree ul li ul li ul #current_cat {
padding-left: 0;
margin-left: -1em;
}
#cattree ul li ul li {
display: block;
padding-right: 1em;
padding-left: 1em;
}
#cattree ul li ul #current_cat {
display: block;
margin-left: -1em;
padding-left: 1em;
}
#cattree ul li ul #current_cat ul {
display: block;
margin-left: -1em;
padding-left: 2.75em;
}
#cattree ul #current_cat {
margin-left: -1em;
}
#catwrapperul {
margin-left: 0;
padding-left: 0;
}
Thanks,
Barrett
AOL/AIM handmadepaperus
***
__
css-discuss [EMAIL PROTECTED]
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] test ignore
Thanks, Barrett AOL/AIM handmadepaperus __ css-discuss [EMAIL PROTECTED] 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] USS: Unidentifiable small space
On Sat, 12 Jul 2008 13:50:13 -0400
David Laakso <[EMAIL PROTECTED]> wrote:
> Kim Brooks Wei wrote:
> > Hello People!
> >
> > I have a small space at the bottom of the bounding box for this
> > page's content. I can't see what's causing it. Help appreciated as
> > always.
> >
> > http://thewei.com
> >
> > Kimi
I can't see it in my browsers (opera and ff), but I ran
into a similar problem where would only display this
way in IE. The solution has to do with the fact that
images are by default inline images, so they want to
sit on the same lines that the letters do.
They white space you see is for the space required by
letters that drop bellow the line, like g, j and y.
Besides the solution already offered, where you force
the image to be a block element, you can also do
img {
vertical-align: bottom;
}
to solve this. Hopefully I was speaking to the right
problem ~ Chris
--
christopher <[EMAIL PROTECTED]>
__
css-discuss [EMAIL PROTECTED]
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: ul li unordered lists list level indent control II
>
> On Jul 6, 2008, at 5:25 PM, Jens Nedal wrote:
>
>> Barrett wrote:
>>> What do you think about controlling a list levels as seen by
>>> the
>>> enduser in browser with css padding ?
>>> I just contemplated this while wrangling with some server side code
>>> SNIP
>>>
>>> .firstlevel {padding-left: 1em;}
>>> .secondlevel {padding-left: 2em;}
>>> Like this:
>>>
>>>
>>> Parent One
>>>
>>> SNIP
>>>
>>> Parent Two
>>>
>>> SNIP
>>>
>>>
>>>
>>>
>> When for example a Screenreader tries reading that list, the
>> information
>> about levels is lost, in contrary to actually nesting the ul
>> elements.
>> Semantically all you have is list with one level, nothing else.
>>
>> In terms of have a structure that already conveys meaning without
>> styling i would regard this as bad practice.
Here is a revision to this since I have been successful at server
side getting the dynamic template built to build the list properly
now afaik.
This link will land you drilled down in the list. This list of the
day is in orange border div.
CSS W3C valid except mozilla border radius http://tinyurl.com/6lbmqs
http://beta.handmade-paper.us/page/CPO/CTGY/testcat2.2
W3C valid http://tinyurl.com/678lua
Would like input on best practices here for indent control the the
list that I have found now is complicated by my "active category"
BLACK RIGHT-POINTING POINTER (present in WGL4) ►
I've experimented with some negative margins on this.
►Bottom1 Sub
Bottom2 Sub
These seem to have a remaining tiny alignment issue.
Is there a better way to deal with multi level lists ?
Thanks,
Barrett
AOL/AIM handmadepaperus
Side note:
My ► is not displaying in IE6, but does display on test page in
IE6.
Test Page: http://www.alanwood.net/unicode/geometric_shapes.html
If it display on test page in IE6, then why not on my beta page ???
Relevant CSS -
#cattree {
margin-left: 0;
padding-left: 0;
font-size: .8em;
float: left;
border: 3px solid orange;
line-height: 1.2em;
padding-right: 2px;
margin-right: 3px;
}
#cattree ul {
padding-left: 0;
list-style-type: none;
margin-left: 1em;
}
#cattree ul li ul {
margin-left: 1em;
padding-left: 0;
}
#cattree ul li ul li ul li ul li {
padding-left: 0;
margin-left: 0;
}
#cattree ul li ul li ul li ul #current_cat {
padding-left: 0;
margin-left: -1em;
}
#cattree ul li ul li ul li ul {
margin-left: 1em;
}
#cattree ul li ul li ul li {
padding-left: 0;
}
#cattree ul li ul li ul #current_cat {
padding-left: 0;
margin-left: -1em;
}
#cattree ul li ul li {
display: block;
padding-right: 1em;
padding-left: 1em;
}
#cattree ul li ul #current_cat {
display: block;
margin-left: -1em;
padding-left: 1em;
}
#cattree ul li ul #current_cat ul {
display: block;
margin-left: -1em;
padding-left: 2.75em;
}
#cattree ul #current_cat {
margin-left: -1em;
}
#catwrapperul {
margin-left: 0;
padding-left: 0;
}
Thanks,
Barrett
AOL/AIM handmadepaperus
***
>
Thanks,
Barrett
AOL/AIM handmadepaperus
__
css-discuss [EMAIL PROTECTED]
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] border-spacing and IE
Well, that's just not fair. ;-) It seems like such a very simple thing that
I'm surprised to find that there's not a clean solution for IE.
This is a table with unknown number of rows (database driven), each row
consisting of 5 cells. Having to add extra markup, as you suggest to each
cell is probably how I'll proceed, but geesh, what a waste! I could probably
just as easily do the whole thing in divs, faking the table look, but it is
true tabular data, so that also seems like a waste of effort.
Blah. ;-)
Jen
Jeniffer C. Johnson
OffLead Productions
http://www.offlead.com
> -Original Message-
> From: [EMAIL PROTECTED] [mailto:css-d-
> [EMAIL PROTECTED] On Behalf Of Jukka K. Korpela
> Sent: Saturday, July 12, 2008 5:55 AM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] border-spacing and IE
>
> J.C. Johnson wrote:
>
> > From everything I can find, border-spacing is still not supported by
> > IE, correct?
>
> Correct.
>
> > Is there a workaround for this that allows for different
> > vertical and horizontal spacing?
>
> The simplest workaround I can figure out is to use extra markup within
> each cell, setting the desired border properties on that extra element
> and margins for it, and setting no border for cells and no spacing
> between the cells.
>
> > The css I've got (working on everything except IE) is:
> >
> > table {
> > border-collapse: separate;
> > border-spacing: 0 10px;
> > }
> >
> > I just need to replicate this on IE. :-/
>
>
> The clumsy workaround that I have in mind would be something like the
> following:
>
> Instead of each ... write ...
> (and ditto for if present). For the table use ,
> with something sensible instead of "foo". In CSS, use something like
>
> .foo{ border-collapse: collapse;
> border: none; }
> .foo td { border: none;
> padding: 0; }
> .td { margin: 5px 0;
> padding: 1px; }
>
> Note: 5px top and bottom margin correspond to 10px in your example,
> because these margins do not collapse. The 1px padding is there to
> simulate the default cell padding in most browsers. Naturally, if you
> want borders on the cells, you set the border property for .td ("fake
> cells" so to say).
>
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/
>
> __
> css-discuss [EMAIL PROTECTED]
> 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 [EMAIL PROTECTED]
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] CSS2 child selector not working IE7
On Fri, Jul 11, 2008 at 11:09 PM, Byomokesh Sahoo
<[EMAIL PROTECTED]> wrote:
> My CSS File.
>
> article, book {
>margin:.5em;
> }
>
> book>title, article>title {
>font-size:xx-large;
>text-align:center;
>border-bottom-style:solid;
> }
>
> sect1 > title {
>font-size:medium;
>text-align:center;
>
> }
Are you doing this to see if the child selector works, or to get the
job done? As far as I can tell, you don't need the child selector for
this at all, and can simply use the descendant selector.
(The descendant selector is simply " " instead of " > " )
--
~ Marshal Horn
http://sotabot.com webmaster since May 6th, 2008
__
css-discuss [EMAIL PROTECTED]
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] transparencies
Ah! After making an example to show you what I meant, I finally realized it. An opacity of, say, .75 would make a list and all its items partially transparent and show the body's background (assuming the list is the direct descendant of the body). An opacity of .75 on the list items would make them partially transparent to the background of the list, as well as however transparent to the background they are already (due to the opacity of the list itself). I also understand that W3 chose to do it this way so that developers wouldn't have to change how they use it when W3 adds more features to that property. Thanks!!! And thank you, Bill Brown. That stuff for FF2 and Opera look like gibberish, but I'll trust that it works :) And now on to theoretical: A VERY powerful addition to CSS3 (that's even backwards compatible!) The ability to specify the opacity of an item to each of its ancestor tags. Say you have a list item inside an untitled list, nested in a div tag (which is the direct descendant of the body). opacity of li result .5 li is half transparent to ul .5, .5 li is half transparent to ul, plus half transparent to div (you cannot see any contents of li) .5, .25 li is half transparent to ul, plus a quarter transparent to div I decided that is would be best to add the opacities, because it allows for the most flexibility and control. However, there is an additional value called "auto" to allow an opacity to that layer to be overridden if it is specified elsewhere (of course, default is 1.0) Now there's three options if an object tries to lend more than its full opacity: Clip transparencies from the farthest ancestors (default) far Clip transparencies from the nearest ancestors near scale opacities up proportionally all So why would I bother with all this: 1. It makes for some awesome compatibility tests 2. I like my hexadecimal http://www.morecrayons.com/palettes/webSmart/slider.php# -- ~ Marshal Horn http://sotabot.com webmaster since May 6th, 2008 __ css-discuss [EMAIL PROTECTED] 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] transparencies
On Sat, Jul 12, 2008 at 8:28 PM, Marshal Horn <[EMAIL PROTECTED]> wrote: > Ah! > After making an example to show you what I meant, I finally realized it. > An opacity of, say, .75 would make a list and all its items partially > transparent and show the body's background (assuming the list is the > direct descendant of the body). An opacity of .75 on the list items > would make them partially transparent to the background of the list, > as well as however transparent to the background they are already (due > to the opacity of the list itself). > I also understand that W3 chose to do it this way so that developers > wouldn't have to change how they use it when W3 adds more features to > that property. > > Thanks!!! > > And thank you, Bill Brown. That stuff for FF2 and Opera look like > gibberish, but I'll trust that it works :) > > > And now on to theoretical: > A VERY powerful addition to CSS3 (that's even backwards compatible!) > The ability to specify the opacity of an item to each of its ancestor > tags. Say you have a list item inside an untitled list, nested in a > div tag (which is the direct descendant of the body). >opacity of li result >.5 li is half transparent to ul >.5, .5li is half transparent to ul, plus > half transparent to div (you cannot see any contents of li) >.5, .25 li is half transparent to ul, plus a > quarter transparent to div > > I decided that is would be best to add the opacities, because it > allows for the most flexibility and control. However, there is an > additional value called "auto" to allow an opacity to that layer to be > overridden if it is specified elsewhere, *including in an ancestor tag* (of course, default is 1.0) > Now there's three options if an object tries to lend more than its full > opacity: > Clip transparencies from the farthest ancestors (default) far > Clip transparencies from the nearest ancestors near > scale opacities up proportionally > all > > > So why would I bother with all this: > 1. It makes for some awesome compatibility tests > 2. I like my hexadecimal > http://www.morecrayons.com/palettes/webSmart/slider.php# > > -- > ~ Marshal Horn > http://sotabot.com webmaster since May 6th, 2008 > Forgot to mention a few things (one of them is in asterixies (*) above). The other is below: If no-one has come up with this before, I need to suggest it to the working draft. (please tell me and link to where it has been mentioned before if you know of it) __ css-discuss [EMAIL PROTECTED] 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] border-spacing and IE
And of course there's another problem with using a div inside a td, and
applying the border to the div. The height of the content of each cell in
the row varies. Some have one line, some two lines, some three lines of
content. The table row takes whatever height it needs to take to accommodate
the content, but the divs of the "shorter" contents don't expand to be 100%
height unless I can define a height to the td, which I can't.
long content here that might wrap to three
lines
short content
short content
long content that might be 2 or 3 lines long
long content here that might wrap to three
lines
short 1 line
short 1 line
long content that might be 2 or 3 lines long
td {
vertical-align: bottom;
}
td div {
margin: 0 0 10px 0;
border: solid #99;
}
td.cell1 div {
padding: 10px 0 10px 10px;
border-width: 1px 0 1px 1px;
}
td.cell2 div {
padding: 10px 0;
border-width: 1px 0 1px 0;
}
td.cell3 div {
padding: 10px 0;
border-width: 1px 0 1px 0;
}
td.cell4 div {
padding: 10px 0 10px 10px;
border-width: 1px 1px 1px 0;
}
The result is a "row" border that looks something like this:
|
|-|
| |
|-|
I'm a bit frustrated that the cleanest solution I can think of is to insert
"empty" rows between the content rows, to break them apart.
Jeniffer
Jeniffer C. Johnson
OffLead Productions
http://www.offlead.com
__
css-discuss [EMAIL PROTECTED]
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] form Submit button getting pushed outside of div
I have a submit button that is getting pushed to an outer div. I would like it to stay within the div which contains the rest of the form. Here is what is happening: http://yakmaster.net/test/floating_submit.html I've added a border to the divs so it's clear what is happening. any ideas? __ css-discuss [EMAIL PROTECTED] 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] form Submit button getting pushed outside of div
Kelly Moore wrote:
> I have a submit button that is getting pushed to an outer div. I
> would like it to stay within the div which contains the rest of the
> form.
>
> Here is what is happening:
>
> http://yakmaster.net/test/floating_submit.html
>
> I've added a border to the divs so it's clear what is happening.
>
> any ideas?
Kelly--
This oughta do it.
div.formrow{overflow:hidden;zoom:1;}
Hope it helps.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com & MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
css-discuss [EMAIL PROTECTED]
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/
