Re: [css-d] First-Child

[Tim Climis]

Two colons are for pseudo elements.  One colon is for pseudo classes.
However, I believe that one colon always works because there wasn't a
distinction until CSS3.

::first-letter
::first-line
::before
::after

:link
:visited
:hover
:active
:focus
:first-child
:lang


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
Sent: Friday, September 26, 2014 12:04 PM
To: Philip Taylor
Cc: CSS Discuss
Subject: Re: [css-d] First-Child

Is there a time to use two colons and is there a time to use one colon ?

Philip Taylor wrote:
> Crest Christopher wrote:
>
>> Here.
>
> Right, so I see two intended "first-child" rules there :
>
>> ::first-child {ouline:1px dotted lime;}
>> #t3 p::first-child{color:red;}
>
> The first appears to be generic and targets all elements that are 
> first children of their parents; the second targets the first child 
> element that appears nested within an element whose ID is "t3", which 
> in your code is the parent. Eliminating the syntax errors 
> (mis-spelled "outline", two colons where one is required) yields this :
>
>   http://web-consultants.org/tests/First-child.html
>
> which appears to demonstrate what you want.
>
> 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/

__
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] More ems fun!

[Tim Climis]

> h1 span{
> display:none;
> }
>
> prevents that from being seen (because the logo presumably says "Bob's hot
dog palace") but since it's in an h1, you get the > > benefits of better SEO
results..that is my understanding of why to use this technique.

Why not just h1 {display:none} ?

---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] Role of Pre-processors

[Tim Climis]

On Saturday, May 10, 2014 08:57:36 AM GJim wrote:
 
> > There is standardization.
> 
> What, then, of the divergence between W3C and WHATWG?

I'm unaware of a WHATWG CSS standard (and it appears that Google 
also doesn't know about it, so I'm questioning its existence).  I know 
that there are competing HTML standards, but those are irrelevant to 
this thread.

---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] Role of Pre-processors

[Tim Climis]

On Saturday, May 10, 2014 11:54:32 AM you wrote:
> Tim Climis wrote:
> > The problem is not lack of standardization.  The problem is that
> > developers want to use properties that technically aren't part of the
> > standard yet.
> 
> I respectfully disagree.  The problem is not what the developers
> /want/ us to do, but rather than there are far too many of us
> who are only too eager to accede to their wishes.  We are under no
> obligation whatsoever to do anything that a developer might want us
> to.  I have never used, and will never use, any vendor-specific
> prefixes.  I neither need nor want to live at the (b)le{a|e}ding
> edge:  I prefer to wait until a specification becomes a formal
> recommendation before adopting any part of it for production work.

Ah, I think I see the misunderstanding here.  Perhaps instead of "developer" I 
should have 
used "designer" or whatever word you use to describe yourself.  My point was 
not that 
other people want us to do things, but that we ourselves want to do things.  
The fact that 
you do not want to use draft standard properties is commendable, and makes you 
not a 
part of the problem as I see it.

(fwiw, I actually /am/ part of the problem, but that doesn't really change what 
the problem 
/is/.)

---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] Role of Pre-processors

[Tim Climis]

There is standardization.  

On Friday, May 09, 2014 09:15:46 AM Andrew C. Johnston wrote:
> Eric:
> 
> Well, I am just thinking theoretically, but the standards refrain is,
> everyone should meet the standards. And so css says, the code 'corners:
> rounded' or 'corners: spiked' is valid. But then the browsers fail to
> comply. They need it to be, 'mozilla-corners: rounded', and then there are
> 8 varieations.
> 
> And I wonder, why does the language not have the ability to internalize
> that, or can the language itself negotiate a successful result, given this
> imperfect reality.

The language is interpreted by the browsers.  The language does only have a 
single 
method for rounded corners: border-radius.

The problem is that border-radius didn't come into existence until 2009 (It may 
have been 
earlier, but the draft spec lists changes since the December 17, 2009 candidate 
recommendation).  Browsers are older than 2009. IE8, for instance was released 
in March 
2009.  Because the browser predates border radius, it has no support for it.  
It couldn't.  
There was no such thing.

And since, in 2009, border-radius was part of a candidate recommendation, that 
means 
that its potential behaviors were being hashed out.  While a new feature is 
being figured 
out, browsers put a test implementation in with the "-" prefix (-ie-, -moz-, 
-webkit-, etc.).  
Later, once the community has all agreed on how the property should act, the 
browsers 
implement the feature without the prefix (as was the case in IE9).

The problem is not lack of standardization.  The problem is that developers 
want to use 
properties that technically aren't part of the standard yet.

---Tim

> 
> Pre-processors may well have other value, but is this negotiation a function
> that should be done by them? We already have a lack of standardization, so
> I personally am not thrilled with this extra layer of complication on an
> already difficult process, but given the potential I would assume they are
> here to stay.
> 
> Rgrds,
> 
> Andrew
> 
> 
> Andrew,
> 
> I'm not following what you mean by this -
> 
> "Why can't there be a code for all browsers, to do something like
> transparency or rounded corners."
> 
> Are you talking about something outside of CSS? Something else maybe?
> 
> Eric
> __
> 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] Media Queries: How many pixels make an em ?

[Tim Climis]

On Saturday, April 19, 2014 01:27:12 PM Tim Dawson wrote:
> 
> I'm tempted to leave margins, padding etc. in headings as pixels and just
> change them in the media query if they become unworkable. Particularly when
> it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal
> with several decimal places of ems (which probably convert to sub-pixel
> dimensions).
> 
> What do others do ?

This is a terrific use for "rem."  ems are always the font size, so as the font 
size 
increases, so does the size of an em.  However, a rem is the font-size on the 
root element (), which means that it doesn't change size throughout the 
page.

---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] weird div math!

[Tim Climis]

> but 2.25%  doesn’t produce the same even spacing as 
2.3%.   I don’t have
> borders eating into my space..
> 

Now I blame rounding errors.  Margin is 21.141px and 
content is 286.094px.  You'll end up with a margins at 21 or 
22, and content at 286 or 287 depending on how things 
fall.

---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] weird div math!

[Tim Climis]

On Monday, April 14, 2014 06:24:06 PM John Johnson wrote:
> Goal: 3 Divs of equal width, equally horizontally spaced within their
> parent.
> 
> div width: 30.3% x 3 appx = 91%, leaving 9% for a total of 100%
> 
> To achieve the spacing I assumed that margin-left:3% would do it: 3 divs, 3
> left edges, 3 x 3% = 9%
> 
> It didn’t and I have no clue why. No, the magic figure appears to 2.3%!

If you use 3, you get 3 red left margins. But it appears from your example that 
you really 
want 3 left margins AND a right margin that's the same size.  Thus, 4 x 2.25 = 
9%

> 
> Can anyone shine a light on this, please? Codepen below.
> 
> Thank you!
> 
> John
> 
> http://codepen.io/JohnJohnson/pen/pmjxz/
> __
> 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] Font-Sizes - Golden Rule ?

[Tim Climis]

>How did you calculate 100% = 1em ? 

That's the definition in the spec.  "On the 'font-size' property, [ems]
refer to the computed font size of the parent element."

So 1em equals the font-size of the parent element.

And "[percentages] refer to inherited font-size."  The inherited font size
of an element is the font-size of the parent element.  

So 100% equals the font-size of the parent element.

Therefore, 1em = 100% = the font-size of the parent element.

---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] Font-Sizes - Golden Rule ?

[Tim Climis]

>> How did you calculate 100% = 1em ?
>> Mostly everyone used, including myself pixels for box sizing, I hope you
were referring to creating a DIV as in box sizing ? What do you mean by
"percentages are based on browser size" ?
>> 
>>> (although, it would be kind of fun if 100% resulted in letters 
>>> hundreds of pixels high...)
>>> 
>>> ---Tim
>> 

> I think percentages are based on their parents size and not the browser.
> Correct me if I am wrong.

You are correct (except for the exceptions mentioned later by other people),
and of course for fonts.

The original question was about fonts.  None of the box-model percent sizing
tangents matter.  My comment was based on this from the OP:

> percentages from what I know are relative to the browser size

And that's only remotely true in the context of boxes.

For example, if I have a rule that says 
body { 
font-size: 50%; 
width: 50%;
} 

My font size is 8px (assuming browser defaults).  But my body width is NOT
8px.  It is in fact half of my browser width.  And so my point, which is
still valid, is that font percent and other percent are not the same thing.

---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] Font-Sizes - Golden Rule ?

[Tim Climis]

On Tuesday, April 08, 2014 10:24:14 PM Crest Christopher wrote:
> Em are the best solution for font-sizes, from everything that I know.
> Pixels I don't know if pixels should be used at all and percentages 
from
> what I know are relative to the browser size, is this correct or am I
> mis-understanding something.

For box sizing, percentages are based on browser size.  But fonts 
don't work like box-sizing.  for fonts, 100% = 1em.  120% = 1.2em.  
90% = .9em, etc.  So which one you use is up to personal preference.

(although, it would be kind of fun if 100% resulted in letters hundreds of 
pixels high...)

---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] Best practices in only targeting only Styles needed for a page in an external style sheet?

[Tim Climis]

> With one stylesheet, Image sprite 2 is being called on page A B and C
> even though the image is only displayed  on page C
> 

Aren't browsers smart enough to not load an image if it's not being used?  
>From my quick examination, I have a style sheet that references minus.gif.  On 
a page where minus.gif does not appear, it's not showing up in the page 
resources.  So I don't think an image is actually loaded by the browser just 
because it's referenced in a style sheet.  I think there actaully needs to be 
an element it applies to first.

So if the goal is to limit page load time, this is a non-issue.

---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] multi decimal places in percentages

[Tim Climis]

> > Is there a standard saying how many digits a browser is supposed to pay
> > attention to? Are they supposed to take them as is? Round them off?
> > Truncate them? In my opinion, just meaningless digits!
> 
>  From tests I did some years ago, I found that some browsers round up, some
> round down, and some to the nearest pixel. FWIW I usually round to the
> nearest 3 decimal places.

