Programming Blog
Web development , php , ajax , symfony, framework, zend
Fresh CSS Tips, Techniques and Tools
In: web resources
26 Jan 2010There is seemingly no end to the conyer belt that is CSS development. Every day there are new tips and techniques being published with fresh ideas and new solutions to age old problems. keeping up with it all is not easy.
In today’s news round-up we have collected some fresh CSS reources and some good CSS reading to keep you in the loop.
How To Create an IE-Only Stylesheet
Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet.
IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.
How To Create an IE-Only Stylesheet
CSS Transitions 101
Transitions have been a part of Webkit for a while and are the basis of a lot of the cool things that the Safari UI can do that other browsers cannot. But the W3C CSS Workgroup resisted adding transitions to its official specs, some members arguing that transitions are not style properties and would be better handled by a scripting language.
But many designers and developers argued that these are in fact styles— only dynamic styles, rather than the traditional static styles that so many of us are used to.
Fortunately, the argument for dynamic styles held the day. Last March, representatives from Apple and Mozilla began adding the CSS Transitions Module to the CSS Level 3 specification, closely modeled on what Apple had already added to Webkit.
CSS Transparency in All The Browsers
There are many many cross-browser issues and transparency is one of those weird issues that crops up more than most. All the browsers do treat transparency in different ways, and to overcome this issue we need to define three different properties to cover all browsers.
CSS Transparency in All The Browsers
12 really useful CSS tools
Working on a website’s CSS can be quite an enjoyable job. However some of the tasks aren’t always fun. This is why there are tons of cool CSS tools and apps, to make your life easier and keep web designers’ work bearable.
By Paul Andrew (Speckyboy and speckyboy@twitter).
Related Blogs
- Related Blogs on Fresh CSS Tips, Techniques and Tools
Comment Form
About this blog
This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.
3 Responses to Fresh CSS Tips, Techniques and Tools
Ivan The Terrible
March 17th, 2010 at 3:51 am
By FAR the best advanced yoga DVD has to be Advanced Yoga with Rodney Yee: .
There is125 minutes of immersion into how Yee practices at home. According to Gaiam, "In this rare window on the private practice of America’s favorite yoga instructor, witness stunning footage of Rodney performing an advanced sequence based on his own personal routines."
That's just the first DVD. The second one is him teaching the routine to you.
WARNING: Beginner or novice practitioners should not attempt these asanas!
Ron
March 23rd, 2010 at 8:49 am
Tableless Web Design:
HTML Tutorial: http://www.hypergurl.com/whatishtml.html
CSS Tutorials:
Web-Based Tools for Optimizing, Formatting and Checking CSS:
Ron
Nomdae Plume
April 9th, 2010 at 9:39 pm
Hi Michelle!
What's happening is that your table is rendered based upon the items in each cell. When you change what's in the cell (during the mouseOver), the table is re-rendered, and the cells containing the thumbnails are moved to make room for the larger picture.
One solution to fix this is to set the width of the thumbnail column as well as the table itself. For instance:
OLD CODE:
<table id="myTable">
NEW CODE:
<table id="myTable" width="100%">
This forces the table to fill the width of the screen, and shouldn't change size once it's rendered. Now all you need to do is set the width of your thumbnail column:
OLD CODE:
<td id="pic1">
NEW CODE:
<td id="pic1" WIDTH="40">
Now… I picked "40" as a width. You'll need to adjust that to your own thumbnail size. Once these changes are in place, you should be able to do the mouseOver, and everything should stay put!
Good Luck!