Re: [css-d] Having a hard time getting footer to work

2011-09-28 Thread G.Sørtun 

On 29.09.2011 00:50, Emeka wrote:


 This is my first real attempt at trying out CSS, so I would want
 someone to go through my below style and comment or review.


Don't know what you are trying to achieve with the footer, but the HTML 
code needs a standards mode trigger (a doctype) and validation.


No use mixing "float" and "absolute positioning" on same elements. An 
"A:P" element can _not_ float. Also, there is no way to clear an 
"absolute positioned" element, so the footer can't clear those 3 columns.


As for a working starting-point, here is your page with all nonsensical 
CSS properties/values commented out and a few properties/values added. 
Nothing special - just enough to make it work across browser-land...


CSS is in the page-head, where the link to the stylesheet should also be 
in a finished page.


regards
Georg

__
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] Having a hard time getting footer to work

2011-09-28 Thread Emeka 
Hello All,

This is my first real attempt at trying out CSS, so I would want someone to
go through my below style and comment or review.

Regards,
Janus



Hoo





Maamariga














-html,body{background:#CCC;color:#000;margin:0;padding:0;}
h2, div{margin:0;padding:0;}
#header {
 width:1030px;
 background-color:#DE4;
 height:100px;
 margin-right:6px;
 margin-left:6px;
 padding-top:10px;
 padding-left:5px;

}
#left {

   position:absolute;
   float:left;
   width:240px;
   background-color:yellow;
   margin-left:6px;

  }
#center {

   position:absolute;
   float:left;
   width:500px;
   background-color:blue;
   margin-left:246px;
  }

#right {
   float:left;
   width:290px;
   background-color:yellow;
   margin-left:746px;
   margin-right:0px;

  }
#footer {

  clear: both;
   position: relative;
 width:1030px;
 background-color:#DE4;
 height:100px;
 margin-right:0px;
 margin-left:6px;
 padding-top:2px;
   }
p { margin:2px;padding:1.5px}
span { margin-top:20px}
h3{margin-bottom:0px;margin-top:0px}
#htext{ margin-left:20px;margin-top:20px;font-size:20px;}

#pagewrap {
  margin-right:96px;
  margin-left:98px;
  width:1036px;
  height:100%;
  min-height:100%;
  background-color:#BE4;
  padding-left: 0px;
}
__
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] Still having "Overflow" Issues, but found the problem

2011-09-28 Thread David Laakso 

On 9/28/11 9:47 AM, Coleen Holley wrote:

In two of my three columns, I use a script for things like a Paypal button
or a Yahoo "Groups" page link - or in the case of my third column, a search
box. All of these things are wrapped in a  tag. The moment I include
any of the code for those apps, my columns "break." But ONLY in IE8
non-compatibility mode!

Coleen


Long-shot: 

A clickable link to your site in your post to the list is always 
advantageous...

Best,
Bono
U2

--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Showing and hiding table columns

2011-09-28 Thread Tom Livingston 
On Wed, Sep 28, 2011 at 3:35 PM, Tom Livingston  wrote:
> On Wed, Sep 28, 2011 at 3:17 PM, Ingo Chao  wrote:
>>
>>
>> On Wednesday, September 28, 2011, Tom Livingston  wrote:
>>> List,
>>>
>>> What would be the best way to show and hide table columns based on
>>> media queries. On this page:
>>> http://proof.mlinc.com/tl/cssd2/
>>>
>>> i'd like to hide a couple columns in the table when the width gets
>>> narrow. Hiding isn't the problem - display:none; - but showing them
>>> seems troublesome. display:table-cell came to mind, but everyone's
>>> favorite older browsers won't play.
>>>
>>> Aside from having 2 separate tables, is there a solid way to do this?
>>> I tried some hacks to try to make display:table-cell; work, but was
>>> unsuccessful.
>> ...
>>
>> I think IE < 8 uses display: block for those table structures.
>> Ingo
>
> That doesn't seem to be working in IE7/8. Am I going about it wrong?
> http://proof.mlinc.com/tl/cssd2/
>


Seems selectivzr isn't helping here because if I use classes instead
of nth-of-type it works.

Thanks Ingo


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Showing and hiding table columns