I don't know how percentages go, but I've found that ems are only reliably 
carried out to 3 places - splitting into 16ths ended up being rounded (even 
though they were an even number of pixels)

---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] [class*="span"]

[Tim Climis]

On Friday, February 22, 2013 12:46:37 am Angela French wrote:
> Can someone please explain this to me - what it does, and maybe a practical
> example?  Thank you.
> 
> [class*="span"] {
>   float: left;
>   min-height: 1px;
>   margin-left: 20px;
> }
> 

this selects any element with a class that contains "span" in its name.  So 
main_span, spanner, spicNspan, moospanity, etc.

---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] Multiple classes...

[Tim Climis]

On Saturday, August 25, 2012 3:03:33 pm Jay Tanna wrote:
> #invitelist, (AND)
> .window, (AND)
> .redframe

Uh, no...

Maybe some HTML would help.

"#invitelist .window .redframe" applies to the inner most div in the code 
below.


  
...
  


"#invitelist, .window, .redframe" applies to all three of the divs below:





"#invitelist .window.redframe" applies to the inner most div in the code below 
(note how the div has two classes):


  


So, Michael, yes, you're still remembering correctly.  Maybe if we knew what 
your HTML looked like, we'd have better luck helping you get the correct 
selector.

---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] Bottom border on H3

[Tim Climis]

On line 150 of style_allied_product.css, you set the height of h3 to a fixed
25px.  If you remove that height declaration, the height will auto adjust to
fit the text in the h3.

---Tim

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
> discuss.org] On Behalf Of Del Wegener
> Sent: Thursday, March 22, 2012 11:16 AM
> To: css
> Subject: [css-d] Bottom border on H3
> 
> Good Morning;
> The page in question is
> http://www.alliedcorrosion.com/products/insulator_modular_seals_page4_
> psi.php
> There are headings on this page with a yellow underline.
> I use H3{border-bottom:3px solid #FFD700;} When the text is too long for
the
> window it wraps as desired but the wrapped portion appears below the
> bottom border.
> Is there a way to force the bottom border to push down beneath all the
text
> when wrapping happens?  I want the border to be directly beneath the text
> no matter now many lines the text uses.
> Del
> 
> 
> __
> 
> 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] I Have a Really Big 'm'

[Tim Climis]

>  From my this, it really visually appears as if the em is not an "m" or an 
> "M" in
> even the most plain typeface. That's when the text is centered. If it's left 
> or
> right aligned, you can fit in two more "m".

As has been discussed before in this thread, em is not a horizontal measure.  
It is a vertical measure, and is defined as the size of the font.

Directly from the CSS 1 spec (just to show that it's always been defined this 
way - at least in CSS) "ems, the height of the element's font"  
http://www.w3.org/TR/CSS1/#units

The CSS 2.1 spec gets more precise, particularly in regard to x-height. 
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units

It was (a really long time ago, and only a really long time ago *in print*) a 
measure of the width of a capital M.  It has been (and is defined in the CSS 
spec as) the font height for quite a while.

> more interestingly, I looked at the "computed size" in Chrome, and it
> reported that the div had a calculated size of 140px.
> 

That's not interesting at all.  That's expected.  The font-size is 14px (you 
set it to that).  1 em is the font-size.  So 10em would be 14px x 10=140px.


__
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] four-sided CSS3 drop shadow?

[Tim Climis]

On Sunday, January 15, 2012 11:58:48 am Alan Gresley wrote:

> > You just have to make the spread of the shadow bigger than then offset.
> > 
> > box-shadow: 0 0 4px #ddd;
> > 

> Not so. There needs to be a forth value in the box-shadow string to
> indicate spread.

My bad.  There are so many parameters to this one, it's hard to keep them 
straight, and they kind of hide them in the spec.  But you are absolutely 
right.  Spread is the fourth parameter; blur radius is the third.  I had them 
backwards in my head.

It might be worth noting that the size of the shadow is a combination of the 
spread and the blur.

There's a pretty good diagram of this at css3.info, about a third of the way 
down the page: http://www.css3.info/preview/box-shadow/

---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] four-sided CSS3 drop shadow?

[Tim Climis]

On Saturday, January 14, 2012 4:06:30 pm Stephen Britton wrote:
> I am experimenting with CSS3 drop shadows. Most examples only show it
> working with two sides - usually the bottom and right or left side.
> Is there a way to have the shadow cover all sides - top, bottom, right and
> left?
> 
> Here is some sample code that I have been working with. It only covers the
> bottom and right side.
> 
>  -moz-box-shadow: 8px 8px 8px #ddd;
>-webkit-box-shadow: 8px 8px 8px #ddd;
>box-shadow: 8px 8px 8px #ddd;

You just have to make the spread of the shadow bigger than then offset.

box-shadow: 0 0 4px #ddd;

Or, with what you have:

box-shadow: 8px 8px 10px #ddd;

That'll give a 2px top and left shadow, and a 10px bottom and right shadow.

---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] navigation list with bullet and background color change.

[Tim Climis]

> It seems that, when we mouse hover the padding area, we will have a red
> text over a red background, a bad combination that should never arrive.

The padding area isn't the issue.  It's actually the border.  Which means as
written, there's only 1px where that can happen.  I had to try really hard
to hit it.

But this will fix it:

li{
display: block;
}

a {
 display:block;
border-top: 1px dotted #ccc;
 background:green
url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif";)
no-repeat right center;
 padding: 2px 0;
 color: red;
}

a:hover {
background-color: red;
color: white;
}

---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] Creating angled corner with CSS

[Tim Climis]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
> discuss.org] On Behalf Of Mads Erik Forberg
> Sent: Thursday, December 01, 2011 11:12 AM
> To: Paceaux
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Creating angled corner with CSS
> 
> Hi Frank,
> 
> If you se my example on JSFiddle, http://jsfiddle.net/8jxxH/ , you'll see
what
> I mean :-)
> 
> Thank you for your response
> 

Actually, your example is what confused me to begin with.  Because it looks
to me like border-radius: 2.

But maybe it's because there's not enough contrast between the dark gray and
the darker gray.  Or maybe because it's so small.  Perhaps a bigger example
with more contrast would help.

---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] help targeting a nested list

[Tim Climis]

> Is there some way to target the li that doesn't care what level of nesting
it is in?
 
Yes, and your example is it.  "li" selects any list item.  "li li" selects
second, third, etc level list items.

The problem is that there's a rule div#Content_box ol that sets the
font-size to .8em on the whole list so if you want your text to be the same
size as everything else, you'll have to blow it up again.  1.25em (the
reciprocal of .8) should do the trick.

---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] css measures - em grid system makes sense ?

[Tim Climis]

> 2) I'm trying to stress test a little and see the so called compounding
effect -
> but no luck so far. What am I missing? (yes I want to provoke it so that,
if it
> arrives during the development I can deal with it.)

The following should do it:

li {font-size: .8em}

A menu item
  A submenu
Another sub menu
  


Your font size should get smaller and smaller.

---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] Left-aligned navigation buttons with gradient fade on right

[Tim Climis]

> I'd like to avoid putting an image in (actually if that's the only
way then
> it's not going to happen).
 
There is no way to get a gradient in IE7 without using an image.  Or
are you just opposed to using  and a background image is okay?

---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] change colour of bullet in UL no images no spans

[Tim Climis]

> > Has styling of bullets moved on and can it be done by some simple
> css?

As Tim Arnold has pointed out, the answer is sort of, but not really.


In the CSS3 Lists modules (in working draft status) there is a
::marker pseudo element, which would allow this, but so far, there are
no browsers that have implemented it, so we just have to sit tight and
wait patiently.

But it would work like this:

li::marker {
  color: lime;
}

---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] style with border, affecting nothing?

[Tim Climis]

> > the 1024x768 area would be nice to have to show what would and
> wouldn't
> > be visible to users with that resolution.
> >
> > Is this even a good idea?
> >
> If you use Firefox and the Web Developer Toolbar, there is a
"resize"
> option.  The default is 800px x 600px, but you can add your own
> dimensions there.

For seeing what people with a particular screen resolution see, this
is a far better method, since the browser toolbars etc., take up
space.  Also, don't forget to reserve 25px or so for the Taskbar.

---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] can style sheets be too long?

[Tim Climis]

On Thursday, August 25, 2011 4:40:45 pm Kevin A. Cameron wrote:
> Now I'm confused, Tim, you had used a period between the class names...? I
> wasn't really sure of that syntax and hadn't looked into it.
> 
> ".headerLink.alt2 {
>color: orange;
>font-size: 2em;
> }"
> 

The key to mine is that the HTML is different.

I used  instead of 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] can style sheets be too long?

[Tim Climis]

On Thursday, August 25, 2011 3:09:35 pm John wrote:
> On Aug 25, 2011, at 9:10 AM, Kevin A. Cameron wrote:
> > .headerLink-alt1 a:hover {
> > 
> > background-color: yellow;
> > 
> > }
> 
> Can any character be used before "alt1"  "alt2" etc?
> 
> I could be
> 
> .headerLink_alt1
> 
> right?  are there any characters it can't, or ought not be?
> 

It can't be a period.  That would indicate that "alt1" itself is the name of a 
class. (See my example, where I actually do it that way)

It also can't be any of the other reserved CSS characters (+,>,space, etc)  It 
could be .headerLink_alt1.  Or it could be .headerLinkAlt1.  It's up to you, 
really.

---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] IE6 (was can style sheets be too long?)

[Tim Climis]

> I've been thinking that developing with IE6 in mind is in the past -
my
> experience and data shows that people using IE/Windows have left
> IE6.
> Windows has been diligent in including browser upgrades as part of
its
> "important" software updates.
> 
> Are people seeing data contraire to this?
> 

It depends on your audience.  I work primarily with international
students, so the 30% of China, and the 17% of South Korea still using
IE6 is a major concern.  It may not be for your purposes.

---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] can style sheets be too long?

[Tim Climis]

