Search the web
Sign In
New User? Sign Up
ydn-javascript · Yahoo! User Interface Library Group
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Want your group to be featured on the Yahoo! Groups website? Add a group photo to Flickr.

Best of Y! Groups

   Check them out and nominate your group.
Having problems with message search? Fill out this form to ensure your group is one of the first to be migrated to the new message search system.

Messages

  Messages Help
Advanced
YUI CSS Problems   Message List  
Reply | Forward Message #27139 of 52127 |
Re: [ydn-javascript] YUI CSS Problems

Hey Howard,

I've simplified it:

  • Divide pixels by 13 for ems. Use this -- to the thousandth's place -- for conforming browsers. For other browsers divide pixels by 13.333. Hide this secondary value behind a star-property parsing exploit (or filter). 

For example, for a page width of 610px:

<style>
#my-page-width {
width: 46.923em; /* conforming browsers first (610/13) */
*width: 45.750em; /* then to other browsers (610/13.3333) */
}
</style>

Thanks,
Nate


On Mar 10, 2008, at 7:53 PM, howard chen wrote:

Hi Nate,

Thanks for your answer.

Final question: How do you come up with the magic value for IE *width,
i.e.  "0.9759" ?

Howard


On Mon, Mar 10, 2008 at 6:01 PM, Nate Koechley <natek@...> wrote:






Hey Howard,

1) Yes, this is the right place to ask about all things YUI, including the
CSS Foundation.

2) Base is a convenience file that puts back -- in a normalized way -- some
of the stuff that Reset takes away. You can use it anywhere you please, but
often it is redundant since it's unlikely that the font size it defines for
headers, for instance, is the exact size your project calls for.

Many people use Base as a "snippets library" to see, for example. how to put
bullets back on unordered list items.

Other people use Base when they want readable basic HTML. Sometimes I take
write or take notes in HTML format, and find it useful to add Base to the
page for a simple readable format.

3) This isn't supported feature, but because it's CSS you, of course, able
to overwrite the declarations. The "preset templates" use "negative margins"
as you can see here in a snippet from the file:


.yui-t1 .yui-b {float:left;width:12.30769em;*width:12.00em;}
.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}

The arithmetic for getting the width-in-ems is the same as when customizing
page width. That formula, as well as a reminder that you'll need to set one
width for non-IE then another width for IE is on this page:

http://developer.yahoo.com/yui/grids/#custom_page_width

4) I'm not exactly sure what your fourth question is. Can you provide more
detail?


Thanks,
Nate









On Mar 4, 2008, at 6:44 AM, howard chen wrote:




Hello,

Some questions about YUI CSS,

1. Is this group (ydn-javascript) the right place for asking Grid CSS
questions? I can't find any other place...

2. When should base.css should be used? I think most sites (including
Yahoo) are not using base.css

3. Is it possible to have custom column width when using grids.css ?
E.g. in http://developer.yahoo.com/yui/grids/builder/, you can adjust
the width of doc, but not the columns...seems not that flexible

4. Should be progress with the grid building (nested DIV) until no
further DIV are being used?

Thanks.

Howard.







Tue Mar 11, 2008 8:49 am

nate.koechley
Offline Offline
Send Email Send Email

Forward
Message #27139 of 52127 |
Expand Messages Author Sort by Date

Hello, Some questions about YUI CSS, 1. Is this group (ydn-javascript) the right place for asking Grid CSS questions? I can't find any other place... 2. When...
howard chen
setesting003
Offline Send Email
Mar 4, 2008
2:45 pm

Hey Howard, 1) Yes, this is the right place to ask about all things YUI, including the CSS Foundation. 2) Base is a convenience file that puts back -- in a...
Nate Koechley
nate.koechley
Offline Send Email
Mar 10, 2008
10:03 am

Hi Nate, Thanks for your answer. Final question: How do you come up with the magic value for IE *width, i.e. "0.9759" ? Howard...
howard chen
setesting003
Offline Send Email
Mar 11, 2008
2:53 am