2011-09-28 Thread Tom Livingston 
On Wed, Sep 28, 2011 at 3:17 PM, Ingo Chao  wrote:
>
>
> On Wednesday, September 28, 2011, Tom Livingston  wrote:
>> List,
>>
>> What would be the best way to show and hide table columns based on
>> media queries. On this page:
>> http://proof.mlinc.com/tl/cssd2/
>>
>> i'd like to hide a couple columns in the table when the width gets
>> narrow. Hiding isn't the problem - display:none; - but showing them
>> seems troublesome. display:table-cell came to mind, but everyone's
>> favorite older browsers won't play.
>>
>> Aside from having 2 separate tables, is there a solid way to do this?
>> I tried some hacks to try to make display:table-cell; work, but was
>> unsuccessful.
> ...
>
> I think IE < 8 uses display: block for those table structures.
> Ingo

That doesn't seem to be working in IE7/8. Am I going about it wrong?
http://proof.mlinc.com/tl/cssd2/

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Showing and hiding table columns

2011-09-28 Thread Ingo Chao 
On Wednesday, September 28, 2011, Tom Livingston  wrote:
> List,
>
> What would be the best way to show and hide table columns based on
> media queries. On this page:
> http://proof.mlinc.com/tl/cssd2/
>
> i'd like to hide a couple columns in the table when the width gets
> narrow. Hiding isn't the problem - display:none; - but showing them
> seems troublesome. display:table-cell came to mind, but everyone's
> favorite older browsers won't play.
>
> Aside from having 2 separate tables, is there a solid way to do this?
> I tried some hacks to try to make display:table-cell; work, but was
> unsuccessful.
...

I think IE < 8 uses display: block for those table structures.
Ingo
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Showing and hiding table columns

2011-09-28 Thread Tom Livingston 
List,

What would be the best way to show and hide table columns based on
media queries. On this page:
http://proof.mlinc.com/tl/cssd2/

i'd like to hide a couple columns in the table when the width gets
narrow. Hiding isn't the problem - display:none; - but showing them
seems troublesome. display:table-cell came to mind, but everyone's
favorite older browsers won't play.

Aside from having 2 separate tables, is there a solid way to do this?
I tried some hacks to try to make display:table-cell; work, but was
unsuccessful.

Thanks for your time as always.

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Media Queries

2011-09-28 Thread Tom Livingston 
Ah ha! It was [att=] selectors. Added classes, and it works. It's a
known issue with respond.js. Hope a fix is out soon.

On Wed, Sep 28, 2011 at 2:03 PM, Tom Livingston  wrote:
> I have still been working on this and after starting from scratch and
> using 320andup style sheet, I still have the IE7 issue. I have found
> that as soon as I add styles to the 992px media query, IE7 *seems* to
> ignore all media queries and uses the base styles only. removing the
> 992 rules, and ie7 seems happy.
>
> Anyone have any suggestions on this?
>
>
>
>
> On Tue, Sep 27, 2011 at 3:26 PM, Tom Livingston  wrote:
>> List,
>>
>> I'm going around and around with this and can't see the source of my
>> woes. Can anyone see the cause of layout issues in IE8 and IE7?
>>
>> IE8 is close, but it seems like selectivzr isn't working.
>>
>> IE7 seems to not be using/loading the respond.js and i'm not sure why.
>> Works as desired in IE9, Safari 5.0.5 Mac. My IE installs are in
>> separate VMs using VMWare...
>>
>> Could very well be my media queries as I am still wrapping my head
>> around them...
>>
>> http://proof.mlinc.com/tl/cssd/
>>
>> Thanks
>>
>> --
>>
>> Tom Livingston | Senior Interactive Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>>
>
>
>
> --
>
> Tom Livingston | Senior Interactive Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Media Queries

2011-09-28 Thread Tom Livingston 
I have still been working on this and after starting from scratch and
using 320andup style sheet, I still have the IE7 issue. I have found
that as soon as I add styles to the 992px media query, IE7 *seems* to
ignore all media queries and uses the base styles only. removing the
992 rules, and ie7 seems happy.

Anyone have any suggestions on this?




On Tue, Sep 27, 2011 at 3:26 PM, Tom Livingston  wrote:
> List,
>
> I'm going around and around with this and can't see the source of my
> woes. Can anyone see the cause of layout issues in IE8 and IE7?
>
> IE8 is close, but it seems like selectivzr isn't working.
>
> IE7 seems to not be using/loading the respond.js and i'm not sure why.
> Works as desired in IE9, Safari 5.0.5 Mac. My IE installs are in
> separate VMs using VMWare...
>
> Could very well be my media queries as I am still wrapping my head
> around them...
>
> http://proof.mlinc.com/tl/cssd/
>
> Thanks
>
> --
>
> Tom Livingston | Senior Interactive Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox + invisible bookmarks