> At least that's how I think it would apply in the context of this
> conversation.
> 

This might be nitpicking but wouldn't it be more like this? (Or is
this one of the cases that makes IE6 choke and die?)

 /* Default linked header */
.headerLink {
text-decoration: none;
font: 1.2em/1 tahoma, sans-serif;
color: red;
}
.headerLink a:hover {
text-decoration: underline;
}

/* Alternate linked header 1 */
.headerLink.alt1 {
color: blue;
}
.headerLink.alt1 a:hover {
background-color: yellow;
}
> 
/*Alternate linked header 2 */
.headerLink.alt2 {
color: orange;
font-size: 2em;
}
 
 
default header
alternate header
 1
alternate header
2

__
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] Centering an entire page in the available window.

[Tim Climis]

On Monday, August 15, 2011 8:52:49 pm Ted Rolle Jr. wrote:
> > You're almost there.  First, you don't need text-align: center.  That's
> > extra.  But you do need a width on the body.  By default, it's 100% of
> > the browser, but looking at the stuff inside, it only needs to be
> > 885px.  Once you give the body a width, it'll center itself up.
> > 
> > body {
> > 
> >  margin: auto;
> >  width: 885px;
> > 
> > }
> > 
> > ---Tim
> > 
> > or, width: 234mm;
> 
> or, width: something%;
> 
> Would these be possible?
> I prefer mm; I can measure it with a tape measure, but percentages are less
> rigid.

Sure they're possible.  The OP has all the internal divs defined with pixel 
widths though, so percents and absolutes wouldn't make much sense in that 
context.

Given the choice, I'd go with % over mm.  Any of the "I can measure it with a 
tape measures" tend to be wrong, because they depend on the size of the pixels 
on your screen - which almost never matches what your operating system thinks 
it is.  For example - my monitor at work has 101 pixels per inch (I measured).  
Windows only lets me choose 96 or 120.  So my "mm"s are either too small, or 
too big, but never actually the right size.

---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] Centering an entire page in the available window.

[Tim Climis]

> I expected
> 
> body {
> margin: auto;
> text-align: center;
> }
> 
> To center the entire content on a page. I am obviously wrong.
> 
> The page is at  http://www.carlos-nunez.de/
> 
> It must be very simple.
> 

You're almost there.  First, you don't need text-align: center.  That's extra.  
But you do need a width on the body.  By default, it's 100% of the browser, but 
looking at the stuff inside, it only needs to be 885px.  Once you give the body 
a width, it'll center itself up.

body {
  margin: auto;
  width: 885px;
}

---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] 'Margin' above bullets

[Tim Climis]

> The 2nd paragraph ("The principal areas ... ) has had a 0 margin
> applied, but still displays a gap.
> 

Because that's an OL (not a UL).  The CSS isn't selecting them.  You
can edit it like this:

p { margin-bottom: 0}
p + ul, p + ol { margin-top: 0}
p + ul + li, p + ol + li {margin-top: 0}

---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] 'Margin' above bullets

[Tim Climis]

> Does anyone know how to reproduce it properly, please?

p { margin-bottom: 0}
p + ul { margin-top: 0}
p + ul + li {margin-top: 0}

What IE is doing (it seems) is putting the UL inside the paragraph,
rather than outside the paragraph.  So the default margins for
paragraphs and lists are taking effect.If you remove those
margins, you'll get something that looks the same.

---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] safari

[Tim Climis]

> And then your lowercase!important; rule doesn't seem to actually exist in
> the stylesheet, so it's not overruling the capitalize transform. (at least
> when I download and look at the styles, I don't see it...)
> 

Ah.  nevermind, just saw your last email...

__
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] safari

[Tim Climis]

> Thoughts?

Chrome 14.0.825 shows it uppercase too.

And I've figured it out...
It's the text-transform: capitalize rule around line 45.  It's capitalizing 
the M because a soft hyphen is (at least in Webkit, presumably) a word-break 
character.  Seems a bit off, imo.

And then your lowercase!important; rule doesn't seem to actually exist in the 
stylesheet, so it's not overruling the capitalize transform. (at least when I 
download and look at the styles, I don't see it...)

---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] FW: Multi column layout

[Tim Climis]

> Is there some way to make the width of those columns predictable
> without adding a non-auto width to the div?

It depends on how predictable you'd like.  From my experimenting, it
created columns with a min-width of 380px, and a max-width of
(presumably) 759px.  (How many 380px columns fit in 700px?  2.  So
make 2 equal width columns to fit the available space.)

So the width of a column should be:

columnCount = int(clientWidth/380);
columnWidth = ( clientWidth - (columnCount-1)*40 )/columnCount;

---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] [OT] Why no HTML

[Tim Climis]

On Wednesday, July 20, 2011 12:12:26 pm Ghodmode wrote:
> Ya I shouldn't have said "there aren't any", but I was hoping someone
> would comment with the name of one that doesn't.  No one has yet...
> Not even you.
> What's "TA-ships"?

Teaching assistantships.  Any grad student teaching a class, which is many.  
Are any of them on this list?  I don't know.  But there are students in 
Graphic design and computer science and Information Science, and it's 
reasonable to guess that many of those would be interested in web 
technologies, and perhaps be a part of this list.  

And they're using one of the well-known webmails... Hordemail I think.

> What do you use?

KMail.  It also supports HTML mail too, of course.

> We have smart people in this community.  If people are using a
> problematic email client, they'll know it.  Besides that, most emails
> are HTML formatted.  If they have problems with HTML in a mailing list,
> they'll also have problems elsewhere.

Yup.  And do.  I have to use Outlook at work, as an office policy.  And 
replying 
to HTML emails with inline comments is really awful.  There's really no way to 
do it that doesn't make your replies look like part of the original quoted 
email.  This entire conversation would blow up and be almost entirely 
illegible the way it's currently written if this was in HTML.

> You're right, but I still say it would be nice to be able to do things
> like this.  However, I'm learning that I'm alone in that opinion.

Not really.  I don't really disagree with your basic premise: that disallowing 
HTML email is largely outdated.  I was participating in your discussion - 
answering your questions with possible reasons from my own experience. All of 
my reasons were fringe cases, which sort of proves your argument.   The 
problem is that I don't disagree with the rest of the list's premise that HTML 
email isn't really necessary either.

You're asking why we don't.  Everyone else is asking why we should.  And as 
far as I can see, the reasons aren't that compelling in either direction.

---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] [OT] Why no HTML

[Tim Climis]

On Wednesday, July 20, 2011 7:59:45 am Ghodmode wrote:
> There aren't any contemporary email applications that can't handle HTML.  Is
> anyone using one?

This obviously isn't true, as we've heard from at least two people.  I work 
for a major American university, and the email system all our graduate 
students with TA-ships are forced to use does not support HTML emails, so 
there's a whole population that's not using HTML mail.

There are also email readers that handle plain text much better than others.  
For example, I'm assuming the replies to this are using * for bold and _ for 
underlines.  But I'm seeing them in actual bold and underlined.  And I'm 
seeing quotes in green, but I'm pretty sure no one's actually formatting them 
that way themselves.

> 
> Use of HTML and CSS enhances readability and semantics, which can in
> turn enhance accessibility.  We know this... it's what we discuss
> continually in this community.

Given the sad state of HTML rendering in emails (MS Outlook 2010 still uses 
Word as its renderer, for crying out loud), I'm not convinced that HTML email 
would actually qualify as "more accessible" than plain text.  In a browser, 
certainly.  But email readers are not browsers - they barely even rate as high 
as the proverbial red-headed stepchild of the browser family.
 
> The overhead added by HTML is insignificant by any modern standards.
 
On this, I agree (provided there aren't giant background images and signature 
avitars -- which, personally, I get a lot of)

> So, why can't we use HTML... especially in this community.

In this community, and other web-related communities, HTML email was a 
particular issue, because (at least back in the day -- probably not so true 
anymore), typing HTML into an HTML email resulted in HTML being displayed.  
Not the HTML code that we all actually want to see, but the table, or green 
text, or what-have-you that the HTML would produce.  As you can imagine, that 
could be particularly problematic.

As for highlighting blocks of code -- we've all been doing this long enough to 
recognize CSS when we see it.  It doesn't need a background color.  And 
besides, it's almost always more useful to just give a link to the site and 
some line numbers from the code.

---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] 100% height issue, and graphic placement q's

[Tim Climis]

> would you please clarify what you have below as "body:after"
> 

This is what's known as CSS Generated Content.  A Google search will
turn up details and other examples

> Is this a different tag I'd be applying?

Not exactly.  Basically, it's a way to add stuff to a page with CSS
(and without adding more HTML), for things that are for display only.
In this example, there is now a period after the body tag with the
applied styles (a big gray box).

A more simple example might be 

h4:after {content: ':'}

which would add a colon after all your h4 tags.

---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] Z-index trouble

[Tim Climis]

> To put them behind 'category', give them a negative z-index (-1). If you
> want them behind the green box, omit the z-index on the green box.
> 

Thanks Philippe,  that worked nicely for my example case.

However, all my troubles are not solved, because it appears that I made my 
example page too simple.  I'm running into issues with my real-world page, so 
I'll try and find someplace to put it up tomorrow, and see if I can get some 
additional assistance.

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

[css-d] Z-index trouble

[Tim Climis]

I have a z-index issue (this is for a site in development, so I've only tested 
in Chrome -- I'm guessing it's the same everywhere, and that the problem is 
me).

i don't have a public server, so I've cut the code down to a minimum, and 
pasted it at the bottom.

As you can see, the green #header has a z-index of 2, while the ol containing 
the Items has a z-index of 0.

I think that the Items should be beneath both the category text, and the green 
block (ie not currently visible).  however, they are, in fact on top of 
everything.

Why?  And how do I fix it?

(I'm pretty sure I've run into this before, and perhaps even asked the list, 
but I was unable to find anything in the archives, so if this is a repost, i 
apologize in advance).

---Tim

Code:




Test

ol {
list-style: none;
padding: 0;
}