Hey Howard, I've simplified it: Divide pixels by 13 for ems. Use this -- to the thousandth's place -- for conforming browsers. For other browsers divide pixels...
Nate Koechley
nate.koechley
Offline Send Email
Mar 11, 2008
8:49 am

Hi Nate, ... Yes, this is more clear, thanks. One more question: I really appreciated the way Grid CSS divide the left and the right regions not just using...
howard chen
setesting003
Offline Send Email
Mar 11, 2008
2:01 pm

Hey, ... If you're talking about the "template preset" part of Grids, for instance .yui-t1 that controls the two .yui-b's, that technique is commonly referred...
Nate Koechley
nate.koechley
Offline Send Email
Mar 11, 2008
3:31 pm

Thank you again....
howard chen
setesting003
Offline Send Email
Mar 11, 2008
4:59 pm

... - ... 13.333. ... (or ... (610/13) */ ... (610/13.3333) */ ... Hi Nate, Why your calculation is different from: ...
r9madridhk
Offline Send Email
Mar 17, 2008
4:43 am

This is correct: http://tech.groups.yahoo.com/group/ydn-javascript/message/27139 The site and documentation will by updated to conform to that newer ...
Nate Koechley
nate.koechley
Offline Send Email
Mar 17, 2008
6:26 pm

... Hi Nate, So you mean current 2.5.0 build of YUI is already outdated? E.g. in the 2.5.0 grid.css width:57.69em; *width:56.301em; min-width:750px; If refer...
howard chen
setesting003
Offline Send Email
Mar 18, 2008
3:26 am

Hi folks, Based on this answer I tried to modify the t6 template to get a wider sidebar. I did that by overriding some rules: .yui-t6 .yui-b...
jacobodevera
Offline Send Email
May 12, 2008
1:10 am

Hi, when I asked the author of YAML (not sure if you know this CSS framework, IMO it is a very sophisticated one) about what he thinks are the biggest...
Klaudiusz Szatanik
klaudiusz.sz...
Offline Send Email
Mar 17, 2008
11:06 pm

Hey Klaudiusz, YUI provides flexible percentage-based layouts. And layouts tied to font-size instead of viewport size. And combo layouts. How? There are three...
Nate Koechley
nate.koechley
Offline Send Email
Mar 17, 2008
11:31 pm

Hi Nate, Thank you for the explanation of the three types of functionality in Grids. Now I see what was standing there all the time in the Grids ...
Klaudiusz Szatanik
klaudiusz.sz...
Offline Send Email
Mar 18, 2008
7:10 pm

Hi Nate, I think you already answered more or less a similar question here: http://tech.groups.yahoo.com/group/ydn-javascript/message/25024 "It should be...
Klaudiusz Szatanik
klaudiusz.sz...
Offline Send Email
Mar 18, 2008
9:14 pm

That's it, yes. Thanks for digging that up and reporting for the group's benefit. Thanks, Nate...
Nate Koechley
nate.koechley
Offline Send Email
Mar 18, 2008
9:19 pm

I think I get it now: 1. case – two fix columns on the right and left: e.g. left and right columns fix with a width of 180px: here I have to nest "yui-t4"...
Klaudiusz Szatanik
klaudiusz.sz...
Offline Send Email
Mar 18, 2008
11:07 pm

Hi Nate, could you have a look on this example: http://www.szatanik.eu/js/yui_2.5.0/examples/_tests/_1d.html Besides there's a bug (the right column falls down...
Klaudiusz Szatanik
klaudiusz.sz...
Offline Send Email
Mar 19, 2008
11:47 am

I think I get it now: 1. case – two fix columns on the right and left: e.g. left and right columns fix with a width of 180px: here I have to nest "yui-t4"...
klaudiusz szatanik
klaudiusz.sz...
Offline Send Email
Mar 20, 2008
2:02 am

Ooops, this is an answer I send with my mail app (mac osx) maybe 2 days ago and finally it arrived. Strange, isn't it? That day I realized that my question...
Klaudiusz Szatanik
klaudiusz.sz...
Offline Send Email
Mar 20, 2008
9:57 am
Advanced

Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines - Help