Re: [css-d] nav layout on a mac

[David Laakso]

On 1/3/11 12:38 AM, Chetan Crasta wrote:

On Mon, Jan 3, 2011 at 5:36 AM, Matthew P. Johnson  wrote:

http://www.applegateelements.com/

Change the div#menu's parent div's width to 57em.

~Chetan




Careful. The horizontal scroll bar it will throw with + font-scaling 
will wreak havoc on land and sea  as it shoots  its way from here to 
Havana :-) .


Best,
Dr Lakra
Oaxaca, Mexico

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
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] nav layout on a mac

[Chetan Crasta]

On Mon, Jan 3, 2011 at 5:36 AM, Matthew P. Johnson  wrote:
>
> http://www.applegateelements.com/

Change the div#menu's parent div's width to 57em. This will ensure
that the menu doesn't break even when the text is zoomed in or the
minimum font size is increased

~Chetan
__
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] nav layout on a mac

[Rod Castello]

- Original Message 
From: Matthew P. Johnson 
To: css-d@lists.css-discuss.org
Sent: Sun, January 2, 2011 4:06:59 PM
Subject: [css-d] nav layout on a mac

I have the web site looking alright but I was at a friend house on NYE and
notice the navigation was getting clipped on her Mac. If anyone has a Mac
and you let me know what browser and OSv you are running if you have the
clipping issue occurring?

http://www.applegateelements.com/
Sincerely, 
Matthew P. Johnson | Eco I.T.
708 Bay Road Mill Valley CA 94941 | 415.254.1563 |  
ecoitsf.com

P Please consider the environment before printing this email.


Contact is below Home.
Running OS 10.4.11
 Changing the padding on #menu a { padding: 6px 19px 6px 18px;} took care of it 
for me.

Rod Castello
rodcastello.com/


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

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

Re: [css-d] nav layout on a mac

[Lisa Frost]

>
>
> "Contact" is beneath "Home" in Camino, Safari, WebKit, SeaMonkey, Opera,
> and FF regardless of window width: Mac OS X 10.4.
> A couple of screenshots fom browsercam:
> 
>
>
I am getting the same result as above.
Mac OS X 10.4, safari version 4.1.2  and on FF.

Lisa
__
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] unable to over ride an li

[Lisa Frost]

Thanks for all the discussion this generated. Sorry i did not participate as
it was night time here. Original problem fixed thanks very much.
Lisa
__
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] nav layout on a mac

[David Laakso]

On 1/2/11 7:06 PM, Matthew P. Johnson wrote:

I have the web site looking alright but I was at a friend house on NYE and
notice the navigation was getting clipped on her Mac. If anyone has a Mac
and you let me know what browser and OSv you are running if you have the
clipping issue occurring?



http://www.applegateelements.com/



Sincerely,



Matthew P. Johnson




"Contact" is beneath "Home" in Camino, Safari, WebKit, SeaMonkey, Opera, 
and FF regardless of window width: Mac OS X 10.4.

A couple of screenshots fom browsercam:


~d




--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
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] nav layout on a mac

[Matthew P. Johnson]

I have the web site looking alright but I was at a friend house on NYE and
notice the navigation was getting clipped on her Mac. If anyone has a Mac
and you let me know what browser and OSv you are running if you have the
clipping issue occurring?

 

http://www.applegateelements.com/

 

Sincerely, 

 

Matthew P. Johnson | Eco I.T.

708 Bay Road Mill Valley CA 94941 | 415.254.1563 |  
ecoitsf.com

P Please consider the environment before printing this email.

 

__
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] Fix for unexpected result of rotation in transformed elements

[Philippe Wittenbergh]

On Jan 3, 2011, at 2:32 AM, Alan Gresley wrote:

> This email is about an unexpected result of rotation in transformed elements 
> which I noticed when resizing the viewport. What does happen as the viewport 
> gets wider is the start and end parts of the element that is rotated become 
> higher (start) or lower (end).
> 
> This can result in the element *overlapping other content*. I have created 
> this demo to help with discussion for this issue. My solution is by using 
> media queries. Each change is by 1 degree.
> 
> 