#header {
height: 300px;
background-color: green;
z-index: 2;
position: relative;
}

.nav {
color: red;
font: bold 2em sans-serif;
position: absolute;
bottom: 0;
width: 100%;
}

.nav li {
position: relative;
}

.parent ol {
position: absolute;
top: -100%;
left: 0;
color: blue;
z-index: 0;
}







Category 1

Item 1
Item 2






__
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] Why are "color: lime" 's white ?

[Tim Climis]

On Saturday, July 9, 2011 5:47:09 pm Aaron Gray wrote:
> Why are 's white ?
> 
> http://www.aarongray.org/CSS-Discuss/hr.html
> 
> ~~~ hr.html ~~~
>  "http://www.w3.org/TR/html4/strict.dtd";>
> 
> 
>   
> body, hr {
>   background-color: green;
>   color: lime;
> }
>   
> 
> 
> 
> 
> 
> 
> 
> ~~~
> 

Color changes the text color.  HR's don't have text.  It's counter intuitive, 
but HR's are a short empty box, with a border.  so changing the background-
color or the border-color properties will get you HRs in a different color.

---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] Jump effect on icons

[Tim Climis]

On Saturday, June 25, 2011 4:43:04 pm Gabriele Romanato wrote:

> For experienced developers: what happens with CSS3 transitions? Is it
> possible to create a smooth jump effect using transitions?

Yes - with just one more line (and the appropriate vendor prefix, of course).

#social a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
transition: background-position .25s ease-out
}

---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] Issue with background images on small devices

[Tim Climis]

> I reangearred my site http://www.goeldi.eu/abusart without absolute
> positioning, and I have the same problem with my background-image:
> it's cut off on the right side when the browser window is too small
> and I scroll to the right. I do not understand why this happens.
> 
> So still something wrong?

Yes...  The width with your background image is 100% (of the window),
while your text is 745px.  If 100% of the window is smaller than
745px, then the background image stops at 100%, and the text keeps
going.

You could set your container to have a min-width of 775px.  Or (the
better option, imo) you could rework your page so that the content is
more flexible (take off the width and the height, and use a titled
background image, perhaps).

---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] Overriding ID styles with a class?

[Tim Climis]

> 
> Thanks for any help that can be provided! I am obviously overlooking
> something.

If you use numbers as the first chracter of a class, they have to be escaped, 
(.\32 col) so it might be easier to rename your class to .twoCol instead.

If browsers are doing the right thing, they are ignoring your rule, since it's 
an invalid name.

---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] Making A Link Disappear When Revisited By A Reader

[Tim Climis]

On Friday, June 10, 2011 2:37:38 pm Brian Kardell wrote:
> Could you not use visited?
> 
> a:visited{
> display:none;
> }
> 

No.  that would be the exact opposite of what the OP wants.  that would make 
the ending the reader chose inaccessible (and after choosing both endings, 
*all* endings inaccessible).

Personally, I don't think CSS is the correct solution for this -- to work 
effectively, it would have to remember across browser sessions, meaning a 
cookie or something.  I'd be doing this in the server-side language that 
builds the page.  If no link chosen, display both, and then make a record of 
which was chosen, stored either on your server, or on the reader's computer.  
And then check that file on the next page visit, to display the proper link.

---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] CSS stylesheet with Google fonts doesn't validate?

[Tim Climis]

On Thursday, May 26, 2011 7:31:25 pm Steve Caramia wrote:

> Line 3, of course, is font: 65%/1.4 "PT Sans" "Trebuchet MS", Arial,
> Helvetica, sans-serif;
> 
> Again, if I delete "PT Sans," if validates just fine.One step
> forward. 3/5ths of a step back.
> 

There should be a comma between "PT Sans" and "Trebuchet MS", just like 
there's one between Trebuchet and Arial, Arial and Helvetica, and Helvetica 
and sans-serif.

---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] [WD]: Sticky footer help wanted

[Tim Climis]

> Oooops.
> It would  help if I gave you the URL, would it not?
> 

Indeed.  

> valdobson.co.uk/test
> 
> 
> On 8 May 2011 15:22, Val Dobson  wrote:
> > I'm trying to develop a simple header/ 2 col / footer layout using
the
> > template from stickyfooter.com
> > But I cannot seem to get rid of the vertical scrollbar.    So
please,
> > could some of you good folk take a look and tell me where I'm
going
> > wrong?

It looks the#spacer div (and the paragraph inside it) is causing it -
since it's always below your footer, and thus off screen.  After you
make that go away, then, I think, once you remove the borders around
all the various parts, it'll start fitting on a page without scroll.

---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] Styling Submenus on a Dropdown Menu

[Tim Climis]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Gates, Jeff
> Sent: Thursday, April 28, 2011 11:19 AM
> To: Chetan Crasta
> Cc: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Styling Submenus on a Dropdown Menu
> 
> On 4/28/11 11:02 AM, "Chetan Crasta" 
> wrote:
> 
> To apply styles only to the first level s, use this selector:
> 
> #primary-nav .tab_navigation > ul > li
> 
> 
> I'm sorry, Chetan, but I'm not getting it. Is "#primary-nav
> .tab_navigation > ul > li" the actual way you are suggesting writing
the
> id? And, if so, which of the styles are you suggesting I apply it
to?
> 
> I tried substituting that selector verbatum for all styles of the id
> #primary-nav. That didn't work. Then I tried it with just the li and
with
> just the li and ul styles. That didn't work. Then I got rid of the
">"
> (thinking you meant apply "#primary-nav .tab_navigation" to just the
> styles for the ul and the li. That didn't work. So I'm stymied.
Could you
> explain what you mean in a bit more detail. Thanks.
> 

#primary-nav.tab_navigation selects the id.
#primary-nav.tab_navigation ul selects all the uls in the id.


   



so it selects #list1, #list2, and #list3.

#primary-nav.tab_navigation > ul selects only top level uls in the id
(#list1, and #list3, but not #list2).

So #primary-nav.tab_navigation > ul > li would select the list items
that are in #list1 and are not in #list2.

---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] Reflection effect

[Tim Climis]

Yeah... I was about to point out the same thing.  A 180 degree
rotation is not the same as a vertical reflection.  The "e" should be
below the "e", not the "s."

Really, to get the desired effect, you'd want transform: scaley(-1);
It works in webkit.  Haven't tried anything else.

---Tim

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Charles Miller
> Sent: Friday, April 15, 2011 1:58 PM
> To: css-discuss discuss
> Subject: Re: [css-d] Reflection effect
> 
> 
> On Apr 15, 2011, at 12:16 PM, David Laakso wrote:
> 
> > Fwiw, some captures...
> > 
> > ~d
> 
> 
> Am I right that none of them look like a true reflection would look?
> That the bottom image is in no cases a vertical flip of the top
image?
> 
> It "challenges" my mind to think of how these might be used. (Though
> if you reply that these are research results and not applied
anything, I
> will shut up promptly.)
> 
> Offered not in criticism but in curiosity.
> 
> Chuck M
> 
> 
> __
> 
> 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] funny border after click event - can i fix this?

[Tim Climis]

On Wednesday, March 09, 2011 12:31:57 AM Matthew P. Johnson wrote:

> What formats this?
> 

outline.

To remove it you can use

:focus {outline: none}

but that will cause the accessibility issues that Philippe already 
mentioned.

---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] How to replace tables?

[Tim Climis]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Geoff Lane
> Sent: Friday, February 18, 2011 1:26 PM
> To: CSS Discussion
> Subject: [css-d] How to replace tables?
> 
> Hi All,
> 
> I'm at my wit's end. I've started putting together an AJAX-driven
site
> (on local servers only right now) and one of my call-back scripts
needs
> to update a few rows of a table. So I tried encapsulating the
affected
> rows in a DIV, but when I update that the old table rows remain and
> the new table rows appear almost as running text above the table.
This
> is HTML 4.01 Transitional and the W3C validator tells me that I'm
doing
> it wrong as the DOM doesn't allow a structure like:
> . Unfortunately, I can't update the
> entire table as it contains stuff that isn't known to the
server-side
> script.
> 

While CSS might be able to come to the rescue, the thing that occurs
to me immediately is .

 is the oft-ignored/forgotten row container element.  You can
have as many s as you want in a table.

so you'd have 



...


No need to go crazy with the divs and the table layout properties.

---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] Positioning images within a table cell

[Tim Climis]

> > Maybe this will do...
> > 
> ---
> 
> My initial reaction was, "Wow! Many thanks for that!" It seems so
> simple yet seems to work in FF, IE, Chrome, and Opera. Yet when I
> tried something similar the images in the right-hand column were all
> over the place!
> 

Georg's solution relied on the table being at the top of the page.  To
fix it, add a "position:relative" rule to the table.  Then his
solution should work beautifully.

---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] Drop-down navigation without javascript

[Tim Climis]

On Thursday, January 27, 2011 11:14:07 pm Alan Gresley wrote:
> On 28/01/2011 9:16 AM, Jess Hardy wrote:
> > Hello everyone,
> > 
> > I am currently looking for a solution for creating a single level
> > drop-down that can be activated by the keyboard but does not use the
> > standard "suckerfish" approach.
> > 
> > I had come across one previously but can not find the article.
> > 
> > This should be possible using the :focus and/or :active functions, or am
> > I wrong?
> 
> Keyboard accessible but maybe unnerving for some. Even works in IE5.5.
> 
> 

I had a similar example (wouldn't work in IE 5 or 6 though).  I'd post it, 
except that I accidentally deleted my play server and didn't have a back up.  
I'm kind of glad that "being able to access every item, even if it's not 
pretty" counts as keyboard accessible, because I'd been wondering about that.

---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] Graphic background issue

[Tim Climis]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of "G.Sørtun"
> Sent: Sunday, January 23, 2011 5:05 PM
> To: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Graphic background issue
> 
> 
> > I created a graphic in Photoshop,using a transparent background,
but
> when I saved it as a .jpg it now has a white background. I want to
> display it on a web page. If I save the graphic as a .gif, the edges
are
> gnarly.
> >
> > Suggestions?
> 
> Save it as 24bit PNG.
> 