2011-09-28 Thread Barney Carroll 
What are your constraints? We may yet be of help…

Regards,
Barney Carroll

barney.carr...@gmail.com
07594 506 381



On 28 September 2011 16:01, David Halliday  wrote:
> Thank you for the info.
> In this particular situation, putting the ID on the next visible item would
> not do.
>
> Now that I know this bit "... considered out of document flow", I will just
> have to think of a different design.
>
> Best regards,
> David
> From: Barney Carroll
>
> Most browsers treat objects with display:none specially — they are
> considered out of document flow for this and other purposes (no need
> to load associated resources, etc).
>
> Why not simply put the ID on the next visible item?
>
> Regards,
> Barney Carroll
>
> barney.carr...@gmail.com
> 07594 506 381
>
>
>
> On 28 September 2011 11:06, David Halliday  wrote:
>> Hello
>>
>> In FireFox, Is there a way to get  bookmarks placed in invisible table
>> rows to work?
>>
>> The CSS:
>> #invsbl{
>> display:none;
>> line-height:0px;
>> height: 0px;
>> overflow: hidden;
>> border:0;
>> margin:0;
>> }
>>
>> And the table row is:
>>  
>>
>> The above works fine in IE.  In FireFox, when links are clicked, nothing
>> happens?
>> Any suggestion please?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox + invisible bookmarks

2011-09-28 Thread Barney Carroll 
What are your constraints? We may yet be of help…

Regards,
Barney Carroll

barney.carr...@gmail.com
07594 506 381



On 28 September 2011 16:01, David Halliday  wrote:
> Thank you for the info.
> In this particular situation, putting the ID on the next visible item would
> not do.
>
> Now that I know this bit "... considered out of document flow", I will just
> have to think of a different design.
>
> Best regards,
> David
> From: Barney Carroll
>
> Most browsers treat objects with display:none specially — they are
> considered out of document flow for this and other purposes (no need
> to load associated resources, etc).
>
> Why not simply put the ID on the next visible item?
>
> Regards,
> Barney Carroll
>
> barney.carr...@gmail.com
> 07594 506 381
>
>
>
> On 28 September 2011 11:06, David Halliday  wrote:
>> Hello
>>
>> In FireFox, Is there a way to get  bookmarks placed in invisible table
>> rows to work?
>>
>> The CSS:
>> #invsbl{
>> display:none;
>> line-height:0px;
>> height: 0px;
>> overflow: hidden;
>> border:0;
>> margin:0;
>> }
>>
>> And the table row is:
>>  
>>
>> The above works fine in IE.  In FireFox, when links are clicked, nothing
>> happens?
>> Any suggestion please?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox + invisible bookmarks

2011-09-28 Thread David Halliday 
Thank you for the info.  
In this particular situation, putting the ID on the next visible item would not 
do.

Now that I know this bit "... considered out of document flow", I will just 
have to think of a different design.
 
Best regards,
David



From: Barney Carroll 

Most browsers treat objects with display:none specially — they are
considered out of document flow for this and other purposes (no need
to load associated resources, etc).

Why not simply put the ID on the next visible item?

Regards,
Barney Carroll

barney.carr...@gmail.com
07594 506 381



On 28 September 2011 11:06, David Halliday  wrote:
> Hello
>
> In FireFox, Is there a way to get  bookmarks placed in invisible table rows 
> to work?
>
> The CSS:
> #invsbl{
> display:none;
> line-height:0px;
> height: 0px;
> overflow: hidden;
> border:0;
> margin:0;
> }
>
> And the table row is:
>  
>
> The above works fine in IE.  In FireFox, when links are clicked, nothing 
> happens?
> Any suggestion please?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Still having "Overflow" Issues, but found the problem

2011-09-28 Thread Coleen Holley 
Hi all :-)

I'm still having issues with column overflows in IE8 (ONLY!), but I found
the problem - or at least what I think is the problem - I just don't know
how to fix it.

In two of my three columns, I use a script for things like a Paypal button
or a Yahoo "Groups" page link - or in the case of my third column, a search
box. All of these things are wrapped in a  tag. The moment I include
any of the code for those apps, my columns "break." But ONLY in IE8
non-compatibility mode! The structure works absolutely fine even with the
nestled  tags in EVERY browser I've checked (including IE8 in
compatibility mode) but without compatibility - it breaks!