I'd argue that it is expected. The elements rotates around is center point, by 
default.
http://dev.w3.org/csswg/css3-2d-transforms/#transform-origin-property

When the viewport width changes, the element grows or shrinks and may not fit 
within the assigned height of the parent element.
(and remember, transforms do not affect layout - and  the center point of the 
affected element doesn't change position within its containing block)

You can control that:
E { transform-origin: 0 0; }
would have the rotation happen from the start point.
It may not give you the effect you're after, though.

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





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

Re: [css-d] unable to over ride an li

[Philip Taylor (Webmaster, Ret'd)]

Thierry Koblentz wrote:


#mainmenu ul li#last #donations {font-size:1.24em;}

What is "immediately clear" to you in that rule?


That within an element of ID "mainmenu" will occur a ;
within that, there will occur an  of ID "last"; and
somewhere within that will occur an element of ID "donations",
and that element should be styled with "font-size: 1.24em".
I would criticise it on the basis of the totally unnecessary
semi-colon at the end, and would prefer to see a space after
the colon.


1. the extra selectors are needed to give enough weight to that rule


No.


2. "li" is used to differentiate this rule from another one that targets the
same ID, but on a DIV (in another document)


Possible but highly unlikely.


3. all the above


No.


4. none of the above


Probably.


Imho, with the "short version", there is much less guessing. What's clear to
the reader is that we're styling that key selector, nothing more. We are not
messing with specificity and we are not sending mixed signals by pairing the
element with its ID. If we decide to add a comment it is to help authors
spot the element in the sheet and/or document, not to tell them what we're
actually doing. That's because our short selector makes that obvious.


As always in matters such as this, each of us is entitled to his
or her own opinion.  In the spirit of "Happy 2011", I am more
than happy to agree to differ and to leave others to form their
own opinions of the relative merits of our individual perspectives.
How does that sound to you ?

** Phil.
__
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] unable to over ride an li

[Thierry Koblentz]

> > Well-written css code means *lean* selectors so a well written styles
> sheet
> > should need more comments than a badly written one, isn't?.
> 
> With respect, I disagree : you are choosing to interpret "well-written"
> as "efficient"; I interpret "well-written" as "transparent",
> "immediately clear to the reader", code that demonstrates clarity
> of thought and clarity of expression.

Then following your interpretation, looking at the same example:

#mainmenu ul li#last #donations {font-size:1.24em;}

What is "immediately clear" to you in that rule?

1. the extra selectors are needed to give enough weight to that rule
2. "li" is used to differentiate this rule from another one that targets the
same ID, but on a DIV (in another document)
3. all the above
4. none of the above

Imho, with the "short version", there is much less guessing. What's clear to
the reader is that we're styling that key selector, nothing more. We are not
messing with specificity and we are not sending mixed signals by pairing the
element with its ID. If we decide to add a comment it is to help authors
spot the element in the sheet and/or document, not to tell them what we're
actually doing. That's because our short selector makes that obvious.

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 



 

  

__
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] unable to over ride an li

[Philip Taylor (Webmaster, Ret'd)]

Thierry Koblentz wrote:


Well-written css code means *lean* selectors so a well written styles sheet
should need more comments than a badly written one, isn't?.


With respect, I disagree : you are choosing to interpret "well-written"
as "efficient"; I interpret "well-written" as "transparent",
"immediately clear to the reader", code that demonstrates clarity
of thought and clarity of expression.

** Phil.
__
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] unable to over ride an li

[Thierry Koblentz]

Hi Philip,

> > Imho, using element#id to increase the weight of a rule makes sense,
> but not
> > when it is used as a hint to help us read and understand rules. I'd
> think
> > /*comments*/ are better suited for that.
> 
> I'm afraid I can't agree with that, Thierry : comments indicate
> only the coder's intentions; code indicates exactly what he
> (or she) has actually written.  Well-written code rarely
> needs comments; poor code needs an overabundance of them.

Well-written css code means *lean* selectors so a well written styles sheet
should need more comments than a badly written one, isn't?.

These are the two examples posted in this thread:

/* shows best coding practice, but could be hard to find without a comment
*/

#donations {font-size:1.24em;}

/* bad coding practice, but so verbose that it should be easy to find
without a comment */

#mainmenu ul li#last #donations {font-size:1.24em;}


As a side note, such comment has nothing to do with the coder's intention.

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 




__
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] unable to over ride an li

[Philip Taylor (Webmaster, Ret'd)]

Thierry Koblentz wrote:


Imho, using element#id to increase the weight of a rule makes sense, but not
when it is used as a hint to help us read and understand rules. I'd think
/*comments*/ are better suited for that.


I'm afraid I can't agree with that, Thierry : comments indicate
only the coder's intentions; code indicates exactly what he
(or she) has actually written.  Well-written code rarely
needs comments; poor code needs an overabundance of them.

Philip Taylor
__
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] unable to over ride an li

[Chetan Crasta]

On Mon, Jan 3, 2011 at 12:16 AM, Thierry Koblentz
 wrote:

> That's if browsers were reading from left to right, but they actually do the
> opposite.

That's right.
Here are two articles that explain the process, that I found informative:

http://code.google.com/speed/page-speed/docs/rendering.html
https://developer.mozilla.org/en/Writing_Efficient_CSS

Regards,
~Chetan
__
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] unable to over ride an li

[Thierry Koblentz]

Hi Chetan,

> > Why going through so many elements? It can't be good regarding
> performance
> > and it increases specificity for no reason.
> >
> > I'd go with a simple:  #last {...}
> 
> Point accepted. In general, one should keep selectors as simple as
> possible, with just as much specificity as one needs.
> 
> However, in this case, #last{...} does *not* work see:
> http://roughtech.com/t/polar.html
> The selector #mainmenu li has to be overridden.
>
> Also, I personally prefer to prefix id selectors with the element
> name. This makes it easier for me to read and understand a stylesheet,
> I wont have to constantly refer to the html file. For example, I
> prefer li#last over #last because at a later time I would know, with
> one glance, that the id is on an .

Imho, using element#id to increase the weight of a rule makes sense, but not
when it is used as a hint to help us read and understand rules. I'd think
/*comments*/ are better suited for that.

> Another thought: Is #last really faster than #container #mainmenu ul
> li#last ? It appears to me that the latter should be faster because
> the browser does not have to traverse the entire DOM tree looking for
> #last, it can just start from #container.

That's if browsers were reading from left to right, but they actually do the
opposite.

So consider this:

#mainmenu ul li#last #donations {font-size:1.24em;}

vs.:

#donations {font-size:1.24em;}


With the latter, once they've found the *key selector* (the rightmost one),
they are done! With the former, they need to keep going until they reach
#mainmenu

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 

__
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] The content property