Just explanation as to why...  jpg doesn't support transparency (which
is why that one has a white background), and gif only supports
transparent or opaque, but not in between (translucent) (which is why
you get  the jagged edges -- it doesn't fade)

---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] drop down vertical nav?

[Tim Climis]

On Tuesday, January 18, 2011 6:33:03 pm Matthew P. Johnson wrote:
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org
> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Matthew P.
> Johnson Sent: Tuesday, January 18, 2011 3:31 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] drop down vertical nav?
> 
> Can a drop down effect for a nav be created using pure css?
> 
> 
> 
> Something like the following link without using any sort of script.
> 
> 
> 
> http://jquery.bassistance.de/treeview/demo/?1
> 
> 
> 
> 
> [Matthew P. Johnson] the graphics not necessary just the text and drop 
down
> for sub nav's.

No.  The issue here is that CSS has no "after click" state.  

It could (in theory -- I haven't tried) do this if you wanted the folder to 
extend when you hover over it (:hover), or when you tab on to it with the 
keyboard (:focus) (including the graphics), but it can't do it on a click.  
You need Javascript to catch the click and do something with it (ie switch the 
CSS from display: none to display: block).

---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] Overriding styles

[Tim Climis]

On Sunday, January 16, 2011 03:52:39 am Alan Gresley wrote:
> I did a few test and found that you can use just simple type selectors
> also. This CSS,
> 
> body { background: lime; }
> 
> will override this.
> 
> 

Nice to know.  I'd been assuming that bgcolor was similar to 
style="background-color" in specificity.  I hadn't tested it though, proving 
that what they say about assuming is true.

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

[css-d] Overriding styles

[Tim Climis]

I ran into an interesting application of CSS yesterday, that, while not useful 
for most people, might be in the "fun to know" category for others.

I write software that interfaces with a government website through an 
embedded browser, and we're working on a UI overhaul.  Unfortunately for us, 
the government site is ugly as sin, but someone had the idea of substituting 
our own stylesheet to try and give it a make-over.

So I set to doing that, but got a bit discouraged when I looked at the source 
and saw things like:



But then I noticed that in Firebug, this was translated into CSS as 

td[valign="top"] {
  vertical-align: top;
}

td[bgcolor="#445588"] {
  background-color: #458;
}

So I put the following rule in the stylesheet:
[bgcolor] {background-color: transparent}

and it worked!  All the HTML elements with bgcolor were reset!

So, apparently, it's possible, using CSS, to override element styles not set 
using CSS.  I can't really think of any common usages for this, but it might 
be handy some time if you need to redo a site and don't have control over 
the HTML source.

---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] Hello to the Group

[Tim Climis]

On Thursday, January 06, 2011 04:00:03 pm I wrote:
> Laakso occasionally complains, but less often now than he used to.  

David did not take this in the tongue-in-cheek way in which it was 
intended, and so I would like to publicly apologize for that comment.

I'm sorry.  There was no offense intended, but I acknowledge that it was  
unfair.  I, too, have been known to put in a friendly reminder about bottom 
posting from time to time, as have several others.

---Tim
__
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] Hello to the Group

[Tim Climis]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of Charles Miller
> Sent: Thursday, January 06, 2011 10:24 AM
> To: css discuss discuss
> Subject: Re: [css-d] Hello to the Group
>
> 2.  the method when you quote is to put your words Below the
> quotation (I prefer the new before the old)
> 

I believe that 2 is not a rule, but a recommendation.  Laakso
occasionally complains, but less often now than he used to.  It's
certainly not as strictly enforced here as it is over at WD.  As
Eric's pointed out before, vicious snipping of irrelevant parts is far
more appreciated than bottom posting.

---Tim

__
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] div element inside td : can't get height to 100%

[Tim Climis]

On Sunday, September 26, 2010 3:54:07 pm Philip Taylor (Webmaster, Ret'd) 
wrote:
> David Laakso wrote:
>  > Don't be silly, Philip..
>  > 
> 
> The essence of my question was : what if the contents
> of the second div do not have the same natural height
> as the contents of the first ?
> 
>  http://web-consultants.org.uk/Sites/tests/Laakso-2.html
> 

To be fair, it *was* lying and cheating... :)

---Tim
__
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] property for aligning vertical text in a div

[Tim Climis]

On Tuesday, September 21, 2010 11:39:40 pm Lisa Frost wrote:
> This works much better than fiddling with the top padding on the  tag.
> However i don't understand positioning very well apart from floats.
> So just to clarify for me:
> 
> Position relative on the footer div - what's it relative too?
> 

It's relative to where it would be normally.  Since you haven't specified a 
top, left, bottom, or right, it's position doesn't change (which is what we 
want).  But if it doesn't do anything why is it there?

Because absolutely positioned elements are positions relative to their nearest 
positioned ancestor (anything with position: relative, absolute, or fixed.)  so 
when you use the bottom: 0 below it'll be at the bottom of the div, instead of 
the bottom of the .

> Why do we add a 0 on the absolute position.
> Does bottom not mean right at the bottom of the div?

Bottom: 0 means right at the bottom of the div.  Bottom: 15px would mean 15 
pixels above the bottom of the div.  Bottom without a value would be ignored 
completely.

---Tim (but a different one)
__
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] Image scaling

[Tim Climis]

On Saturday, September 11, 2010 6:49:33 pm Cheryl Smith wrote:
> You do know that you can use server-side processing to scale images, yes?
> 
> Cordially,
> David
> -
>  
> Server-side processing??
>  

Using a server side language (eg php, perl, asp, etc) to shrink images, and 
save them to the server.  That way you shrink the image once and use it over 
and over again, rather than sending everyone who visits your site a big image 
(slowing page load) and then making their computer work hard to shrink it 
(slowing page load even more).

---Tim
__
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] Errors

[Tim Climis]

On Saturday, September 18, 2010 1:03:37 pm David Laakso wrote:

> > The CSS *below* is now valid.
> > Validate the markup, too.
> > http://validator.w3.org/
> > If it is not working as intended with valid CSS and valid markup,
> > provide a clickable link to your URL.
> > Btw, I know from nothing about the so called "AM browser."

Google tells me that it's IE6 with tabs and AdBlock.  So you shouldn't except 
it to work in other browsers (except IE6).  IE6 is old, out-dated, and buggy 
to boot.  For instance, it will center things when it shouldn't.

For instance, img.AncelKeys {width: 60px; height: auto; align: center;} 
shouldn't work.  Actually, it probably doesn't, since "align" doesn't exist in 
CSS.  "text-align" does.  and if you apply text-align: center to an image in 
IE6, it will center, I'm pretty sure.  But it shouldn't.  That's a bug.

It should center the text inside the image tag (of which there is none).

If you want to center the image, you need to put text-align: center on the 
image parent (don't know what this is, because you didn't include any of the 
HTML) or add "display: block; margin: auto;" to your CSS rule, and take out 
the align: center.

If you provide a link to your web page, we can see how everything (CSS and 
HTML, and Javascript, if you've got it) are interacting together to create the 
whole page.  We can see what the actual behavior is, and figure out what you're 
trying to accomplish.  and then we can help fix it.

---Tim
__
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] two equally high divs, with not equally high content

[Tim Climis]

On Friday, September 17, 2010 5:24:29 am Olli Salmu wrote:
> How can i make two divs, that are next to each other, equally high. When
> they have different content?
> So I want the other div to match the height of the other one, even when the
> other div had 100 lines of content, and the other had 0.
> 
> I've unsuccesfully tried including both divs inside one main div and giving
> the divs a height of 100%.
> 
> ideas?

How are you putting your divs next to each other?  If it's with floats or 
absolute position, that takes them "out of the flow", which means they no 
longer affect the main div.  Unless you're specifying otherwise, some how, my 
guess is that your main div has a height of 0 as a result (Firebug, the IE 
developer toolbar, or the Webkit Developer Console are your friends here).

Try putting overflow: hidden on the main div, and see what happens.  Also, send 
us a URL, so we can take a closer look.

---Tim
__
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] Google Doodle

[Tim Climis]

I was just taking a look at the source for today's Google Doodle, and noticed 
that the circles were CSS.  Does that mean that in IE, they were squares?  
(Sorry, I can't check with my Linux box, or my girlfriend's Mac)  Or did they 
do some image replacement with browser sniffing?

---Tim
__
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] Need help with width please

[Tim Climis]

> I want it to load quickly and if I drop the resolution down it
> loses the crispness. Being an artist, he's not pleased with that. I've
> tried using % and em in the css file to get the image a bit smaller, but
> it gets all messed up when I do. The main image is 1024 wide and it
> probably needs to be more like 1000 or even 960 to fit width wise. 
> Any suggestions? Would this be best asked on the WD list?
>  

You might get a wider variety of answers on WD, but since this is CSS-D here's 
a CSS answer.

A URL would help (as always), but what if you leave the image as one big 
thing, set as a background image on the body, with a position of center 
center?

body {
  background: url('some/url.jpg') #color no-repeat center center;
}


It won't load quickly, but specifying the color will make it less painful to 
wait for.  the color will show up until the image has finished loading, and 
would work well if the background is predominantly one color.

center positioning the background (which may be the default, so you wouldn't 
need to specify it) would let the page shrink, and just chop off the extra 
background.

Just a thought, and depending on the background, may not work at all.

---Tim
__
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] Playing with CSS3 transitions

[Tim Climis]

On Monday, August 23, 2010 6:51:34 pm Tim Climis wrote:

> I'm going to play a little more, but then I'll put up some demos.

Okay, so I wrote up what I had at 7:00 this evening.  But what I've gotten 
since then is pretty nifty.  Unfortunately, it's almost 1:00am, so it'll have 
to wait a couple of days for a write-up and a demo page.

But here's effect #1.  http://timclimis.blogspot.com/2010/08/pure-css-dropdown-
menus-with.html

---Tim
__
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] Playing with CSS3 transitions

