Re: [css-d] CSS3 Please code and Explorer support
On Monday 29 March 2010 17:14, David Hucklesby wrote: On 3/28/10 8:59 PM, Dave M G wrote: CSS-d, I got some code from the CSS3 Please web site: http://css3please.com/ For the box-shadow effect, it indicates that it can be used in IE 6, 7, and 8. However, when I look at it with my windows machine, which has IE8, it doesn't work. The box shadow is rendered like 2 pixel wide border on the right and bottom sides. No gradient or transparency. I'd prefer to see an example of your page. Does it validate otherwise, is IE in quirks or backwards compatibility mode? Those Microsoft filters only work when the element they are applied to has layout.[1] Try adding zoom: 1; to the ruleset for the filter... I understood 'zoom' to be a Microsoft proprietary CSS property which does not validate. I would set a height or width value instead which achieves the same purpose. http://reference.sitepoint.com/css/zoom -- Michael --- __ 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] Nested floats in IE6/7
2010/3/28 Bob Bob superjunkymon...@live.com: ... Is it bad practice to nest floats with the width:auto float:left on the container + float:right on the child? I've read that every browser handles this differently but, on a test case, IE8 + FF3.6 + Opera 10.51 have the same results. It is outdated information? :) If it's ok to nest floats, how can I fix the problem elegantly in older browsers? ( http://css-class.com/test/bugs/ie/float-auto-width-expansion-bug.htm ) It is ok to nest floats. For IE7 and IE6, a widthless container float with layout descendants might not shrink to fit. http://dev.l-c-n.com/IEW2-bugs/shrinkwrap.php There is no elegant solution, so you'd have to post an URL of your page in question. Thanks, Ingo __ 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] CSS3 Please code and Explorer support
Those Microsoft filters only work when the element they are applied to has layout.[1] Try adding zoom: 1; to the ruleset for the filter... I understood 'zoom' to be a Microsoft proprietary CSS property which does not validate. I would set a height or width value instead which achieves the same purpose. It is, but then, so is filter. When we're targeting IE specifically to get its other proprietary CSS properties to work, I see no problem triggering hasLayout with a different MS proprietary property. ---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] CSS3 Please code and Explorer support
On Mar 29, 2010, at 12:59 PM, Dave M G wrote: http://css3please.com/ For the box-shadow effect, it indicates that it can be used in IE 6, 7, and 8. However, when I look at it with my windows machine, which has IE8, it doesn't work. The box shadow is rendered like 2 pixel wide border on the right and bottom sides. No gradient or transparency. Are the makers of CSS3 Please simply wrong about IE support for that effect, or is there some other issue I'm not getting? I don't think they are wrong. A solid kind of border is what you get with those filters. I don't know if MS has any filter that does blur effects – and it would probably be a performance nightmare. I've scrolling speed on pages that have (large) boxes with box-shadow slow down to a crawl on both Gecko and WebKit browsers. Those MS filters are known to be perf bottlenecks. And yes, you almost certainly need a hasLayout trigger; I'm partisan to use the zoom property for that. Note that you can give the box-shadow some kinda of transparency if you specified it in hex values #rrggbbaa (ex. #9980 would give a medium grey with a 0.5 alpha). If I remember correctly, it looks between slightly crappy and completely crappy. (I've never used those MS things on a live site) 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] CSS3 Please code and Explorer support
Dave, David: this is going to become obsolete with version 9 of IE, which will support most of the CSS3 Color module. bye, ps. check out on MSDN blog. On Mar 29, 2010, at 7:14 AM, David Hucklesby wrote: On 3/28/10 8:59 PM, Dave M G wrote: CSS-d, I got some code from the CSS3 Please web site: http://css3please.com/ For the box-shadow effect, it indicates that it can be used in IE 6, 7, and 8. However, when I look at it with my windows machine, which has IE8, it doesn't work. The box shadow is rendered like 2 pixel wide border on the right and bottom sides. No gradient or transparency. Those Microsoft filters only work when the element they are applied to has layout.[1] Try adding zoom: 1; to the ruleset for the filter... [1] http://www.satzansatz.de/cssd/onhavinglayout.html Cordially, David -- __ 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/ 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/
[css-d] New to css
Hi, Quite new to css coding, so these questions may seem rather basic. If you click on the link below, you see the beginnings of a customer self-management page that I am developing. I want to: 1)Experiment with left/center/right alignments of the legend headings and the buttons; 2)Add a background image to each form within the table. Can it be done? http://scripts.coastalind.com/testa.html Thanks, Scott Lineberger IT Director Coastal Industries, Inc Jacksonville, FL 904.861.5434 (direct) 904.861.5456 (fax) __ 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] New to css
Experiment with left/center/right alignments of the legend headings and the
buttons;
Add a background image to each form within the table.
Can it be done?
Yes.
I'm presuming that you want each form to be different, right? So you need to
give each one a way to select it. Either a class or an id.
Ex:
form id=track
...
/form
form id=account
...
/form
form id=order
...
/form
And then you can be more specific in your CSS.
#track { /* the element with id=track (in this case a form) */
background-image: url('relative/path/to/image/file.jpg');
}
#track legend { /* the legend tag inside the form with id=track */
text-align: left;
}
Voila!
If you use class names (form class=track) instead of id's then put in a dot
(.) instead of a hash (#).
---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] teaching float v. absolute positioning
Hey all, I teach web design and dev courses at the college level and often steer students away from absolute positioning as a first-choice CSS layout solution in favor of float. I've read John Faulds' post on the pitfalls of abs pos here http://csscreator.com/node/11291 and use this as a summary of the discussion for my students. Do any of you know of other hearty debates on the matter that would illuminate students who will likely enter the professional web design/dev field? Other opinions not covered in the CSSCreator thread? -- Jared M. Stein Director of Instructional Design Services Utah Valley University __ 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] New to css
On Mon, Mar 29, 2010 at 11:28 AM, Climis, Tim tcli...@indiana.edu wrote: If you use class names (form class=track) instead of id's then put in a dot (.) instead of a hash (#). ---Tim If you are truly new to css, you might wonder when to use id and when to use class. id is for unique elements -- on a page by page basis. Thus any element (such as a div) that is given an id should be unique. div id=header .. /div Things like footer, menu, maincontent, masthead, or the form. id is like your driver's license -- one to a customer. For any elements that will be used more than once on a page you need to use class. class is like a room full of students. they may all be special in their own way but they share common characteristics that can be assigned together using the class name. Just covering the bases in case you haven't stumbled across this distinction yet. Regards, Claude __ 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] New to css
Thanks, Tim, that did the trick and put me on the right track. Now, if I could
only decide is tables are really all that evil!
Thanks,
Scott
-Original Message-
From: Climis, Tim [mailto:tcli...@indiana.edu]
Sent: Monday, March 29, 2010 2:29 PM
To: Lineberger, Scott
Cc: 'css-d@lists.css-discuss.org'
Subject: RE: New to css
Experiment with left/center/right alignments of the legend headings and the
buttons;
Add a background image to each form within the table.
Can it be done?
Yes.
I'm presuming that you want each form to be different, right? So you need to
give each one a way to select it. Either a class or an id.
Ex:
form id=track
...
/form
form id=account
...
/form
form id=order
...
/form
And then you can be more specific in your CSS.
#track { /* the element with id=track (in this case a form) */
background-image: url('relative/path/to/image/file.jpg');
}
#track legend { /* the legend tag inside the form with id=track */
text-align: left;
}
Voila!
If you use class names (form class=track) instead of id's then put in a dot
(.) instead of a hash (#).
---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] New to css
Lineberger, Scott wrote: Thanks, Tim, that did the trick and put me on the right track. Now, if I could only decide is tables are really all that evil! Thanks, Scott Setting aside the moral implications, having made a transition from a site built completely around tables to one based on div, the latter, in my experience and opinion, takes much better advantage of CSS. I have been able to do everything using div as I did using table, in a much more flexible manner, and, again in my opinion, with a slight edge in favor of design aesthetics. Bill B __ 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] Problems with IE6
Hi Does anybody have any solutions on how to get around the following problem when viewing the following page in IE6 http://www.ian.thfctalk.com/ccosmetic/index.php The dropdown menu displays behind the main images on the homepage? On IE8, Firefox, Chrome etc it works fine - it's just IE6 that is playing up. Any ideas or hacks to get around this problem would me most appreciated __ 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] New to css
On Mon, Mar 29, 2010 at 2:16 PM, Bill Braun bbr...@hlthsys.com wrote: Setting aside the moral implications, having made a transition from a site built completely around tables to one based on div, the latter, in my experience and opinion, takes much better advantage of CSS. I have been able to do everything using div as I did using table, in a much more flexible manner, and, again in my opinion, with a slight edge in favor of design aesthetics. Bill B I have to agree with the go whole hog into css and leave the tables behind approach. After a very rocky first week or two things are working about much better. I am very happy with the subtle aesthetic improvements that strict css affords. During those first few weeks getting my divs to behave was like trying to corral a herd of kittens. Things would pop up here and pop up there. I still don't know what I was doing wrong. All of a sudden it was coming out right. If I didn't know better I would say that they updated Firefox. Because I could swear my code is the same. But it wasn't. I had discovered the one or two tricks that let my divs behave themselves. So don't be surprised if you have a few days of what in the heck is going on. But, after that you will be happy you dropped the tables. However I still expect to run into some problem that I might need tables for. Just haven't yet. I don't have a philosophical objection to tables. Just don't need them at the moment. Got tired of colspan and rowspan I guess. :) Regards, Claude __ 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] New to css
On Monday, March 29, 2010 5:02:01 pm you wrote: Thanks, Tim, that did the trick and put me on the right track. Now, if I could only decide is tables are really all that evil! I don't know that they're all _that_ evil, but I don't like them much, for what it's worth. On the other hand, without them, you have to get your hands really dirty really quickly. It might be worth it to keep the tables, and just play with the basic-ish formatting stuff for now until you get the hang of selectors and specificity, and then aim for bigger and better (and exponentially more annoying) things like the box model, and floats, and positioning. ---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] Problems with IE6
On 30/03/2010, at 11:27 AM, Joe Jackson wrote:
Hi
Does anybody have any solutions on how to get around the following
problem
when viewing the following page in IE6
http://www.ian.thfctalk.com/ccosmetic/index.php
The dropdown menu displays behind the main images on the homepage?
On IE8,
Firefox, Chrome etc it works fine - it's just IE6 that is playing up.
Any ideas or hacks to get around this problem would me most
appreciated
It's an IE z-index bug. One way of solving it would be...
#globalnav {
position: relative;
z-index: 2;
}
.home-main-text-wrapper {
z-index: 1;
}
This won't hurt any other browsers but I would put it in an IE
stylesheet anyway with a comment as to what IE bug is being handled
just to keep the IE nonsense separate.
Cheers, 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] Problems with IE6
On 3/29/10 6:54 PM, Tim Snadden wrote:
On 30/03/2010, at 11:27 AM, Joe Jackson wrote:
Hi
Does anybody have any solutions on how to get around the following
problem
when viewing the following page in IE6
http://www.ian.thfctalk.com/ccosmetic/index.php
The dropdown menu displays behind the main images on the homepage?
On IE8,
Firefox, Chrome etc it works fine - it's just IE6 that is playing up.
Any ideas or hacks to get around this problem would me most
appreciated
It's an IE z-index bug. One way of solving it would be...
#globalnav {
position: relative;
z-index: 2;
}
.home-main-text-wrapper {
z-index: 1;
}
This won't hurt any other browsers but I would put it in an IE
stylesheet anyway with a comment as to what IE bug is being handled
just to keep the IE nonsense separate.
Cheers, Tim
Tim beat me to it. But this alone will do it:
.globalnav {
position: relative;
z-index: 1;
}
Cordially,
David
--
__
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] Problems with IE6
On 30/03/2010, at 3:06 PM, David Hucklesby wrote:
#globalnav {
position: relative;
z-index: 2;
}
Tim beat me to it. But this alone will do it:
.globalnav {
position: relative;
z-index: 1;
}
And I misidentified 'globalnav' as an id too. FWIW if something is
only going to appear once (like global nav) I would make it an id
rather than a class.
__
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] New to css
Bill Braun said: Setting aside the moral implications, having made a transition from a site built completely around tables to one based on div, the latter, in my experience and opinion, takes much better advantage of CSS. I have been able to do everything using div as I did using table, in a much more flexible manner, and, again in my opinion, with a slight edge in favor of design aesthetics. Based on divs? Hello? What about based on structural semantic markup and CSS-layout techniques? You guys - Bill, Claude - sound like you have contracted divitis* in your migration to CSS-layout techniques. Better find a cure. Wiktionary definition of divitis http://en.wiktionary.org/wiki/divitis Jeffery Zeldman quote on divitis with code example http://adam.kahtava.com/journal/2009/07/15/cronic-divitis-and-classitis- what-is-it/ The cure is IMHO semantic markup methods. Robert Nyman has a nice brief introduction: Explaining Semantic Mark-Up http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/ /MB Content precedes design. Design in the absence of content is not design, it's decoration. -- Jeffrey Zeldman http://twitter.com/zeldman/statuses/804159148 __ 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/