[Gabriele Romanato]

Another short note for beginners:

http://onwebdev.blogspot.com/2011/01/css-content-property.html

HTH :-)


http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
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] unable to over ride an li

[Chetan Crasta]

On Sun, Jan 2, 2011 at 10:57 PM, Thierry Koblentz
 wrote:

> Why going through so many elements? It can't be good regarding performance
> and it increases specificity for no reason.
>
> I'd go with a simple:  #last {...}

Point accepted. In general, one should keep selectors as simple as
possible, with just as much specificity as one needs.

However, in this case, #last{...} does *not* work see:
http://roughtech.com/t/polar.html
The selector #mainmenu li has to be overridden.

Also, I personally prefer to prefix id selectors with the element
name. This makes it easier for me to read and understand a stylesheet,
I wont have to constantly refer to the html file. For example, I
prefer li#last over #last because at a later time I would know, with
one glance, that the id is on an .

Another thought: Is #last really faster than #container #mainmenu ul
li#last ? It appears to me that the latter should be faster because
the browser does not have to traverse the entire DOM tree looking for
#last, it can just start from #container.

~Chetan
__
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] Fix for unexpected result of rotation in transformed elements

[Alan Gresley]

Hello all,

Some serious stuff. Must balance work and play..

This email is about an unexpected result of rotation in transformed 
elements which I noticed when resizing the viewport. What does happen as 
the viewport gets wider is the start and end parts of the element that 
is rotated become higher (start) or lower (end).