Here is a sample of my HTML snippet that is "breaking" it:


http://health.groups.yahoo.com/subscribe/AHeartbreakingChoice";
target="_blank">


http://health.groups.yahoo.com/group/AHeartbreakingChoice/";
target="_blank">Subscribe
to AHeartbreakingChoice

http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif";
/>
Powered by http://health.groups.yahoo.com/";
target="_blank">health.groups.yahoo.com


The Column code of my CSS is from Matthew James Taylor's "Perfect 3 Column
Liquid Layout" and DOES work perfectly in EVERY browser, except as I've
stated IE8 non-compatibility.

Does anyone have any suggestion on how to nestle the  for things like
the above Yahoo link or PayPayl buttons or search boxes - without breaking
IE8? Any help would be much appreciated.

Thanks,

Coleen
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Fwd: Media Queries

2011-09-28 Thread Tom Livingston 
Thanks everyone. As always, lots of good info, but it seems to always come down 
to a back and forth on design where I work. I'm not a designer, just front-end 
dev. Design usually wins. So I am forced to struggle to pull off what someone 
else demands based on visuals. 

Some day... Some day...

Sent from my iPhone

On Sep 28, 2011, at 3:35 AM, Philippe Wittenbergh  wrote:

> 
> On Sep 28, 2011, at 3:57 PM, Barney Carroll wrote:
> 
>> Regarding the col element, the theory was that you would-be able to use it 
>> as a shorthand for all cells within it, thus defining colours, typography 
>> etc by implicit table structure rather than chucking class names on all 
>> cells, using adjacency selectors, or somesuch.
> 
> In HTML 4, the  element was – unfortunately – specified without much 
> thought, analysis etc. Esp in the light of how HTML tables are structured and 
> constructed. As a result many of its attributes (per html4) are unusable and 
> not duplicatable in terms of css.
> 
> CSS 2.1 only allows a very limited subset of properties that apply to the 
>  element.
> http://www.w3.org/TR/CSS21/tables.html#columns
> 
>> In practice, browser support is — even now — terrible.
> Hmm - I might have missed something. Current crop of browser have a fairly 
> decent support for those properties that apply to this element.
> 
> On Sep 28, 2011, at 10:55 AM, Tom Livingston wrote:
> 
>> For the  element, it seems that besides passing the validator,
>> it's kinda the same as setting widths on s or s, no? Adding a
>> "row" of s - extra markup -  just to set widths. What am I
>> missing?
> 
> Dunno, it won't help please the validator if you use the 'width' attribute, 
> using a class will work however. I prefer to have that row of cols at hand 
> for styling purposes (part. width) - imagine you style your first row of 
> cells and apply the width only to that first row, but then remove that first 
> row, without transferring the styling to another row…
> It fits well in my workflow. YMMV.
> 
>> 
>> As for the long percentage amount, I was merely following steps from
>> Ethan Marcotte's book for creating a flexible layout. Who am I to
>> argue with him? It was copy/paste from a calculator. Seems a bit nerdy
>> maybe, but it causes no harm.
> 
> As I said: De gustibus et coloribus…
> as a personal preference, I'd only specifiy a width for the 1st table-cell, 
> let the others adjust based on content and available space.
> 
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
> 
> 
> 
> 
> 
> 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FireFox + invisible bookmarks

2011-09-28 Thread Barney Carroll 
Most browsers treat objects with display:none specially — they are
considered out of document flow for this and other purposes (no need
to load associated resources, etc).

Why not simply put the ID on the next visible item?

Regards,
Barney Carroll

barney.carr...@gmail.com
07594 506 381



On 28 September 2011 11:06, David Halliday  wrote:
> Hello
>
> In FireFox, Is there a way to get  bookmarks placed in invisible table rows 
> to work?
>
> The CSS:
> #invsbl{
> display:none;
> line-height:0px;
> height: 0px;
> overflow: hidden;
> border:0;
> margin:0;
> }
>
> And the table row is:
>  
>
> The above works fine in IE.  In FireFox, when links are clicked, nothing 
> happens?
> Any suggestion please?
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
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] FireFox + invisible bookmarks

2011-09-28 Thread David Halliday 
Hello
 