[Tim Climis]

On Monday, August 23, 2010 5:27:35 pm David Laakso wrote:

> min-height?


Well, that resulted in something interesting...

Here's the code I used.

li.parent ul {
/* irrelavant code snipped */
height: 0;
-webkit-transition: all .3s ease-in;
}

li.parent:hover ul {
min-height: 4em;
height: auto;
}

The result was that on hover, the menu appears with a fade-in (even without 
specifying opacity - not what I expected) and then, on unhover, it fades back 
out AND wipes up.  On slowing it down, it immediately shrinks to 4em, and then 
wipes up from there.  But at the .3 seconds, you can't tell that, and it looks 
pretty good.

I'm going to play a little more, but then I'll put up some demos.

---Tim



__
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] Floating images - understanding the details

[Tim Climis]

On Thursday, August 19, 2010 6:51:28 am Bobby Jack wrote:
> --- On Wed, 8/18/10, Keith Purtell  wrote:
> > First, I don't understand width.
> > 
> > Second, I especially don't understand how he has
> > illustrated margin.
> > 
> > Third, the padding. Why is it necessary and how is it
> > affecting the the flow of text around my images?
> 
> I don't think anyone's mentioned Firebug yet, which must be a first! It's a
> Firefox plugin which is excellent as a debugging tool, a design tool, and
> a training tool for those new to CSS. Firebug will (to some extent) answer
> your 3 questions - and many more - by providing visual feedback, in your
> browser, of how various styles affect the design.
> 
> http://getfirebug.com/
> 
> I recommend it as an absolute must for any web design work.
> 

there's also the Webkit developer console, which is included in Chrome and 
Safari, and prvides the same functionality (but isn't an add-on), and the 
deveolper toolbar in IE8, but I can't remember if that's an add-on or not.

---Tim
__
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] 0pt is wrong, right? And IE9 is doom, right?

[Tim Climis]

> 2.
> IE9 is rumored to arrive in 2011.
> IE9 will only run with Vista and later Windows OSs.
> Over 68% of Windows users are using XP (see:
> http://socialmediaseo.net/tag/internet-explorer-9/ ), myself included,
> because I don't see why I should toss a perfectly fine scanner for which
> there are no drivers after XP, and because my PhotoShop 6 won't run on
> those later systems either, and I suspect many others face the same
> issues. This means not only will hacks have to be developed to deliver
> styles for the different flavors of IE, 

Those hacks already exist.  They make up about half the traffic on this list.  
MS has even provided us with conditional comments, a fairy reliable way of 
telling which version of IE we're using.  IE 9 is the least of our worries.  
It's the people that still use IE6 -- the people that haven't updated their 
browser in a whole *decade* that are annoying to deal with.

---Tim
__
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] IE8

[Tim Climis]

On Thursday, August 05, 2010 8:06:55 am bruce.som...@web.de wrote:
> I test new webpages with several browsers, including IE6 and IE7 (on
> separate machines).
> 
> "Windows Live" is now suddenly touting "The new Windows Live Internet
> Explorer 8 Browser" in a newsletter.

I don't know that I'd call IE8 new...  IE9 is supposed to go beta next month 
and be released early next year I think...

But CSS support in IE8 is pretty good (at least for CSS 2.1).  Perfect, 
according to MS.  CSS3 is still mostly unsupported though.  but a lot of that 
is coming in IE9.

Quirksmode has good charts on browsers' capabilities (CSS and otherwise): 
http://www.quirksmode.org/compatibility.html

You can't have multiple installs of IE, as always, but MS does provide free VM 
images with IE6 and IE7 for development purposes.  I don't have the link 
handy, but Google will turn it up for you.

---Tim
__
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] :hover :schmover

[Tim Climis]

On Monday, August 02, 2010 10:18:22 pm Chip Meyer wrote:
> What I'm Trying to Do
> Have a list within which each item consists of a thumbnail image and some
> descriptive text wrapping around it. When a user hovers the thumbnail, a
> larger image pops up.
> 
> What's Not Working
> The larger image pops up when the user hovers over any part of the list
> item, which includes the descriptive text. This is more than a little
> obtrusive. I know that the page is working as it is currently coded to, but
> I have been unable to change to what I want (see above).
> 
> What I Have Tried
>  - Applying :hover to the thumbnail img rather than the li
>  - Wrapping the image in various stuff (e.g. , , ) and applying
> the :hover to those tags
>  - Applying a dedicated class .hoverTrigger:hover to the thumbnail img
> 
> Below, you will find links to the markup and css.
> 
> My main priority is to achieve the desired effect, but I am also curious
> about why my above solutions did not work, which I think is a corollary of
> "Which elements can you apply :hover to, and in which browsers?"
> 

It took me a little bit, but once I figured it out, it was a real faceplam 
moment.

Let's take a look at your selector:

#notecardGallery ul li:hover ul li

That's fine and dandy, as long as you don't mind massive amounts of hoverable 
space.

Now, let's take a look at what I presume you changed your selector to:

#notecardGallery ul li img:hover ul li

Let's think about this for a minute.  This selects the li in the ul, that's 
*inside* your image tag.  What's inside your image tag?  for that matter, how 
do you even put things in a self-closing tag? ;-)

With this insight, I think we can see why it didn't work in the anchor tag 
either.  In fact, in order to make this effect work, and still have valid HTML, 
we have to change the markup a bit.  (To make it work as written, we'd have to 
use javascript, I think).

I'm thinking something like:






In the Womb of God
If I paint the same experience about which I write, the painting 
follows the writing, which follows the experience. Except for this painting. I 
had intended to paint God and me staring lovingly at each other in prayer. 
First I painted myself. Then when I started to paint God’s face, I realized I 
was painting myself in the womb of God.  What a sense of intimacy, yet I still 
yearned for more, and so wrote the following poem (January 6, 2009):


#notecardGallery a img.big {
display: none;
position: absolute;
top: 0px;
left: 76px;
font-weight: bold;
z-index: 1;
}
#notecardGallery a:hover img.big {
display: block;
}

---Tim
__
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] place a div at the bottom of another div

[Tim Climis]

On Friday, July 23, 2010 7:27:04 pm Marcin Herda wrote:

> I want to place a vertical bar across the page (at the bottom of the header
> div.
> 

Just 3 little changes:

> #header {

position: relative;

> width: 100%;
> height: 154px;
> color: #ff;
> }
> #bar {

position: absolute;

> width: 100%;
> height: 35px;

 bottom: 0; (replaced vertical-align: bottom, which only applies to 
inline elements and table cells)

> background-color: #6F9FC8;
> }
> 

---Tim
__
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] Centering a row of images

[Tim Climis]

On Thursday, July 22, 2010 9:05:29 pm Tim Climis wrote:

Oops.  Just one little edit.

> #logo a img {
>   display: block;
>   border: 0 none transparent;
margin: 0 auto;
> }
> 

__
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] Centering a row of images

[Tim Climis]

On Thursday, July 22, 2010 8:21:40 pm Steve Caramia wrote:
> I think this is a simple one:
> 
> Across the bottom of this page I want a row of logos on a background
> that extends 100%. I was able to do it with a table. Is there a way to
> do it in CSS?
> 

this should result in the exact same thing...


http://www.angieslist.com/angieslist/companylist/seattle/electrical.htm?cid=ssabadge";>

Electrical in Seattle

  
 
 




#logos {
background-color: #4A6060;
clear: both;
margin: 0px;
padding: 2px;
text-align: center;
}

#logos a {
color: #ffc;
font-size: 0.8em;
font-weight: bold;
font-style: italic;
text-decoration: none;
}

#logo a img {
display: block;
border: 0 none transparent;
}

#logos a,
#logos > img {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 0 20px;
}

---Tim
__
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] lost background

[Tim Climis]

On Friday, July 16, 2010 6:40:11 pm TriState Advantage, Kris Jacobson wrote:
> Thank you, this worked but I don't understand why. I went back to my
> references and they said the overflow property is for when the content is
> larger then the settings on the space allows. But I had the settings of
> the box at auto. If I add more content to the box then will it be hidden
> as this is the area I will be adding to?
> 

Overflow: hidden is a funny thing.  If you apply overflow: hidden to the body 
tag, then if your page goes outside of the window, it won't scroll.

But on anything else, in order for things to be hidden by overflow: hidden, you 
need to specify dimensions (height especially).

Since you have overflow: hidden on your container, but no height, it makes the 
container expand to fit everything in it (including floats, which is nice 
because those aren't usually contained, since they're out of the normal flow).

I believe that any non-auto overflow value will do this, but with overflow: 
scroll you get scrollbars, even if you don't need them.

I haven't looked at your page, but my guess is that your footer was floated, so 
the background wasn't showing up because the footer was outside of your 
container, but now you get the background because the float is inside the 
container.

---Tim
__
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] anchor color help

[Tim Climis]

On Friday, July 16, 2010 11:29:55 pm Ian Dutton wrote:

> how do i get my anchors in the header and footers to be white and the
> anchors in the body to be blue?
> 

a {color: blue;} /* not really needed, since blue is the default */

#header a,
#footer a {
  color: white;
}

You'll need to change your header and footer selectors to match whatever the 
id or class on your header and footer actually are.

---Tim
__
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] browser reports please [blakeys]

[Tim Climis]

> Could css-d give me some examples of what you think are the best kind
> of declarations for items such as menu links (horizontal, 1 line)
> using ratios and whatever else so that I do not run into problems with
> min font sizes. It'll just give me a starting point and then I can
> play about with it in fire-bug.

http://www.uselessgeography.com/

Here's my personal play site.  It does not work in IE6 or 7, only because I 
didn't feel like making it do so.  It uses inline-block, which isn't that hard 
to fool IE into pretending to support.  But for a site I do on my own time for 
my family's enjoyment, it doesn't matter.