This can result in the element *overlapping other content*. I have 
created this demo to help with discussion for this issue. My solution is 
by using media queries. Each change is by 1 degree.





I have not fully check the specs to see if there is another solution or 
a value that can avoid this.



--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] unable to over ride an li

[Thierry Koblentz]

> Try this:
> 
> DONATIONS
> 
> CSS: #container #mainmenu ul li#last {float:right;font-size:1.24em;}


Why going through so many elements? It can't be good regarding performance
and it increases specificity for no reason.

I'd go with a simple:  #last {...}

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org

__
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] unable to over ride an li

[Chetan Crasta]

On Sun, Jan 2, 2011 at 10:46 PM, Chetan Crasta  wrote:
> Try this:
>
> DONATIONS
>
> CSS: #container #mainmenu ul li#last {float:right;font-size:1.24em;}
>

Correction:
 CSS:
#container #mainmenu ul li#last {float:right;}
#mainmenu ul li#last #donations {font-size:1.24em;}

~Chetan
__
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] unable to over ride an li

[Chetan Crasta]

Try this:

DONATIONS

CSS: #container #mainmenu ul li#last {float:right;font-size:1.24em;}

~Chetan

On Sun, Jan 2, 2011 at 10:32 PM, Lisa Frost  wrote:
>
>>
>> > Its the donations link.
>> > It needs to be aligned right and be bigger in size.
>>
>> You need to float the last , not the last . And the text of the
>> last menu item *is* larger than the rest.
>>
>> ~Chetan
>
> Hi Chetan,
> I still can't get it to float.
> do i put float right in my  ul li #donations declaration ?
> This does not seem to work for me.
>
> I tried using  left padding which works in FF but the padding varies so much
> in IE8 it throws it down onto a new line.
>
> Lisa
>
>
>
__
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] unable to over ride an li

[Lisa Frost]

>
> > Its the donations link.
> > It needs to be aligned right and be bigger in size.
>
> You need to float the last , not the last . And the text of the
> last menu item *is* larger than the rest.
>
> ~Chetan
>
Hi Chetan,
I still can't get it to float.
do i put float right in my  ul li #donations declaration ?
This does not seem to work for me.

I tried using  left padding which works in FF but the padding varies so much
in IE8 it throws it down onto a new line.

Lisa
__
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] unable to over ride an li

[Chetan Crasta]

On Sun, Jan 2, 2011 at 9:08 PM, Lisa Frost  wrote:

> Its the donations link.
> It needs to be aligned right and be bigger in size.

You need to float the last , not the last . And the text of the
last menu item *is* larger than the rest.

~Chetan
__
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] google hosted font question

[David Laakso]

On 1/2/11 10:51 AM, Chetan Crasta wrote:

On Sun, Jan 2, 2011 at 8:59 PM, David Laakso
  wrote:


Ditch Neuton.
Go to Font Squirrel.

Download Calluna and install it.
Go back to Font Squirrel and use their fontface generator [expert setting].

As David suggested, the Rory's only option is to choose a font that
renders better in Windows.
~Chetan





Or spring for 22 bucks and buy Calluna Light?

Either way, the fallback is serif [not sans as he has with Neuton].
Best,
~d


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
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] google hosted font question

[Chetan Crasta]

On Sun, Jan 2, 2011 at 8:59 PM, David Laakso
 wrote:

> Ditch Neuton.
> Go to Font Squirrel.
> 
> Download Calluna and install it.
> Go back to Font Squirrel and use their fontface generator [expert setting].

As David suggested, the Rory's only option is to choose a font that
renders better in Windows.

Just to clarify the situation a bit, Windows' embedded font rendering
problems is not restricted to Windows XP and IE8. I have added
screenshots of FF3.6 on Windows 7. The problems are exactly the same.
Note that in Windows 7 and IE8 Clear Type is the default. This setting
wasn't changed. See: http://roughtech.com/t/rendering.html


~Chetan
__
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] unable to over ride an li

[Lisa Frost]

I need to make one li item have its own style, but i can't seem to get it to
override the css for the rest of the list.

Its the donations link.
It needs to be aligned right and be bigger in size.