In FireFox, Is there a way to get  bookmarks placed in invisible table rows to 
work?
 
The CSS:
#invsbl{
display:none; 
line-height:0px; 
height: 0px; 
overflow: hidden; 
border:0; 
margin:0; 
}
 
And the table row is:
 
 
The above works fine in IE.  In FireFox, when links are clicked, nothing 
happens?
Any suggestion please? 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Query on P:First-letter

2011-09-28 Thread Philippe Wittenbergh 

On Sep 28, 2011, at 4:54 PM, Philip TAYLOR (Webmaster, Ret'd) wrote:

> And yes, I'd love to be able to add kern-pairs in CSS, but I don't
> think CSS has evolved that far yet :-)

I personally hope it won't be possible anytime soon. Considering how text is 
handled by different OS and even by different browsers on the same OS (in terms 
of sub pixel positioning, text-smoothing, etc), I foresee a mountain of 
disasters in the making. And that is assuming all those combination actually 
use the same font. What _may_ work on one OS/browser/screen-resolution combo 
will almost certainly fail on another combination.

Fwiw, none of the kerning pairs on the two sample pages linked to in the 
original post look good on my Mac running OS X 10.6.8 (any browser), nor on the 
iPod Touch.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Query on P:First-letter

2011-09-28 Thread Jukka K. Korpela 

28.9.2011 10:54, Philip TAYLOR (Webmaster, Ret'd) wrote:


And yes, I'd love to be able to add kern-pairs in CSS, but I don't
think CSS has evolved that far yet :-)


But you _can_ do that - just use markup like
To
and CSS like
.T_before_o { margin-right: -0.15em; display: inline-block; }
:-)

Though slightly inconvenient to write by hand, this _could_ be a 
feasible approach when made programmatically (server-side or 
client-side), based on a kerning table you specify in some format and 
then have applied when processing the text.


--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Query on P:First-letter

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



Jukka K. Korpela wrote:


Since you already have markup like

Many of us

it would seem natural to put the initial letter in a classed span, making it 
trivial to refer to it in CSS. Assuming, of course, that you can affect the 
markup.


Yes, I can indeed; I was just trying to avoid overt markup
if it could be avoided.


I don't see how text-transform : uppercase on something else would be relevant to the 
issue of styling the first letter. And it seems to me that David suggested just 
_removing_ some stylesheets that you currently have (including text-transform : 
uppercase). I think red color is not particularly stylish. What you seem to be trying to 
achieve is "classical" styling where the first few words of a paragraph appear 
in small capitals (except uppercase letters as normal capitals) - and I doubt whether 
it's a good idea to add color to that.


Yes, /mea culpa/ : I have already sent a correction.


The main problem with such "classical" styling in HTML documents is that true 
small-caps are rarely supported. Although you can set font-variant: small-caps in CSS, 
you get (in almost all cases)just reduced-size uppercase letters, _not_ small-caps 
designer typographically to fit into the text. Using explicit font size reduction 
together with bolding is a nice try to work around such problems, but not without 
problems. The initial letters now have somewhat too thin lines, and if you try to fix 
that by bolding, they get too thick.


Yes, it was as close as I could get to classical styling;
certainly CSS's generation of caps-and-small-caps was just
an æsthetic disaster.


I don't quite see the point of
letter-spacing: 0.075em;
for the initial letter. If you look at e.g. the words "The", don't you think 
that the distance needs to be _reduced_ rather than increased? If you fine-tune spacing, 
then I think you would need to fine-tune it individually by character pairs, effectively 
doing things comparable to what a typographer does when deciding on kerning pairs.


It was added empirically.  Before I added that correction, it
looked decidedly worse (to my eyes).  However, that was in an
earlier version of Seamonkey (2.0.14, probably) and I do agree
that the kerning in "The" is now markedly sub-optimal.

And yes, I'd love to be able to add kern-pairs in CSS, but I don't
think CSS has evolved that far yet :-)

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Query on P:First-letter

2011-09-28 Thread Jukka K. Korpela 