I just blew up my font size to 32px, and it handled it alright, although the 
menus are longer than the page, so you have to scroll to get to the end of 
them (could be an accessibility problem if you don't have a scroll wheel).

But the fonts are all set as a percentage of the configured default font size, 
as are the heights, widths, and it looks like borders too...  I don't remember 
doing that, but the border sizes increased when I changed the font size.

---Tim
__
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] background image - repeat, flip horizontal and vertically

[Tim Climis]

On Tuesday, July 13, 2010 7:24:41 am Chris Blake wrote:
> Hi,
> 
> Since that took a while I have done some research.
> Flipping it seems impossible so I went for the 100% width, maintain
> aspect ratio idea.
> The answer isn't great here too but there is some hope in the way of
> CSS3 background-size: 100%; (that will keep the aspect ratio). Only
> supported by Safari, there is a firefox one (-mozilla blah blah blah)
> but I couldn't get it to work. It'll need javascript but I couldn't
> even find an answer with that that didn't involve adding wrappers,
> even tables!. Case closed :-(
> 

What about just doubling the image?  Go into any simple graphics program, 
select all, copy, make the image bigger, paste, flip, and then you have 
something you can repeat.  It would make the image twice as big, which could 
be a problem depending on your target audience's bandwidth.  But it would be a 
lot easier than the other options you presented.

---Tim
__
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] Safari 5 / Win XP crashing ?

[Tim Climis]

On Monday, July 12, 2010 11:59:34 pm Al Sparber wrote:
> From: "Philippe Wittenbergh" 
> 
> > Does this test case crashes Safari 5 on Win XP for anyone, or is it just
> > me ?
> > 
> > 
> > 
> > This combination causes the issue:
> > p, dt, dd, li {text-rendering: optimizeLegibility;}
> > p {margin: .5ex 0 0;}
> > 
> > (and: does it crash Google Chrome 5 as well ?)
> 
> It crashes both browsers (Win Vista 64-bit). I assume on Windows 7, as
> well.

I can also report Chrome 5 on Linux.

---Tim
__
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] Tool to tell me where a rule is used

[Tim Climis]

On Friday, July 09, 2010 2:20:21 am r...@catjuggling.com wrote:
> So, are you wanting a tool that will look through the CSS and report which
> of the classes or ids do, or don't, show up in the HTML?
> 

No.  She's trying to find a tool that will look through the CSS and report 
which *rules* show up in the HTML.  She has specifically stated many times that 
she isn't using classes or id's much in her code, which leaves descendant 
selectors and the like.

For example:
"ul p span" or "ul li:nth-of-type(7)".

Are those selectors used? They have no classes or id's to search on, which 
makes them very hard to find using traditional find tools.

---Tim
__
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] OT: Webkit Browsers

[Tim Climis]

On Saturday, July 03, 2010 9:56:25 pm david wrote:
> Tim Climis wrote:
> > On Saturday, July 03, 2010 7:35:47 pm Gail Issen wrote:
> >> I hate to show my ignorance. But, I'm not familiar with the tern "webkit
> >> browser". I've done a Google search and the results still leave me
> >> confused. Would someone please explain the term?
> > 
> > As Felix explained, there are many browsers (probably hundreds or
> > thousands), but most are based on 4 different rendering engines
> > (Trident, Gecko, Webkit, and Presto).  There are others, but they don't
> > have much usage.
> > 
> > However, among the browsers with the most usage (IE, Firefox, Chrome,
> > Safari, and Opera), there are two browsers that share the Webkit
> > rendering engine (Chrome and Safari).  Since they share the same engine,
> > they share most of the same bugs and behaviors, so rather than say "I
> > have such and such that works in Safari and Chrome," it just gets
> > shorted to "I have such and such that works in webkit."
> > 
> > There are other webkit browsers as well (Arora, Epiphany, and coming
> > soon, you can set up Konqueror to use webkit as well, I hear).
> 
> It's not a "you can set up Konqueror" to use Webkit. KDE4's Konqueror
> uses Webkit, no other option. The KHTML engine was used up to KDE3.

Uhh, not according to KDE.  KHTML still exists in 4.4, and also in 4.5.  But 
in 4.5, you will have the option to run Konqueror with the webkit engine.  So 
it says in the 4.5 Beta 1 release notes:

http://www.kde.org/announcements/announce-4.5-beta1.php

So it appears that KPart uses webkit, but Konqueror itself does not.

---Tim



__
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] OT: Webkit Browsers

[Tim Climis]

On Saturday, July 03, 2010 7:35:47 pm Gail Issen wrote:
> I hate to show my ignorance. But, I'm not familiar with the tern "webkit
> browser". I've done a Google search and the results still leave me
> confused. Would someone please explain the term?
> 

As Felix explained, there are many browsers (probably hundreds or thousands), 
but most are based on 4 different rendering engines (Trident, Gecko, Webkit, 
and Presto).  There are others, but they don't have much usage.

However, among the browsers with the most usage (IE, Firefox, Chrome, Safari, 
and Opera), there are two browsers that share the Webkit rendering engine 
(Chrome and Safari).  Since they share the same engine, they share most of the 
same bugs and behaviors, so rather than say "I have such and such that works 
in Safari and Chrome," it just gets shorted to "I have such and such that 
works in webkit."

There are other webkit browsers as well (Arora, Epiphany, and coming soon, you 
can set up Konqueror to use webkit as well, I hear).

You'll also hear mention of Gecko, occasionally, to talk about all of the 
browsers Felix mentioned at once, rather than listing them all out separately.

---Tim
__
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] css possibilities on a described layout - scrolling one given div

[Tim Climis]

> Probably a fixed position on the left side, and then, the scroll will
> "seem" to affect only the right side?
> 

That's the way i would do it.  It won't work in IE6, since that browser 
doesn't support position: fixed.  so if you need it in that browser too, I 
think you'll have to go with a script.

---Tim
__
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] Drop Shadow for a div with rounded corners

[Tim Climis]

On Monday, June 28, 2010 11:17:28 pm Rebecca Gessler wrote:
> Hi everyone,
> I am trying to add a drop shadow to my container div that has rounded
> corners on the top and bottom. I am using the 960 grid system:
> http://sasmg.org/sasmg/
> Basically the entire thing should be in a drop shadow (from the tree image
> down to the bottom). I have looked for tutorials online but my case seems
> special due to the rounded corners.
> 
> Thank you for any suggestions you can provide,
> Becky G

CSS 3 is an option that would make this very very easy, but only if you don't 
mind not having the drop shadow and rounded corners in any version of IE.

#container {
  position: relative;
  overflow: hidden; /* make the container surround the page properly */

  -moz-border-radius: 20px; /* change this to whatever number you actually 
need -- this line is for Firefox */
  -webkit-border-radius: 20px; /* for older versions of Chrome and Safari */
  -khtml-border-radius: 20px; /* for Konqueror */
  border-radius: 20px; /* for newest versions of Chrome, Safari, and Opera, 
and future browsers */

  -moz-box-shadow: 3px 5px 2px #ccc; /* for Firefox */
  -webkit-box-shadow: 3px 5px 2px #ccc; /* for Chrome and Safari */
  box-shadow: 3px 5px 2px #ccc; /* for future compatibility only -- pretty 
sure no browsers implement this yet */
}

the box-shadow syntax is vertical offset, horizontal offset, spread, color.  So 
that creates a drop shadow that is 3px down, 5px right, fades over 2px, and is 
gray.  You can add more shadows in other colors, and other placements if you 
want, but adding another string like that in the list, separating each shadow 
with a comma.


The other option for do this is adding the shadow to your corner images, and 
then adding more images to finish off the rest of the shadow.  If you go that 
route, it has support in all the browsers since you're using images, but it 
means that you should probably use the "Box by tedd" technique: 
http://sperling.com/examples/box/

---Tim
__
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] Chasing a fantasy??

[Tim Climis]

> > 
> > Thanks Tim, however it looks pretty wacky in Explorer. ...I'll have to
> > give this some thought. I'm still new to CSS, so off the top of my head
> > I'm seeing a work around how to format the curly quotes for all the
> > different browsers.
> > 
> > Brian
> 
> i meant to say: *not* seeing
> 

My guess is that if it looks okay in the other browsers, it looks okay in IE8 
too, which means you just need to grab IE<7.

If you put this in your HTML header (NOT you CSS)



and your IE specific css in ie.css, it should help you out.

Check here for more info about this magic (called IE Conditional Comments): 
http://www.quirksmode.org/css/condcom.html 

---Tim
__
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] centered nav over an image /?

[Tim Climis]

On Thursday, June 24, 2010 3:09:30 am Matthew P. Johnson wrote:
> I will play with that idea. I did try to use nested div's with the
> background-color set and did not see a result.
> 

This is where having a link helps.  It sounds like you're perhaps using floats 
to create your navigation (which would then cause your container (div?,ul?) to 
have a hieght of 0.  If you add overflow: hidden or an explicit height to that 
container, the background should have an effect.

---Tim
__
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] background layering, transparency help

[Tim Climis]

On Tuesday, June 22, 2010 9:53:06 pm Philippe Wittenbergh wrote:

> It won't -of course- affect the image. rgba(255,247,200,.75) is a _color_
> value. As you say, if the image needs a bleached-out look, edit it in a
> dedicated app.
> 

I didn't think it was quite that obvious...  I'll admit, i didn't think it 
likely, but I thought it plausible that assigning an alpha value to the color 
of the background might affect the rest of the background too.

But what I found was happening was that assigning a rgba color value to the 
background made the background image go away completely - which is broken 
behavior in anyone's book.  Thankfully that behavior only manifests itself in 
the developer console.

An actual page load does work exactly like you say, and as I expected.

---Tim
__
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] Fw: Re: centering 3 float: left boxes

[Tim Climis]

On Tuesday, June 22, 2010 9:36:10 pm Jay Tanna wrote:
> This message was sent to the list but got lost in the system!!!  Gremlin
> again?
> 
> --- On Wed, 23/6/10, Jay Tanna  wrote:
> > No you can't center the three boxes
> > of size 25% because the total width is only 75%  So I
> > suggest change your css as follows:
> > 

I revise my answer from before...