I'm sure i'm probably just targeting the wrong selector but i've tried every
combination i can think of.

Page here:

http://www.diabetespolarflight.org/xhtml/template_final.html
css here: http://www.diabetespolarflight.org/css/mainstyles_final.css

All css at the top of the file, ignore styles under not used yet.

Thanks

Lisa
__
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] CSS3 transform & transition with img and borders

[Alan Gresley]

Hello all,

Best in Safari.




Both Opera 11 and Safari 5 can not have both border-radius and border on 
an  element. If this  is wrapped by an  the it works in 
Safari. The later test show spinning borders around a stationary .


IE9 has the best borders and border joins. Shame that transform is not 
working.


Down the bottom of the demo page are some marbles that roll.


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] google hosted font question

[David Laakso]

On 12/30/10 3:45 PM, Rory Bernstein wrote:

Hi,

I am using a google-hosted embedded web font called Neuton:
http://code.google.com/webfonts/family?family=Neuton&subset=latin

Here is a coded page that uses it. See left column (nav menu), the top-category 
text (the serif text, not the san serif), that is bigger. The text that reads: 
recent, design, design for real estate, contact. That is the neuton text.

http://lettershop.ehclients.com/visual_diary_archive

My issue is that the font weight is heavier in the browser than it looked in 
our photoshop comp. Is there any way, using CSS, to get the font weight to look 
lighter (less bold)? Or do I just explain to the designer that the way text 
looks in photoshop is different from how it looks in a browser?

Thanks! And Happy New Year,
Rory





Ditch Neuton.
Go to Font Squirrel.

Download Calluna and install it.
Go back to Font Squirrel and use their fontface generator [expert setting].

Leave the font-weight as normal.
Changing it does not sit well cross browser.
Does this meet the "designers" approval?

Best,
~d

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
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] adding a shadow

[Alan Gresley]

On 3/01/2011 1:22 AM, Lisa Frost wrote:
[snip]

Thanks, i will give them all a whirl. Its not actually a requirement on the
site i am using, but there is a lot of white on white and i was trying to
think of a way to make the content of the site (which has a fixed width)
sort of stand out from the white background subtly. A solid border at the
moment just doesn't seem to be cutting it.



Lisa



I not quite sure if this is for container or boxes in your code but 
box-shadow has the advantage of spreading the area of the shadow to 
become larger than the element (not just offset to it). This is the 
forth and optional value in box-shadow.


box-shadow: 1em 1em 1em 1em  inset;

First is x-axis offset, then y-axis offset, then blur (optional), then 
spread (optional), then color (optional) and finally inset (inner 
shadow). Additionally you don't have to have just one shadow (drop 
shadow images can't do this). You can add as many as you like.


box-shadow: 1em 1em 1em , box-shadow: 1em 1em 1em 1em  inset;

I often use both box-shadow and border together for greater effect. A 
demo (I use the word depth instead of spread in the description.





--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] google hosted font question

[Chetan Crasta]

On Sun, Jan 2, 2011 at 8:23 PM, Philippe Wittenbergh  wrote:

> You're comparing apples and oranges. Windows (and XP especially) and Linux, 
> or OS X. What you have to compare is font-rendering on the same platform for 
> embedded vs native (installed) fonts.

Few web designers have issues with Windows' font rendering of local
fonts. It is only with embedded fonts that problems arise.

> The font used by David Laakso looks pretty decent on XP (it did so on my side 
> when we were working on that site), the other one is indeed a real deal 
> breaker - that confirms what I heard about those Google hosted fonts.

Sure, on Windows, some embedded fonts render better than others.
However, the problems are not due to poor quality of the fonts, but
with the way Windows and IE handle them. That is probably why the
issues don't occur in IE9 and FF beta 4 (according to
http://www.thebrightlines.com/2010/03/18/font-rendering-in-ie9/ ).

~Chetan
__
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] adding a shadow

[Philippe Wittenbergh]

On Jan 2, 2011, at 11:35 PM, David Laakso wrote:

> Fails in Mac 10.4 Camino/2.0.6 [always a cheerful word from this end:-) ]...