28.9.2011 10:04, Philip TAYLOR (Webmaster, Ret'd) kirjoitti:


 > See https://bugzilla.mozilla.org/show_bug.cgi?id=159403


I.e. "text-indent and :first-letter don't work with a img before the 
first letter".



Thank you, that is an interesting and useful lead. Since
I /need/ it to work in Seamonkey, I shall have to look for
a work-around until that bug gets fixed.


Since you already have markup like

Many of us

it would seem natural to put the initial letter in a classed span, 
making it trivial to refer to it in CSS. Assuming, of course, that you 
can affect the markup.


The :first-letter pseudo-element is rather trickily described in the 
specs, so bugs and differences in implementations were to be expected. 
So using extra markup, though perhaps primitive, is a practical move



David L: I will
look at your suggested replacement shortly, but earlier
experiments suggested that text-transform : uppercase
produces markedly inferior results from an æsthetic
perspective, which is why I developed the code that I posted.


I don't see how text-transform : uppercase on something else would be 
relevant to the issue of styling the first letter. And it seems to me 
that David suggested just _removing_ some stylesheets that you currently 
have (including text-transform : uppercase). I think red color is not 
particularly stylish. What you seem to be trying to achieve is 
"classical" styling where the first few words of a paragraph appear in 
small capitals (except uppercase letters as normal capitals) - and I 
doubt whether it's a good idea to add color to that.


The main problem with such "classical" styling in HTML documents is that 
true small-caps are rarely supported. Although you can set font-variant: 
small-caps in CSS, you get (in almost all cases)just reduced-size 
uppercase letters, _not_ small-caps designer typographically to fit into 
the text. Using explicit font size reduction together with bolding is a 
nice try to work around such problems, but not without problems. The 
initial letters now have somewhat too thin lines, and if you try to fix 
that by bolding, they get too thick.


I don't quite see the point of
letter-spacing: 0.075em;
for the initial letter. If you look at e.g. the words "The", don't you 
think that the distance needs to be _reduced_ rather than increased? If 
you fine-tune spacing, then I think you would need to fine-tune it 
individually by character pairs, effectively doing things comparable to 
what a typographer does when deciding on kerning pairs.


--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Fwd: Media Queries

2011-09-28 Thread Philippe Wittenbergh 

On Sep 28, 2011, at 3:57 PM, Barney Carroll wrote:

> Regarding the col element, the theory was that you would-be able to use it as 
> a shorthand for all cells within it, thus defining colours, typography etc by 
> implicit table structure rather than chucking class names on all cells, using 
> adjacency selectors, or somesuch.

In HTML 4, the  element was – unfortunately – specified without much 
thought, analysis etc. Esp in the light of how HTML tables are structured and 
constructed. As a result many of its attributes (per html4) are unusable and 
not duplicatable in terms of css.

CSS 2.1 only allows a very limited subset of properties that apply to the  
element.
http://www.w3.org/TR/CSS21/tables.html#columns

> In practice, browser support is — even now — terrible.
Hmm - I might have missed something. Current crop of browser have a fairly 
decent support for those properties that apply to this element.

On Sep 28, 2011, at 10:55 AM, Tom Livingston wrote:

> For the  element, it seems that besides passing the validator,
> it's kinda the same as setting widths on s or s, no? Adding a
> "row" of s - extra markup -  just to set widths. What am I
> missing?

Dunno, it won't help please the validator if you use the 'width' attribute, 
using a class will work however. I prefer to have that row of cols at hand for 
styling purposes (part. width) - imagine you style your first row of cells and 
apply the width only to that first row, but then remove that first row, without 
transferring the styling to another row…
It fits well in my workflow. YMMV.

> 
> As for the long percentage amount, I was merely following steps from
> Ethan Marcotte's book for creating a flexible layout. Who am I to
> argue with him? It was copy/paste from a calculator. Seems a bit nerdy
> maybe, but it causes no harm.

As I said: De gustibus et coloribus…
as a personal preference, I'd only specifiy a width for the 1st table-cell, let 
the others adjust based on content and available space.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Query on P:First-letter

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



Philippe Wittenbergh wrote:

> Have you tested this in anything beside a Gecko browser ?

To be honest, no.  I develop using solely Seamonkey, and
only when the site renders successfully in that do I look
to see how it might render in other browsers.

> See https://bugzilla.mozilla.org/show_bug.cgi?id=159403

Thank you, that is an interesting and useful lead.  Since
I /need/ it to work in Seamonkey, I shall have to look for
a work-around until that bug gets fixed.  My thanks to all
others who also commented on this query.  David L: I will
look at your suggested replacement shortly, but earlier
experiments suggested that text-transform : uppercase
produces markedly inferior results from an æsthetic
perspective, which is why I developed the code that I posted.

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/