Since you've set percentage widths on your boxes, you'll need:


  
   <3 floated divs>
  


And then:

#column_container {
  width: 75%;
  margin: 0 auto;
}

3 floated divs {
  width: 33%; /* since they have a new parent */
}

---Tim
__
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] background layering, transparency help

[Tim Climis]

On Tuesday, June 22, 2010 2:24:00 pm Stuart King wrote:
> Hi :
> 
> I need to logo to be on top.
> 
> 2. I need the yellow background to be at 75% opacity
> 
> 3. I need the text and image in the .mc_50 and .mc_50r classes to be at
> 100% opacity
> 

I tried

background: rgba(255,247,200,.75) ...

but it didn't work in Chrome's developer console, so I don't know if it'll 
actually work.  It makes the yellow translucent, but I don't know if it'll 
make the image transparent as well.  Might we worth a shot.

The other option is making the image .75 opaque in a graphs program, and using 
a lighter yellow for the background.  Would give the same effect, but wouldn't 
be using CSS.

---Tim
__
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] centering 3 float: left boxes

[Tim Climis]

On Tuesday, June 22, 2010 8:06:27 pm martin wrote:
> Hi all
> 
> I'm trying to center 3 float:left boxes in the middle of the main
> container.


This might be pretty simple, actually...  Untested, but give:

#container {
  float: left;
  margin: 0 auto;
}

a try.

Theory: once you float the container, it will shrink to fit all the other 
boxes.  
I'm pretty sure that the rules of float will still keep the three floated 
columns next to each other. And then the margin: auto centers the whole thing.

If you need the main container wider than the three columns, you can add 
another container div (#column_container or similar).

---Tim
__
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] Font treatment suggestion?

[Tim Climis]

On Sunday, June 20, 2010 5:30:10 pm Chris F.A. Johnson wrote:
> On Sat, 19 Jun 2010, Brian M. Curran wrote:
> > Hiya,
> > Can anyone suggest a CSS font treatment to my home page quotes, that
> > would jazz them up and make them more appealing?
> > 
> > www.draftingservices.com
> 
>   The biggest problem I have with that page is that is is a narrow
>   ribbon of text down the centre of my browser window, forcing too
>   much scrolling: 

I was trying to figure out what the fuss was about, until I refreshed the page, 
and realized that I was looking at a cached version.

Here's my thoughts:

blockquote {
  margin: auto 0;
}

The margins on the paragraphs are plenty - you don't need them on the 
blockquote too.

also remove the font and line height rules - I liked it better in Arial.

Also, I'd consolidate the blockquotes into 2 (instead of 5):


  I specialize ...
  I additionally ...



  I provide ...
  Providing ...
  In summary, ...


I suppose this means that I have now contributed 4¢ to this page.

---Tim
__
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] Font treatment suggestion?

[Tim Climis]

On Saturday, June 19, 2010 11:01:37 am David Laakso wrote:
> Brian M. Curran wrote:
> > Hiya,
> > Can anyone suggest a CSS font treatment to my home page quotes, that
> > would jazz them up and make them more appealing?
> > 
> > www.draftingservices.com
> > 
> > Sincerely,
> > Brian
> 
> blockquote {color : fuchsia; }
> 
> ~d

just for kicks, I ran that through Chrome to see how bad a page of magenta 
text would look, and discovered that none of the quotes are marked up with 
blockquote.  They're all just standard paragraphs.  I would recommend starting 
by marking them up properly, with  and  as appropriate.

That'll make them much easier to select for styling.

As an aside, what on earth are all those  tags after your paragraphs for?  
I'd leave them out, and use margins on the paragraphs to create the same 
effect.

As far as styling quotes, I don't know that I would.  They make up so much of 
the content of the page that if they had a different style from the rest of it, 
it would either be too much, or make the rest of the page look out of place.

---Tim
__
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] Print Stylesheets: Two-column, newspaper/book style - How?

[Tim Climis]

On Wednesday, June 16, 2010 7:26:19 am Jeff Zeitlin wrote:
> I 'edit' (for loose values of the word 'edit') a monthly PDF magazine.
> When a new issue is released, the articles from the previous issue
> become viewable on the magazine's website.  Currently, I have separate
> screen and print stylesheets for the articles on the web; this is - to
> me - an old technique, and one that works well.
> 
> Right now, the print stylesheet runs the content all the way across the
> page as a single column.  What I'd like to do is have it run the content
> into two columns, such that - like the PDF magazine - you would read
> down the left column, then down the right column, and if the article
> overflows the page, the next page starts again on the left.  Ideally,
> the columns on the last page would be equalized, but I'm perfectly
> willing to not try to do that at this time.
> 
> I'm reluctant to do major hacking on the HTML; I'd prefer to stick to
> just using CSS to do this.  Am I asking for too much at this point?  If
> not, how do I do it?
> 

That depends.  Are you willing to use CSS3 properties which are not supported 
in all browsers yet?  If you are, then CSS can help you.

Spec: http://www.w3.org/TR/css3-multicol/
and usage: http://www.css3.info/preview/multi-column-layout/

I haven't tried it in a print stylesheet, but I have used it on actual pages 
and it works reasonably well.

---Tim
__
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] Text input height and CSS font size/family

[Tim Climis]

On Thursday, June 10, 2010 6:19:42 am Gabriele Romanato wrote:
> > So your tests highlight  the input box adapts to font size and family?
> 
> Nope. As the title of the tests say, only their _height_.

I too am confused.  When I take the "width: 150px" off your test cases, the 
widths of every one of those input boxes is different.  (Chrome 5 for Linux) So 
it sure looks to me like the width changes with font size and family in 
addition to the height.

When removing the width, it doesn't appear to act as one might expect though.  
In your first case, no font size or family (on my computer that translates into 
Deja Vu Sans Book, 13px -- apparently, webkit shrinks the font a bit) you get 
16 O's.  
In the 1em sans-serif case, (Deja Vu Sans Book, 16px) I get 14 Os.  
In the 1em serif case (Palatino Linotype, 16px) I have 12 Os.
In the 11px Verdana case, I have 14 Os.
In the 11px Arial case, I have 15 Os.
In the 12px Georgia case, I have 12 Os.

So you don't get the same number of characters in each box, but you DO get 
different sizes (height AND width) with different font sizes and families.

And of course, if I specify a height on the inputs, the height of every input 
box is the same.

So I don't understand what behavior you're trying to demonstrate either.

---Tim
__
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] Top Menus and Positioning Bookmarks

[Tim Climis]

> 
> When checking that thread, it may be good to know that something does *not*
> make sense in there. If I dropped the ball after your _nice_ suggestion it
> is because I finally realized that the OP was not going for a cross-browser
> solution.
> He says in the thread "everything's working as I want in IE6", but I guess
> that meant with a *static* header (versus fixed).
> 

Very true.  I was figuring that since he was using position: fixed everywhere 
else, he didn't really care about IE6, as it doesn't support that property.

And here, that solution should be fine, because, AFAIK, IE6 doesn't run on any 
mobile devices.

---Tim
__
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] Anchor offset ?

[Tim Climis]

On Sunday, May 09, 2010 4:31:46 pm genericmailli...@gmail.com wrote:
> On Sun, May 9, 2010 at 2:05 PM, Thierry Koblentz  wrote:
> >> >> I believe what the OP is after is to achieve the same behavior as if
> >> 
> >> the
> >> 
> >> >> banner/header was a top frame.
> >> >> --
> >> >> Regards,
> >> >> Thierry
> >> > 
> >> > Whoops. Then perhaps these will give him some ideas to play with...
> >> > 
> >> > 
> >> 
> >> Yes, Frames without frames is exactly what I want. Hopefully the URLs
> >> you gave as well as the ones on those pages will provide the answer. I
> >> have a basic understanding of how to do it. Maybe I will discover
> >> something new or discover an error in my code. I have a lot of reading
> >> to do. Thanks.
> > 
> > These URLs won't help you.
> > To find a solution, you need first to understand the problem.
> > A browser scrolls a document until the named anchor reaches the top of
> > the "window/frame" it is in.
> > So as long as your header is part of that document, named anchors will
> > move behind it. Padding, margin, top, whatever you want to use will not
> > change that behavior. Unless of course you are ok to increase the gap
> > between the sections.
> > Because in this case, you could use *top padding* on the paragraphs. That
> > way the anchor position does *not* changed, but the position of the text
> > will. And that can "clear" the header.
> > But do you want a gap between those sections?
> 

Hmm.  I'm a little surprised that no one's mentioned the easy fix here...  
It'll need some clean up with the margins, but should create the desired 
effect.

Also, there may be a better way to do this: I just banged it out on Saturday 
morning in the 15 minutes before I had to go out.

#body {
  position: fixed;
  top: 72px;
  bottom: 0;
  left: 138px;
  overflow: auto;
  margin: 0;
  padding: 0;
}

Works exactly as desired, in Chrome on Linux.  Don't have the time to check 
FF, but probably works there too.

---Tim
__
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] Anchor offset ?

[Tim Climis]

On Saturday, May 08, 2010 8:05:52 pm Thierry Koblentz wrote:
> > I have not been able to find a solution to my problem. I have added
> > blank anchor tags like the one seen in the snip of code below.
> > 
> > 
> > 
> 
> You cannot use "10" here, check the last paragraph of section 6.2:
> http://www.w3.org/TR/html401/types.html#h-6.2
> 
> > I want to drop the tag and have this:
> > 
> > 
> > Since the early...
> > 
> > This URL explains my problem with images.
> > http://webpages.charter.net/jlgates/css.html
> 

With just the images, and no code, this is a little hard, but here's a guess:

1. Your header is position:fixed (or position: absolute), which means that it's 
out of the flow.

2. The id makes the content go to the top of the page, which is hidden behind 
the header.

So you have a couple options, I think (untested, of course, since we don't 
have your code).
1. You may be able to put a margin on your  tags to buffer them. or
2. You could add a margin to your content div which keeps all of the content 
below the header.  and then when things scroll to the top, it will be in the 
right place.

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