Camino 2.0.6 doesn't support the box-shadow property (Gecko 1.9.0).

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





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

Re: [css-d] google hosted font question

[Philippe Wittenbergh]

On Jan 2, 2011, at 11:24 PM, Chetan Crasta wrote:

> Every font that I have embedded looked better in Linux.

You're comparing apples and oranges. Windows (and XP especially) and Linux, or 
OS X. What you have to compare is font-rendering on the same platform for 
embedded vs native (installed) fonts.

Font-rendering on XP always looks poop in my book. And just for fun, try 
viewing some Japanese pages on XP. I get headaches just to think about it (the 
default Jpn fonts on XP are actually bitmaps, so 1985, and only look good a t 
24px or bigger).

> I have take four screenshots of two websites to illustrate the
> problem: http://roughtech.com/t/rendering.html

The font used by David Laakso looks pretty decent on XP (it did so on my side 
when we were working on that site), the other one is indeed a real deal breaker 
- that confirms what I heard about those Google hosted fonts.

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





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

Re: [css-d] adding a shadow

[David Laakso]

http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/



Fails in Mac 10.4 Camino/2.0.6 [always a cheerful word from this end:-) ]...

__
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] google hosted font question

[Chetan Crasta]

On Sun, Jan 2, 2011 at 6:09 PM, Philip Taylor (Webmaster, Ret'd)
 wrote:

>Do you have a citation for this, Chetan ?  I'd be interested
to read more concerning this artifact of Windows.
>

Apart from the link given earlier [1], I found two more articles that
describe the issue:
http://www.thebrightlines.com/2010/01/24/test-popular-professional-fonts-as-webfont/
http://www.thebrightlines.com/2010/03/18/font-rendering-in-ie9/

[1] http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/


@ Philippe Wittenbergh : I doubt that the issue has to do with the
'quality' of the fonts. The professional fonts tested by
Thebrightlines.com also show the same problems with web embedding on
Windows.

Every font that I have embedded looked better in Linux.

I have take four screenshots of two websites to illustrate the
problem: http://roughtech.com/t/rendering.html

Regards,
~Chetan
__
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] adding a shadow

[Lisa Frost]

>
> you can try this:
>
> http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
>
> (iirc, it was a bit of performance nightmare on IE, though - your
> alternative is using an image)
>
>
>
> Thanks, i will give them all a whirl. Its not actually a requirement on the
> site i am using, but there is a lot of white on white and i was trying to
> think of a way to make the content of the site (which has a fixed width)
> sort of stand out from the white background subtly. A solid border at the
> moment just doesn't seem to be cutting it.
>

Lisa
__
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] google hosted font question

[Philip Taylor (Webmaster, Ret'd)]

Philippe Wittenbergh wrote:

> In general, the fonts I've used did/do look pretty good on all Windows OS

Do have you have some sample pages that I can compare
with the Newton offering, Philippe ?

Philip Taylor
__
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] adding a shadow

[Philippe Wittenbergh]

On Jan 2, 2011, at 10:28 PM, Lisa Frost wrote:

> Hi Philippe,
> I need it to be supported by all browsers and old ones too, so my question
> really is do i need to use images to accomplish this?

you can try this:
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

(iirc, it was a bit of performance nightmare on IE, though - your alternative 
is using an image)

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





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

Re: [css-d] adding a shadow

[Ingo Chao]

IE5.5 and up support a proprietary DropShadow filter, technically,
this is more complex, but not an image. Does that fit your
requirements?

Anyhow, I'd vote for css3 and a degradation in IE. (Or, no shadow for
the base and progressively enhance it with CSS3)

Ingo



2011/1/2, Lisa Frost :
> Hi Philippe,
> I need it to be supported by all browsers and old ones too, so my question
> really is do i need to use images to accomplish this?
>
> Lisa
>
>
>
>> CSS3 box-shadow
>> http://www.w3.org/TR/css3-background/#the-box-shadow
>>
>> (not supported by IE 8 and older)
>>
>>
>>
>>
>>
>>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] adding a shadow

[Lisa Frost]

