[css-d] CSS Zibaldone is gone
Hi, for those on this list who know my work on CSS tests for the W3C CSS Test Suite, I'd like to inform you that today I've closed my old website - http://www.css-zibaldone.com - since I can't maintain it anymore. Further, the CSS material contained there is quite obsolete (more than 5 years ago). I've explained my reasons here: http://gabrieleromanato.name/css-zibaldone-is-gone/ If you need my older tests, I've created a full backup, though. You can update the links on your websites with this URL: http://gabrieleromanato.name/ Sorry, but this was a relic of a past age that simply cannot survive today. :-) bye :-) Gabriele Romanato Referente IWA ITALY - Regione Abruzzo International Webmasters Association Italia http://www.iwa.it | e-mail: abru...@iwa.it Professionista Web - Legge 4/2013 http://gabrieleromanato.com/ http://gabrieleromanato.name/ (English) __ 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] CSS Media Queries: a singularity with orientation modes
Hi,
the thing that I really don't understand in the Media Queries module is how the
'and' clause is treated by browsers. I'm a programmer, so to me this clause is
a boolean assertion which means that if both conditions are true, then the
browser should apply the rule/s.
I'm stumbled in a strange case with orientation modes:
@media screen and (orientation: landscape ) {
/* ... */
}
As far as I know, browsers - even desktop browsers - support the
DeviceOrientation event plus a series of APIs related to orientation. The point
is that on my Mac I actually cannot rotate my screen! Further, what have JS
APIs to do with CSS? Do they affect indirectly the way a browser interprets
certain rules (like in this case?).
Here's the test case:
http://codepen.io/gabrieleromanato/pen/KmHct
Hope you can help me to find out what I'm missing. :-)
Thanks.
Gabriele Romanato
Referente IWA ITALY - Regione Abruzzo
International Webmasters Association Italia
http://www.iwa.it | e-mail: abru...@iwa.it
Professionista Web - Legge 4/2013
http://gabrieleromanato.com/
http://gabrieleromanato.name/
(English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-sizing bug in generated content in IE 10 ?
You wrote: font-size: 0.5rem. Is it a typo? Anyway, I think it's somewhat
related to the cascade and inheritance behavior when applied to
pseudo-elements. You first declared a font-size on a type selector, p, with
a pseudo-element, then you declared a class with another pseudo-element on
the same element type (p). The point is that they're both Ps, so they
inherit from each other. This is a controverted question. I think this IE's
behavior **might** be correct.
On Thu, Apr 25, 2013 at 12:41 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote:
Please take a look at :
http://hellenic-institute.rhul.ac.uk/research/Etheridge-development/Test/
(transcript below) and compare its appearance in IE 10
and another browser (I use Seamonkey; it will almost
certainly appear in Firefox as it does in Seamonkey,
as they use the same rendering engine).
If you use page zoom (Ctrl +) to make everything clearly
visible, you will see that in IE, the generated content
on line two is about one half of the generated content
on line one, whilst the generated content on line four is
exactly the same size as that on line three. Lines one
and two use em units for the generated content, lines
three and four use rem units. The only difference between
the first and second line of each pair is that the P element
is placed in a class, and the CSS rule applies both to the
classless and classed P elements.
It seems to me that IE may be incorrectly applying the font-size
attribute of the rule twice in the case of the classed P elements
(but not the content attribute) -- once for the P and once for
the class; what do others think ?
Philip Taylor
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
HTML
HEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
TITLEIE generated content test/TITLE
STYLE type=text/css
DIV.em P::before, DIV.em P.EOF::before
{font-size: 0.5em; content:em-units: }
DIV.rem P::before, DIV.rem P.EOF::before
{font-size: 0.5rem; content:rem-units: }
/STYLE
/HEAD
BODY
DIV class=em
PLine one/P
P class=EOFLine two/P
/DIV
DIV class=rem
PLine three/P
P class=EOFLine four/P
/DIV
/BODY
/HTML
__
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/
--
Gabriele Romanato
Referente IWA ITALY - Regione Abruzzo
International Webmasters Association Italia
http://www.iwa.it | e-mail: abru...@iwa.it
Professionista Web - Legge 4/2013
http://gabrieleromanato.com/
http://gabrieleromanato.name/ (English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best solution to make internet explorer 8 pages load in IE9 standard mode
The point is to avoid this approach whenever it's possible. First, this backward-compatible mode was originally introduced to allow nonstandard web sites to not break in newer versions of IE. Second, this compatibility mode will be sooner or later abandoned by IE (IE10, for example, dropped its support to conditional comments to basically demonstrate its consistent standard support). In that vein, you should **not** follow this approach. Instead, embrace graceful degradation as a more useful way to develop web sites. This approach is followed by big stars such as Google and Yahoo (Yahoo originally introduced this idea through a detailed browser support chart), so why you insist with sticking to tricks and hacks? Bye :-) On Fri, Apr 19, 2013 at 6:05 PM, David Hucklesby huckle...@gmail.comwrote: On 4/19/13 1:31 AM, AngelPSan wrote: Hi, anyone knows the definitive solution to make internet explorer web pages load in standard mode? Boy, have you opened a can of worms! Here's what Microsoft[1] has to say (about IE 9) - Important The new standards support in Internet Explorer 9 requires the browser to be in Internet Explorer 9 Standards mode (“IE9 mode”). The best way to do this is to use a standards !DOCTYPE directive and no X-UA-Compatible meta tag or HTTP header. The !DOCTYPE to invoke IE9 mode is the following: !DOCTYPE html ... Personally, I use the X-UA-Compatible flag no matter what, as IE 8+ displays a Compatibility mode button if I don't. This button switches IE to the anything-but-standards mode that emulates IE 7. As it appears next to the browser's refresh button, so very easily pressed by mistake. :( The X-UA-Compatible META was introduced in IE 8. Earlier versions use a valid DOCTYPE to force so-called standards mode. But it must come first on your page. Leading comments or an XML declaration in front will fail to enforce standards mode. There are additional issues if you add lots of class names to the HTML tag, for example if you use conditional class names or Modernizr. You can read about those issues here: http://nicolasgallagher.com/**better-conditional-classnames-** for-hack-free-css/http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ Definitive solution? I don't know. But this is to the best of my current knowledge. I do hope it helps. [1] http://msdn.microsoft.com/en-**us/ie/ff468705http://msdn.microsoft.com/en-us/ie/ff468705 -- Cordially, David __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ -- Gabriele Romanato Referente IWA ITALY - Regione Abruzzo International Webmasters Association Italia http://www.iwa.it | e-mail: abru...@iwa.it Professionista Web - Legge 4/2013 http://gabrieleromanato.com/ http://gabrieleromanato.name/ (English) __ 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] site review
Very well done. Try also to use orientation:portrait/landscape to a finer control over device orientation. E.g. my http://boxer.waapp.it/ a web app for iPad. :-) Thumbs up! :-) __ 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] JavaScript animations and CSS animations in web apps
I generally tend to use CSS3 animations in mobile web apps whenever it's possible, but sometimes I get stuck when the app's requirements are too complex. So I usually mix up basic CSS3 animations with JS routines in order to not end up with messy markup as in many Codrops examples (you know, form elements used to create slideshow effects and so on). What I don't really know is if there's a common best practice to follow when creating complex web apps which feature a lot of advanced effects. CSS3 animations are faster than JS animations, but when your boss or your client has a Flash-like idea about how your effects should be made, well it's difficult to me to stick to pure CSS animations. What's your approach when you design complex web apps? I'd really like to get some hints about the role of CSS animations in that context. Thanks in advance. Gabriele __ 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] JavaScript animations and CSS animations in web apps
Thanks so much Barney! :-) __ 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] Opposing floats not lining up
Hi,
There's simple solution to set up a dl with such styles:
Dt {
float: left;
clear: left;
width: xx;
}
Dd {
Margin-left: xx;
}
Another solution is to use relative positioning only, but the final result
is not so simple to achieve in all browsers.
HTH.
Gabriele Romanato
__
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] Minimal CSS Design: searching for inspiration
Hi all, I'm actually kinda bored of all these resource websites who present pseudo-minimal CSS designs which feature a lot of graphics and decorations instead. I'm searching for a true minimal CSS design, much like one of the past designs of David Laakso site. I need a strong focus on my contents, just as Nicolas Gallagher shows on his blog. All information will be greately appreciated. Thanks in advance. Gabriele http://gabrieleromanato.com http://blog.gabrieleromanato.com/ (English) __ 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] Custom CSS resets
We're going a little off-topic here. ;-) My point is not about tags, but about how a CSS reset should be used. Eric's reset is a general-purpose tool that should be always tailored to your specific needs and not copied and pasted without knowing exactly what it does (as many authors do). Since CSS is not a programming language, authors can modify the original file by adding or removing specific rules with ease. Eric's reset is not like jQuery or Prototype: its core can be modified to address specific projects. For example, if you use XHTML and not HTML5 you can remove the reference to HTML5 tags. And so on. :-) -- http://gabrieleromanato.com/ http://blog.gabrieleromanato.com/ (English) __ 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] Custom CSS resets
Hi,
CSS resets are useful (I mean, really useful) on a specific range of
projects. For example, they're useful on web apps because they can
also be combined with other frameworks to get you started ASAP.
They're less useful when a significant portion of your site contents
are generated by users (such as in a CMS).
In this case, resets should be rewritten in a way that allows you to
leave some browser's default styles intact or at least not
overwritten. Consider this:
b, i {
font-style: normal;
font-weight: normal;
}
If you forget to redefine your styles, a client of yours might call
you just to say that all of its MS Word contents inserted in the CMS
editor look like plain text without any kind of basic formatting (bold
and italic).
In these particular projects, CSS resets should be selective and not massive.
HTH
Gabriele
--
http://gabrieleromanato.com/
http://blog.gabrieleromanato.com/ (English)
__
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] Safari Mobile iPad and border-radius: 50%
Hi all, does anyone know if Safari Mobile on iPad (2 and 3) correctly renders boxes with border-radius: 50%? Last time I saw one of my pages on iPad 2, all boxes with border-radius: 50% were rendered as plain squared boxes. Thanks in advance. :-) Gabriele (currently iPad user... it was my brother's gift :-D) -- http://gabrieleromanato.com/ http://blog.gabrieleromanato.com/ (English) __ 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] Text fonts
Hi,
when you download a web font from Font Squirrel you also get a sample
page and all the necessary CSS code to make your web font work on your
site. To make it simple:
1. upload the folder when all the web fonts are contained
2. upload the stylesheet provided with the download in the same
directory when the web fonts folder has been previously uploaded
3. include the stylesheet at the very top of your main CSS file:
@import url(webfont/stylesheet.css);
(Alternatively, you can use link/ or copy the content of the
stylesheet in your main CSS file)
4. use the web font:
body {
font: 100% 'WebFont', sans-serif;
}
enjoy :-)
On Mon, May 14, 2012 at 6:47 AM, meera kibe meera_k...@yahoo.com wrote:
Hi
I want to use beautiful fonts from Font Squirrel for my website. This is the
first time i'm going to be doing so would really appreciate if anyone
suggestions a quick and precise resource to ready about doing this... how to
go about
Thanks in advance
Meera
__
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/
--
http://gabrieleromanato.com/
http://blog.gabrieleromanato.com/ (English)
__
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] Responsive Design Issue
Why should we get rid of a piece of design when you have a CSS3 property for that? Use background-size. It works. :-) On Tuesday, April 24, 2012, Carol Swinehart ckfswebdevelopm...@gmail.com wrote: How do you get rid of a background image or multiple background images in resolutions for handheld less then 768? Thanks Carol __ 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/ -- http://gabrieleromanato.com/ http:// http://onwebdev.blogspot.com/blog.gabrieleromanato.com/ (English) __ 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] ie 6/7/8
Perfect on iPad. You really scored high, as always. On Monday, April 23, 2012, David Laakso laakso.davi...@gmail.com wrote: Your comments and suggestion on this site http://ccstudi.com/ in Internet Explorer 6/7/8 are appreciated. Thanks. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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/ -- http://gabrieleromanato.com/ http:// http://onwebdev.blogspot.com/blog.gabrieleromanato.com/ (English) __ 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] [off-topic] my blog onwebdev changed its address
Hi, for those who follow onwebdev.blogspot.com, here's the new address: http://blog.gabrieleromanato.com/ All the Blogger's contents have been imported. bye Gabriele http://gabrieleromanato.com http://blog.gabrieleromanato.com/ (English) __ 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] CSS redesign: criticisms, comments and similar are welcome
Hi folks, I've recently launched a massive redesign of my Blogspot blog. Now it's much more CSS3 compliant than before. http://onwebdev.blogspot.com/ Now I've also have an Italian official website that's going very well. Honestly, do you think that I should create an /en section there or stick to Blogspot (which is also going very well)? http://gabrieleromanato.com Any suggestion to improve the layout? Any CSS3 trick that I should try? Let me know. ps. Oh yes, IE: honestly I work on a Mac and I test on IE only when clients ask me to do so Bye Gabriele http://www.css-zibaldone.com http://gabrieleromanato.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] CSS3: creating social network icons? yes, we can!
Hi folks, after several weeks of hard work on WP themes and Zend Framework PayPal classes, I moved back to my first love, CSS. and here's the result: http://onwebdev.blogspot.com/2011/09/css-create-social-network-icons.html dimensions are in ems, so they should fit your layout. I have to fix some accessibility issues related to the markup used in the demo. if you have any WAI-compliant solutions, let me know. :-) Gabriele ps. look ma, no images! ;-) http://www.css-zibaldone.com http://gabrieleromanato.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] New blog layout: comments request
Hi all, I've just remade the default layout of my blog at http://onwebdev.blogspot.com/ . Comments are welcome. I'm not interested in tech comments, such as IE testing or browser compatibility, but only in your impressions. thanks :-) ps. @David Laakso: The base font size now is pure 100%, 1em, whatever. Pure Arial. Now you can't comment this email with your usual remark on font size! :-D (yep, I got this bad habit of lowering the font size in 2009 or so... :-) ). pps. sorry for my silence, but I got a lot of work to do on a Zend- based web app. :-) Gabriele http://www.css-zibaldone.com http://gabrieleromanato.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] Logo in a div
Hi Brian, CSS works better when the page structure is not minimal. Putting a logo inside a div allows you to add further styles to the context you're currently using. For example, you could add a background image (or more images with CSS3) to the div, thus creating a more visually appealing effect for your logo. It's a design choice, not a semantic choice in the strict sense of the term. HTH :-) Gabriele Romanato -- 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 [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] Designing layouts with grey boxes
Hi all, this is more a recommendation than a quick tutorial: http://onwebdev.blogspot.com/2011/07/css-designing-layouts-with-grey-boxes.html Personally, I found this technique very useful in many projects. HTH :-) Gabriele 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 [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] Fwd: Designing layouts with grey boxes
-- Forwarded message -- From: Gabriele Romanato gabriele.roman...@gmail.com Date: Tue, Jul 5, 2011 at 5:38 PM Subject: Re: [css-d] Designing layouts with grey boxes To: ster...@gmail.com @David: Since I had to develop that famous project we talked about in our Skype chats where we changed over 8 layouts in 4 months :-) @Barney: I totally agree. Btw, did you read the book of Andy Clarke Transcending CSS? I took the idea from there. ;-) @Ted: There's no code behind. :-( I simply used Photoshop to create the image. I recommend you the book mentioned above where this technique is explained in greater details. thanks. :-) -- http://www.css-zibaldone.com/ http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) -- 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 [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] Designing layouts with grey boxes
David, that's your style and I love it! Hope I can visit your state someday just to smell the taste of old, good books in some mysterious, Poe-like bookshop! :-) -- 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 [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] HTMLdog website / Son of Suckerfish
Consider also the possibility of more interesting effects with CSS3 transitions. It would be the next generation of SuckerFish menus: C3-SFM :-) 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 [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] Jump effect on icons
Hi all, continuing the series what web 2.0 requires from a CSS developer, here's an implementation of a jump effect on social icons: http://onwebdev.blogspot.com/2011/06/css-jump-effect-on-icons.html For experienced developers: what happens with CSS3 transitions? Is it possible to create a smooth jump effect using transitions? I hope this simple demo will stimulate further tests and examples. HTH :-) Gabriele Romanato ps. never, ever stop testing! Imagination is what tells us apart from machines. @skynet 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Jump effect on icons
Great Tim!
On Sat, Jun 25, 2011 at 4:57 PM, Tim Climis tim.cli...@gmail.com wrote:
On Saturday, June 25, 2011 4:43:04 pm Gabriele Romanato wrote:
For experienced developers: what happens with CSS3 transitions? Is it
possible to create a smooth jump effect using transitions?
Yes - with just one more line (and the appropriate vendor prefix, of
course).
#social a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
transition: background-position .25s ease-out
}
---Tim
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
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 [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] Headings and web fonts
Hi, accessibility is one of my primary concerns. Here I explain why web fonts work at their best on headings: http://onwebdev.blogspot.com/2011/06/css-headings-and-web-fonts.html HTH :-) Gabriele Romanato 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 [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] Headings and web fonts
The secret hand of destiny: http://youtu.be/og6dJVQ1jtI :-) -- 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help finding history/discussion on multiple values
Hi Brian.
The problem with CSS commas is that they're not required in all cases.
Consider this example:
#test {
clip: rect(10px, 10px, 10px, 5px);
}
CSS specs say that for the clip property commas are optional, but some
browsers don't allow them to appear between values, meaning that for some
browsers they're not allowed, even though that specs say the contrary.
This happens also for the new properties. In other words, commas are
property-dependent, because the CSS syntax says that they can be considered
as separators.
With the CSS3 properties, things get more complicated with the widespread
use of browser-specific extensions (aka vendor prefixes).
I think that you should document yourself by reading the browser-specific
implementations, not the specs, because the properties you mentioned are so
far supported only via vendor prefixes.
When browsers will implement them without prefixes, then you can go straight
to the official CSS3 module specs and read how they actually work.
HTH :-)
Gabriele Romanato
--
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 [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] Recreating the Facebook layout
Hi list! Facebook has a fixed-width layout so I decided to recreate its layout using percentages: http://onwebdev.blogspot.com/2011/06/css-facebook-layout.html As always, if you notice anything strange on IE, please report the problem and the fix (if any). Remember, I'm on a Mac. :-) HTH :-) Gabriele Romanato 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 [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] Styling blog contents
Hi list! I'm constantly occupied in my spare time to find quick answers to some of your future and possible questions. Here's a brief tutorial which summarizes the most used (and basic) CSS techniques to get started with your blogs: http://onwebdev.blogspot.com/2011/06/css-styling-blog-contents.html Notes: 1. there are several syntax highlighters available on the web. one of the most used is surely Google Prettify. The only thing to bear in mind is how to reset their default styles. 2. Sticky dates have been inspired by the famous Wordpress theme Lightword. 3. Add -ms-transform if you want to extend the transformation support in IE9 4. Blockquotes can actually have a second quote on the right. The only problem is that you should wrap your element with a div to get this effect. If you're a CSS3 fan, you can use multiple background images here. As always, HTH :-) Gabriele Romanato 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 [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] Styling a Twitter feed
After publishing a post on how to style a Twitter widget, I continue my series on Twitter by explaining how to generate and style a Twitter feed, using either a server or client-side approach: http://onwebdev.blogspot.com/2011/05/css-styling-twitter-feed.html You can either use a jQuery plugin or PHP to get your tweets and then style them. As always, HTH :-) Gabriele Romanato 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Cap missing in FF4
@David: did you see the bug thread? It's amazing how much C++ code is required to make @font-face work. It's something we should consider before blaming implementors, IMHO. :-) On Thu, May 12, 2011 at 11:42 AM, Lesley Lutomski c...@islaywebdesign.co.ukwrote: On 12/05/11 00:59, David Laakso wrote: Dunno. Is this a blessing or a bug. https://bugzilla.mozilla.org/show_bug.cgi?id=458169 Thanks for the link, but that's an @font-face bug, and I'm using a simple font-family declaration, so I don't think that's the problem. On 12/05/11 02:12, Philippe Wittenbergh wrote: On OS X 10.6.7 and on Linux Ubuntu 11.04 the letter is displayed on all your pages. On Linux, Nimbus Roman is used afaict, on OS X Georgia. 'ChromaSSK' not being available on either system. Thanks for testing. That's really weird, because I'm using Ubuntu 11.04 with FF4.0.1 and there's no letter displayed. http://www.islaywebdesign.co.uk/images/dropcap.png I realise there's an easy fix by deleting the ChromaSSK font, which isn't widely available, but I would like to understand why there's a problem in the first place, so I can avoid it in future. Lesley __ 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/ -- 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Z-index demo
I'm currently developing an important project for an important client who doesn't know that I'm insignificant... :-) it's all absolute positioning and z-index and I have to say that now I know what's the z- index property's purpose: work with CSS as you do PSD files in PS: http://onwebdev.blogspot.com/2011/05/css-z-index-demo.html I can't believe it, but IE renders my project pages correctly give me only a few days and I'll share it with you. In the meantime I work 14 full hours a day, straight headed to a physical breakdown!! :-) But hey, I love you all because you're not only knowledgeable CSS persons, but also genuine human beings. Hope you find this demo useful. Gabriele ps: Italians are hectic 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 [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] IE6, 7 and overflow on a slider: is there a fix?
Hi,
I've been quite busy with a new client recently due to a vertical
content slider that doesn't work in IE6 and 7. The markup structure is:
div id=slider
div id=slider-wrapper
div class=slide.../div
!--more slides--
/div
/div
The CSS:
#slider {
width: 400px;
height: 300px;
overflow: hidden;
}
#slider-wrapper {
width: 100%;
height: 1200px;
}
div.slide {
width: 400px;
height: 300px;
}
Now, IE6 and 7 show _all_ the slides, while IE8 and all other browsers
(correctly) only the very first one. Is there a fix or something? I
noticed this behavior occurring also for horizontal sliders.
Thanks for your attention, bye
Gabriele Romanato
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 [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] Twitter and user style sheets
Hi, with this message, I'd like to stimulate further experiments if you use Twitter on a regular basis: http://onwebdev.blogspot.com/2011/04/customizing-twitter-with-css.html In Firefox there should be a vendor-specific extension to associate styles with a specific domain. Opera and IE support user style sheets as well. Does somebody know if there's something similar in Chrome? As always, HTH :-) Gabriele Romanato 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 [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] Looking for online reference re optimizing style sheet syntax
http://onwebdev.blogspot.com/2011/02/improving-your-css-performance.html I've summarized it in as much details as I could. 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Reflection effect
Thanks guys! I have to make some further tests, actually. The potential of these new CSS3 features is so vast that you never stop finding new solutions. :-) 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 [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] CSS3 animations - enter the matrix
This is awesome! :-) On Sat, Apr 16, 2011 at 5:25 PM, Alan Gresley a...@css-class.com wrote: Hello all, I have for years been smashing down barriers concerning CSS. This may have been on this mailing list or on www-style (CSS WG). I came into this realm of human endeavor just when CSS3 was starting to be implemented by Safari 2 or 3 (back in 2008). My early CSS was an attempt at creating depth of field with basic CSS2.1 or CSS3 (box-shadow was in CSS2). I started playing with CSS animations early this year. I did some basic demos that had things moving but I kept on seeing visions of virtual 3D space. This I find exciting since it breaks the notion that things can only be perceived as happening only on a 2D plane (x and y axis) with just depth of field to create an illusion of space by z-index or normal painting order. With CSS3 3D transforms and CSS3 animation one can create virtual 3D space my moving, scaling, skewing, rotating or translating things on the x, y and z axises (not indexes). There is also this marvelous aspect of CSS3 animation call perspective. Below is a link to my new demo. It works in Safari, iPad or iPhone. It uses CSS3, HTML, SVGs and one PNG. If you want it to be interactive, you must enable JS. Using the controls (the only part with JS), selecting random sideways movement buttons (left, center and right) and the jump buttons quickly can result in some amazing spinning. I could use pure CSS3 animations using @keyframes to do similar but I believe the fun is being able to interact with such a demo. Moving on, the demo. http://css-3d.org/enter-the-matrix.htm I will in future put demos of this nature on this domain. http://css-3d.org/ Enjoy and be inspired. I can only show you the door. You're the one that has to walk through it. :-) -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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/ -- 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 [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] need local tool compress/expand css
You can use YUI Compressor: http://developer.yahoo.com/yui/compressor/ 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 [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] Reflection effect
Again, what's the purpose of CSS3? Having fun with CSS: http://onwebdev.blogspot.com/2011/04/pure-css-reflection-effect.html The purpose of having fun with CSS is testing, the purpose of CSS testing is make something of your spare time during a dull day when you've finished to work on your projects and there are just too many hours of bore between you and the relax of the night. After 21.00 PM, everything is different but now is such a bore ;-) 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Reflection effect
thanks guys! for IE9: -ms-transform: rotate(-180deg); btw, I'm waiting for IE4Mac... :-) On Fri, Apr 15, 2011 at 7:16 PM, David Laakso da...@chelseacreekstudio.comwrote: On 4/15/11 12:44 PM, Gabriele Romanato wrote: Again, what's the purpose of CSS3? http://onwebdev.blogspot.com/2011/04/pure-css-reflection-effect.html Fwiw, some captures... http://www.browsercam.com/public.aspx?proj_id=549084 ~d -- http://chelseacreekstudio.com/ http://chelseacreekstudio.com/fa/ __ 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/ -- 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 [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] Pure CSS Mac desktop
Hi, this is a devoted homage to my soul brothers Mac users: http://onwebdev.blogspot.com/2011/04/pure-css-mac-desktop.html I should fix the font size, somehow. However, you can do much better. After all, I'm not that smart. :-) Enjoy! ps. Lion is coming... groaar! 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 [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] Styling forum posts
Hi.
The solution presented below uses fixed sizes (that's disgusting!).
Did you try something similar in a fluid fashion? Please let me know
and link your examples, if any:
http://onwebdev.blogspot.com/2011/04/css-styling-forum-posts.html
I'd like to test something with table cells values, so that the
problem of aligning avatars with text can be fixed with vertical-
align: middle.
Does anyone know if the solution {display: inline; zoom: 1;} for IE7-
could help? I'm still trying to figure out how Ingo and Bruno make
this work... :-D
HTH :-)
ps. maybe Philippe has found something. please let me know! ;-)
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 [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] Experiment: CSS post it note
Hi, I've often asked myself: 'ok, we can rotate boxes with CSS3, but what this is good for?. Answer: visual effects. Like this: http://onwebdev.blogspot.com/2011/04/css-post-it-note.html The Google font is included in the zip file, so you can add it to your font folder if you view this demo locally. Improvements: if you use JS and jQuery or whatever other library, you can automate the positioning process by adding a common CSS class to all the post it notes. However, the topic of this list is CSS, so I avoided to get things more complicated. Feel free to use the code in all your projects, without license, permissions and other legalese stuff. Web is sharing, so enjoy it! :-) HTH Gabriele 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 [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] Experiment: CSS post it note
thanks guys! I have to fix something, as you pointed out... ouch! however, absolute positioning is just for show... the intention is to use it in the future on some gallery with floats... at least, floats are aware of the position of other floats.. floats have almost empathy for developer's emotions and are not so selfish like absolute boxes. :-) thanks for the shots, particularly that from Seamonkey. I miss this browser. I used it on my old Tiger laptop :-( ps. Google fonts work ok... I guess they use link / for performance... has anyone noticed some lag using @import? bye -- 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overriding presentational tags
I've just finished to run a couple of tests on user style sheets. Results are good. I've summarized them here: http://onwebdev.blogspot.com/2011/04/css-overriding-presentational-tags.html Do you know some other techniques? marquee is really hard to override via CSS. Do you know some IE specific rule to do this? Further, -moz-binding: none didn't work in Firefox 3/3.6, though this is the way FF mimic this tag. Let me know. 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 [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] Styling a definition list
Hi, I've followed another approach to create the effect of a table-like definition list: http://onwebdev.blogspot.com/2011/04/css-styling-definition-list.html Works even in IE6. Enjoy! :-) 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 [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] Styling a spreadsheet
Hi.
A simple demo/test on form elements and tables:
http://onwebdev.blogspot.com/2011/04/css-styling-spreadsheet.html
I've applied my personal recipe to get a consistent height for input
elements:
input {font: 1em family;}
A little bit of jQuery just to show a title attribute on each input.
Of course you can do this dynamically when you assembly the form with
a server-side language:
?php
// $value contains the attribute's value for each input element. Use
it in a loop
$html .= 'input type=text name=' . $value . ' id=' . $value . '
title=' . strtoupper($value) . ' /';
// loop ends
echo $html;
// or return $html if this occurs in a function or class method
?
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 [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] Styling a YouTube video gallery
After dozens of useless tests on inline-block elements, I decided to create something a little bit more useful for css-d readers. Since now I know all the nuts and bolts of iframes, why don't create a YouTube fluid video gallery? http://onwebdev.blogspot.com/2011/03/css-styling-youtube-video-gallery.html Some CSS3 enhancements here, because I think it's time to start using them. Actually, on www-style they're talking about css4 in their messages so.. we can't miss this train! :-) 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 [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] tables now a legitimate presentational device for layout according to W3
Tables shouldn't be used in e-mails either, because we don't know how screen readers and other assistive technologies use the output produced by an email client. If the output is serialized, implying that only text will be read aloud, there tables or not tables doesn't make any difference. But if the output is interpreted in the same way as browser output, then tables should be avoided. That is, if the screen reader accesses an email as a DOM document, then there could be some problems, especially when tables don't meet the WCAG requirements. On the contrary, tables are safe. Gabriele Romanato -- 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 [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] Styling a video gallery (and apologies)
apologies First of all, I'd like to say that I'm awful sorry for the flames and my stupid behavior on my last post on IE. I'd like to apologize with people that may have felt offended by me. I got a serious attitude problem, plus I'm Italian... so you got my picture: an impulsive, immature, spoiled guy. :-) /apologies --- I was wondering if it was possible to apply the same CSS techniques of fluid image galleries to video galleries. I just made this test: http://onwebdev.blogspot.com/2011/03/css-styling-video-gallery.html Btw, do you know some server-side script to speed up the video rendering? It's very slow, though I've used the same file 4 times. :-( object behaves like a friendly inline-block, replaced element, as usual, but you have to specify the width and height attributes to make it appear on the page without styles. Further, styles have no effect if you don't use these attributes. As such, object differs greatly from img... so I frankly asked myself what was the point of XHTML 2.0 of having something like this: object data=image.jpg type=image/jpeg / Anyway, as always, criticisms, suggestions are welcome! HTH :-) Gabriele Romanato 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 [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] Test on thead, tbody, tfoot and background images
Results are pretty frustrating: http://onwebdev.blogspot.com/2011/02/css-thead-tbody-tfoot-and-background.html have you ever tested something similar? find anything better? a better fix? let me know :-) 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 [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] Styling Google AdSense
Just a quick-and-dirty work with my console on Chrome with some Google ads: http://onwebdev.blogspot.com/2011/02/css-styling-google-adsense.html I didn't test it because I don't have an AdSense account (it's impossible to me to make money with all the trash I write :-D) so it would be interesting if some of you can actually make some tests and report the results here on css-d. This is actually something that I want to bring up on the public W3C CSS test suite someday, because specs don't say what happens when styles are generated via JavaScript or embedded externally using an iframe. Consider that an iframe is treated as a completely brand new document within a main document, so it's confusing to use CSS in such cases. let me know. HTH. Gabriele :-) 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 [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] Object element styles
This is a summary of all my tests on the object element and CSS: http://onwebdev.blogspot.com/2011/02/css-and-object-element-styles.html I need to update some of my tests. Did you notice something strange that might be an anomaly in browsers regarding this subject? If so, please let me know. 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 [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] Fluid layouts and column background
I think that this would be a good tutorial for css-d. Maybe we could think to insert it in the wiki section, if not already present: http://onwebdev.blogspot.com/2011/02/css-fluid-layouts-and-column-background.html HTH, especially for beginners. :-) ps. there's no patent on my demos nor license. Everything is public domain. 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 [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] Improving your CSS performance
Hi David, this is a good question. It's not clear what values use browsers as their default for certain elements, because specs don't say much about it. For elements such as a div or headings, their values are always 0, so you got a good point here. For form elements, instead, the padding value depends on the element. For example, on input the amount of padding varies from browser to browser but, as far as I can tell, is always different from 0. 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 [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] Improving your CSS performance
Some reflections collected during my experience on production web sites: http://onwebdev.blogspot.com/2011/02/improving-your-css-performance.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 [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] CSS Star rating: an accessible solution
Hi. Accessibility is always one of my first concerns and here in Italy I'm fighting my own battle to get developers adopt a more accessible way of coding their sites to deal with user's needs. This morning a friend of mine (currently working on a big company web site) asked if there's a simple method to get an accessible styling of CSS star rating. I made up a test, send it, and come back with this personal solution: http://onwebdev.blogspot.com/2011/02/css-star-rating.html Personally, there's nothing difficult with this solution. Finally screen readers users won't have to deal with empty elements anymore. 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 [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] CSS Reset explained
This is for Eric and for CSS beginners: http://onwebdev.blogspot.com/2011/02/css-reset-explained.html HTH :-) __ 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] Building a fluid layout
Sorry for bothering, but I think this should be helpful for beginners: http://onwebdev.blogspot.com/2011/02/css-building-fluid-layout.html ps: currently waiting for someone who invites me to contribute to the css-d wiki. ;-) 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 [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] How to stylize a Google Maps InfoWindow
I think that this will help css-d users who move their first steps in the Google Maps world or, more generally, in the mashup universe: http://onwebdev.blogspot.com/2011/02/css-stylizing-google-maps-infowindow.html feel free to make experiments: that's the fun! ;-) 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 [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] Styling a content slider (demo)
Hi. I didn't test this in IE6. Any test and screenshot will be appreciated. Please specify your IE6 build version (SP1, SP2, no service pack, etc). thanks: http://onwebdev.blogspot.com/2011/01/css-styling-content-slider.html ps. border-radius don't work because IE8- doesn't support it. just for history :-) Gabriele Romanato 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 [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a float
You cannot position and float an element at the same time. So: 1. make the container relative position: relative Thus you create a context. 2. position the box with the image at the bottom, using left/right: 0 bottom: 0 3. add some top and left margin to the positioned box to prevent surrounding text from overlapping it. if your container has no background image, you can use borders instead of margins, with the same color of the background of your container. Let me know if this helped. :-) 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 [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] br { content: '\A'; white-space: pre; } in Webkit
Just made this test: http://dev.css-zibaldone.com/tests/css-discuss/line-breaks-generated-content.xml it doesn't work per se, because in XML browsers follow CSS specs ad litteram. It only works if you add display: block to the element :-) 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 [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] [CSS3]: The background-rotate property
Hi all. Hope this hasn't been discussed yet: http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html Regards, Gabriele Romanato 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 [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] A CSS calendar with an unordered list
Hi! Just an advanced demo on floats and contextual positioning. I can't test my pages in IE7/6 anymore, since I switched to Win 7 on my Windows PC. Can anyone take some shots and post them here: http://onwebdev.blogspot.com/2011/01/css-calendar-with-unordered-list.html ? It will be really appreciated. ps. guess it should work in these browsers... I'm a little bit afraid of positioning. HTH :-) pps. ul id=calendar/ should be table id=calendar /... just for the sake of testing! :-) 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 [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] A CSS calendar with an unordered list
For change on hover, I think that Ingo Chao's fix should work:
a {background-position: 0 0}
:-)
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 [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] [test]: CSS and the HTML5 video element
Hi. It took a little bit to find a good converter from FLV to OGV, but finally I did it! The video is 27 mb in size, so you have to be a little bit patient :-) Results are encouraging, especially for future CSS3 enhancements: http://onwebdev.blogspot.com/2011/01/css-and-html5-video-element.html note: also floating works, just as for the object element. it seems that supporting browsers have cloned their default display role from object to video. cascade works correctly. borders, margin etc. too. dimensions either. Tested in Chrome(latest), Safari(latest), Firefox(latest, i.e. 4 beta latest), Opera(latest). Safari has some problems loading the video. I think it expects ogg instead of ogv or something :-) again, hope that helps HTH :-) Gabriele 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 [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] [test]: CSS and HTML5 audio element
This completes the test series on HTML5 media elements: http://onwebdev.blogspot.com/2011/01/css-and-html5-audio-element.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 [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] CSS Design Patterns
This is a work in progress. If someone knows some other patterns in use, please let me know: http://onwebdev.blogspot.com/2011/01/css-design-patterns.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 [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] [test] CSS and iframes
There are many possible ways to apply this test in a real case- scenario like: 1. website previews 2. dynamic content 3. active content http://onwebdev.blogspot.com/2011/01/css-and-iframes.html this test clearly demonstrates the benefits of fluid css layouts. 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 [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] [Test]: Positioning an object element
Hi. A couple of days ago a user posted here a message about object and positioning. I've created a test page and a brief description that I think it may be helpful for future use cases: http://onwebdev.blogspot.com/2011/01/css-positioning-object-element.html hope this will help you to get an idea of how this works. bye :-) 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] [Test]: Positioning an object element
Don't get me wrong but ... What is the percentage of use of Seamonkey? ;-) Philip, as a rule of thumb, you should always test in major league browsers, like IE, Firefox, Opera, Safari and Chrome. Minority browsers get you mad. I used to have up to 10 browsers on my computer, and once I got access to the access logs of the sites I was developing I got struck by the fact that almost all users (98%-99%) were using either IE flavors or Firefox. Don't worry: it's probably due to a parsing error of Seamonkey. :-) bye :-) 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] iframes and CSS
Hi! You should use: border=0 which is valid. For overflow, which version of IE are you using? Bye 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] iframes and CSS
For overflow, try to give IE the declarations overflow-x/overflow-y. They should work. Also, first turn the iframe into a block level element with 'display: block'. Iframes are inline-block elements by default. :-) 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] RSS Feed of my CSS tests and live examples
Hi folks! Last message on this topic. This morning I've created a live feed with PHP that takes all the examples and other stuff I've created so far. I've burned it with feed burner: http://feeds.feedburner.com/onwebdevexamples So you don't even go to my blog, just see the code, nothing more. HTH :-) bye 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] Absolutely Positioning an object in a div
Sorry for the delay. Here are a couple of tests that might be useful for that purpose: http://www.css-zibaldone.com/test/css21/object/object1.html http://www.css-zibaldone.com/test/css21/object/object2.html http://www.css-zibaldone.com/test/css21/object/object3.html http://www.css-zibaldone.com/test/css21/object/object4.html http://www.css-zibaldone.com/test/css21/object/object5.html http://www.css-zibaldone.com/test/css21/object/object6.html http://www.css-zibaldone.com/test/css21/object/object7.html http://www.css-zibaldone.com/test/css21/object/object8.html http://www.css-zibaldone.com/test/css21/object/object9.html http://www.css-zibaldone.com/test/css21/object/object10.html http://www.css-zibaldone.com/test/css21/object/object11.html http://www.css-zibaldone.com/test/css21/object/object12.html http://www.css-zibaldone.com/test/css21/object/object13.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/
[css-d] Helping css-d members to get their best from CSS
Hi all. After my last post and all the responses that came after that, I first decided to unsubscribe from css-d, but later I'm back again. Very emotional, very Italian! But the point is another: for the new year I'm going to be more supporting on this mailing list to the various needs of its users. As many of you have correctly pointed out, there's no need to write useless links to my resources. In case you're interested, just as I did in the past for my tests, here's the only link that I'm going to share with you: http://onwebdev.blogspot.com/search/label/css/ You can subscribe to my feeds if you want to. Done that, that's the end of the story. Now it's time to come to real things. I realized that the users of this mailing list fall into three basic groups: 1. beginners 2. intermediate 3. advanced The needs of one group are usually not the needs of another. So let's try to tackle them: 1. Beginners Beginners need very simple things and ask very simple questions. I recommend these people not to read CSS specifications at first, but only tutorials and, of course, the excellent Wiki of css-d. Specifications are written in a very obscure manner. They're more likely to be used by browser implementors or advanced users who need to understand how things work in browsers (or how they should work). Another thing is to get a good CSS editor to start coding: you basically need an editor with a) syntax highlighting b) code completion c) preview in browsers d) validation tools For Windows, excellent choices are Top Style, Komodo and CoffeeCup. For Mac, Komodo (again), Style Master, and Coda. For Linux... I don't use Linux since 2008, so run a search on Google. :-D (Yes, Dreamweaver: I almost forgot!) 2. Intermediate Intermediate users start coding in their own way, reading more advanced tutorials and learning new techniques. They also may have some experience with creating site themes and, most of all, they start complaining about strange browser bugs and discrepancies. I recommend to read some specific sites that take these problems into account, like: 1. css-discuss Wiki 2. http://www.positioniseverything.net/ 3. http://www.gunlaug.no/ 4. http://sitepoint.com/ 5. http://www.communitymx.com/ 6. http://www.brunildo.org/test/ 7. http://www.satzansatz.de/cssd/onhavinglayout.html (seminal work on the hasLayout property of IE) ... - Google Search (If I've forgot something/someone, just mention your/his/her link) == http://meyerweb.com :-D 3. Advanced Advanced users are basically highly skilled web developers who have a strong experience with layouts and CSS. Quoting The Village of the Damned (John Carpenter), what could I recommend you? Just a few links: 1. http://mxr.mozilla.org The source code of Mozilla Firefox. If you know C++, JavaScript, XML and the like, that's a good place to start a journey into a browser's mind. 2. http://webkit.org Same as above, but this time we're talking about the core of the Safari browser. 3. www-style The official mailing list for providing feedback to the CSS Working Group on the development of CSS specifications. 4. http://www.w3.org/Style/CSS/Test/Overview.en.html W3C CSS Test suites. Contributors are really appreciated. Yes, advanced users have also a firm knowledge of CSS specifications, so I'm not going to make it longer :-D As always, HTH (Hope That Helps) Gabriele Romanato 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] Using YUI Compressor to minify CSS
This is just for tweaking up a little bit our performance when dealing with huge files: http://onwebdev.blogspot.com/2011/01/using-yui-compressor-to-minify-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/
[css-d] HTML, CSS, JavaScript: Model-View-Controller
A way to rethink the traditional and static three-layered model: http://onwebdev.blogspot.com/2011/01/html-css-and-javascript-model-view.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] HTML, CSS, JavaScript: Model-View-Controller
Well, thoughts about web development are not truths in the religious sense of the word. I was just expressing my views in quite a polite way, without being conceited or imposing me over other people's opinion. Just a thought, a resemblance, a comparison, a linking that popped into my head while reading the last book on OOP and some couples of web standards related books. I'm sorry if this got confused you. Maybe I was too confident in the fact that the readers of this list were already familiar with OOP. Sorry for the weird feeling. I feel like apologizing know, so excuse me. bye :-) 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] HTML, CSS, JavaScript: Model-View-Controller
No Barney, what I did is completely wrong. It's off-topic and quite spamming. I'll stop it. From now on, no more posts from my blog. thanks for your answers and the answers of all css-d readers. Lesson learned. :-) 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] Styling a search form
Another work for css-discuss. This time I'm using a dirty positioning trick on a basic search form: http://onwebdev.blogspot.com/2011/01/styling-search-form-with-css.html You can also use a background image, but if you do so, the user will be forced to press Enter to submit the form. 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/
[css-d] Complex site header with CSS
An advanced tutorial for intermediate-advanced CSS coders: http://onwebdev.blogspot.com/2011/01/complex-site-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/
[css-d] A Twitter header with CSS
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/
[css-d] The content property
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/
[css-d] A Flickr gallery with CSS
First post of the year! have a wonderful 2011: http://onwebdev.blogspot.com/2011/01/flickr-gallery-with-css.html HTH :-) ps. in case you're wondering, here in Italy it's 10:21 AM 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] HTML5 and CSS in Internet Explorer 8
For those who are testing in HTML5 and CSS: http://onwebdev.blogspot.com/2011/01/html5-and-css-in-internet-explorer-8.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/
[css-d] Styling a Twitter widget with CSS
I started using Twitter a little more only during these holidays. Here's my Xmas gift to css-d: http://onwebdev.blogspot.com/2010/12/css-styling-twitter-widget.html We're talking about JS that creates styles... oh my, so we have to override them! :-) 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/
[css-d] Web typography with CSS3
CSS3 can actually turn a bunch of text into a masterpiece or work of art: http://onwebdev.blogspot.com/2010/12/web-typography-with-css3.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] Web typography with CSS3
I know but I'm in a hurry... preparing for the New Year night :-D On Dec 31, 2010, at 6:08 PM, Mark Kelly wrote: Hi. On Friday 31 Dec 2010 at 16:47 Gabriele Romanato wrote: CSS3 can actually turn a bunch of text into a masterpiece or work of art: Thanks for the link, but how about including a live demo to click on instead of just a PNG? I suspect a lot of readers in here have multiple browsers installed and would be interested in seeing the results live as it were, rather than having to copy and paste your code into an example file to see what happens. Cheers, Mark __ 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] CSS3: Use of the @namespace rule
Hi. It seems that css-d is a little reluctant with the adoption of the new CSS3 features. I saw many comments with a too backward tone. Anyway, I insist on my evangelic mission: http://onwebdev.blogspot.com/2010/12/css-use-of-namespace-rule.html ps. IE8 and 7 don't support it. But as far as I can remember, Netscape 4 doesn't support it either. Are we still supporting it? Let the past be past. :-) 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] CSS objects
Hi! A little homage to Ingo Chao and his insights: http://onwebdev.blogspot.com/2010/12/css-objects.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/
[css-d] Hanging drop cap
I don't know what vacations are: http://onwebdev.blogspot.com/2010/12/css-hanging-drop-cap.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/
[css-d] Formatting a chat with CSS
Another interesting point of study: http://onwebdev.blogspot.com/2010/12/formatting-chat-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/
[css-d] Dynamic form messages (or look ma, no javascript!)
Another chapter of the series: http://onwebdev.blogspot.com/2010/12/css-dynamic-form-messages.html :focus rules! :-) 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/
[css-d] Pure CSS tooltips
Continuing the series We can do it without jQuery: http://onwebdev.blogspot.com/2010/12/pure-css-tooltips.html the good news is that Opera 10 has fixed its problem with this kind of solution. :-) 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/
[css-d] Floats on multiple lines
Another tip or experiment: http://onwebdev.blogspot.com/2010/12/css-floats-on-multiple-lines.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/
[css-d] Expanding tabs effect
Hi! Sometimes CSS is better than jQuery: http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.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/