Hi Philippe,
I need it to be supported by all browsers and old ones too, so my question
really is do i need to use images to accomplish this?

Lisa



> CSS3 box-shadow
> http://www.w3.org/TR/css3-background/#the-box-shadow
>
> (not supported by IE 8 and older)
>
>
>
>
>
>
__
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] adding a shadow

[Philippe Wittenbergh]

On Jan 2, 2011, at 10:16 PM, Lisa Frost wrote:

> I want to add a 'shadow' to my 'container box' that is keeping my website
> centered.
> 
> I can find plenty of tutorials on the net for adding a drop shadow to images
> using css but they also use an image.
> 
> Can a shadow be added to a div purely using css and no images?
> 
> Anyone got a good tutorial you can point me too?

CSS3 box-shadow
http://www.w3.org/TR/css3-background/#the-box-shadow

(not supported by IE 8 and older)

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





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

Re: [css-d] google hosted font question

[Philippe Wittenbergh]

On Jan 2, 2011, at 6:04 PM, Chetan Crasta wrote:

> Phillip are
> due to Windows' horrible rendering of @font-face embedded fonts.
> Windows XP, Vista and 7 do not correctly apply font smoothing to
> embedded fonts. The issue affects all browsers on the windows
> platform.


I don't think this is true at all for all fonts and all browsers (otherwise 
Typekit and similar sites would be out of business before the end of the 
day...). Depending on the fonts and the user setting on XP in particular - 
clear type on/off, etc, fonts _can_ look poop on that OS and sometimes on Win 7 
/ Vista. Much depends on the hinting of the fonts. In general, the fonts I've 
used did/do look pretty good on all Windows OS

The Typekit blog has had some pretty decent articles on the subject, such as 
this one:
http://blog.typekit.com/2010/12/17/type-rendering-review-and-fonts-that-render-well/

But I've heard indeed that the Google hosted fonts look poor on Windows XP 
(they do look fine on OS X, Linux Ubuntu and Windows 7).


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





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

[css-d] adding a shadow

[Lisa Frost]

I want to add a 'shadow' to my 'container box' that is keeping my website
centered.

I can find plenty of tutorials on the net for adding a drop shadow to images
using css but they also use an image.

Can a shadow be added to a div purely using css and no images?

Anyone got a good tutorial you can point me too?

Thanks

Lisa
__
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] google hosted font question

[Philip Taylor (Webmaster, Ret'd)]

Chetan Crasta wrote:


The issues described by Phillip are
due to Windows' horrible rendering of @font-face embedded fonts.
Windows XP, Vista and 7 do not correctly apply font smoothing to
embedded fonts. The issue affects all browsers on the windows
platform.


Do you have a citation for this, Chetan ?  I'd be interested
to read more concerning this artifact of Windows.

** Phil.
__
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] google hosted font question

[Chetan Crasta]

> http://lettershop.ehclients.com/visual_diary_archive
>
> My issue is that the font weight is heavier in the browser than it looked in 
> our photoshop comp. Is there any way, using CSS, to get the font weight to 
> look lighter (less bold)? Or do I just explain to the designer that the way 
> text looks in photoshop is different from how it looks in a browser?

Are you using the Mac Photoshop? If so, the issue might be because of
Apple's approach to sub-pixel font smoothing -- see:
http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html
.
I don't know how Photoshop renders fonts in Windows, I use GIMP on Linux.

Btw, I think Neuton looks great. The issues described by Phillip are
due to Windows' horrible rendering of @font-face embedded fonts.
Windows XP, Vista and 7 do not correctly apply font smoothing to
embedded fonts. The issue affects all browsers on the windows
platform. Linux does not have this issue.
One possible work around for this is to apply the proprietary Alpha
image loader filter to elements that contain embedded fonts. However,
this inconsistently works and it is only for IE. I don't think it is
worth the effort. See:
http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/

So for now, it looks like one has to just accept the fact that
embedded fonts wont look good in Windows

~Chetan
__
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] A Twitter header with CSS

[Gabriele Romanato]

Another example of good CSS use in a practical context:

http://onwebdev.blogspot.com/2011/01/twitter-header-with-css.html

HTH :-)

http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








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