CSS Tips
Safari CSS/JavaScript Overflow Issues
June 18, 2007, 9:30 PM | 3 Comments
If you’ve seen my portfolio lately you’ll know that it’s currently undergoing some changes, but the latest project to have its URL land there is one that caused me a bit of grief in Safari. What I’ve been able to gather based on more than a few Google searches and discussions with other web professionals is that Safari seems to have a big problem when trying to adjust the overflow property of an element with JavaScript.
The Separation of Style
December 18, 2006, 6:57 PM | 4 Comments
As web professionals we’re always trying to find ways to improve our development practices. Whether it’s finding a better, more accessible method of replacing some text with an image or figuring out a better way of enhancing a site with unobtrusive JavaScript, “best practices” are constantly evolving, so discussion about them is also constant, and that’s a great thing. The more we discuss our best practices, the more we can help make the web better for everyone.
IE Conditional Comment Update
October 20, 2006, 12:53 PM | 2 Comments
Well, with Internet Explorer 7 now released to the public, I thought I’d post a short update to a post I wrote back in May about Serving Up IE Specific Stylesheets.
IE 7 is better than IE 6 as it should be; it only took Microsoft 5 years between releases and a lot of things have changed since then. From a developer’s standpoint though, IE 7 is significantly better with its CSS support. Transparent PNGs are in, dotted 1 pixel borders are actually dotted (as opposed to dashed), the “double-float margin bug” is history, the :hover pseudo-class is supported across the board, etc. etc. etc.
Serving Up IE Specific Stylesheets
May 17, 2006, 7:31 PM | 0 Comments
Yesterday Nathan Smith posted a few thoughts on using CSS hacks (specifically the * html hack) inside your main stylesheets. There has been a lot of talk recently on what’s going to happen to sites that use a lot of IE specific hacks once Internet Explorer 7 is officially released, and the consensus is that it’s best to serve up specific stylesheets for IE and leave out hacks all together.
I whole-heartedly agree with this opinion and have been practicing this technique for a while now. If you’ve read my article on how to use transparent PNG images in IE, you should already be familiar with these methods. I realize that this is not a new technique that I’m posting, but for those of you who haven’t seen it on this site or anywhere else on the web before, I thought it would make a nice addition to my collection of CSS Tips.
Using Transparent PNGs in Internet Explorer
March 25, 2006, 11:45 AM | 10 Comments
Up until a couple of weeks ago, I thought that there was no way to use transparent or semi-transparent PNG images in IE. I was wrong. My only excuse is a bad one too: I read it somewhere.
The truth is that there is a pretty good way to use transparent PNG images with CSS. It’s not without its drawbacks (I’ll get into those later) and it doesn’t use valid CSS, but while we wait for PNGs to be fully supported by all major browsers, it seems to me that it’s a fairly good solution.
Continue reading Using Transparent PNGs in Internet Explorer »
CSS Vertical Stretch
October 11, 2005, 12:24 PM | 58 Comments
Update: Due to Microsoft’s release of IE 7, parts of this article have become outdated. Please be aware that the * html hack for IE 6 causes some issues in IE 7. As an alternative, the best way to apply CSS rules for IE 6 is to use a separate stylesheet that is only read by IE 6 (or lower). Please read my article “Serving Up IE Specific Stylesheets” for more information. To apply the same rules that are listed with a * html hack below, remove the * html portion of the CSS rule and put the rest in your IE 6 stylesheet. If you have any remaining questions, feel free to contact me.
CSS Hyperlink Styling
September 19, 2005, 1:49 PM | 3 Comments
In this CSS tip, we’ll be looking at various ways to style hyperlinks using CSS. There are many different methods and techniques that you can use to create uniquely styled links, and we’ll explore some of them here.
By default, hyperlinks in browsers are underlined. Normal links are blue, visited links are purple and active links (depending on the browser) are red. Designers do not want to live life by default though, so CSS provides some powerful ways to style your hyperlinks, allowing you to create a look and feel that best suits your design.
CSS Font Styling
September 15, 2005, 1:35 PM | 0 Comments
CSS is very powerful when it comes to font styling. From line height to letter spacing, CSS gives designers complete control over their text and how it appears on the web. I do not claim to know all there is to know about font styling, but I thought I’d at least post some of the methods of font styling as a starting point.
While the web is still a little bit behind on giving designers a flawless way to use whatever font face that they want (although, several people have come up with awesome solutions using Macromedia Flash - see sIFR), CSS allows you to customize how your text appears, even if you are forced to use the more standard fonts.
CSS Centered Layouts
September 10, 2005, 1:03 PM | 9 Comments
So you want to create a centered layout, but you don’t want to use a table to accomplish your goal. That’s fine, CSS has been the way to go for quite some time now, and centering your layout is actually pretty simple.
I’ll go through some examples and explain the old way of doing things, and the new way of doing things. If you’re new to CSS and wondering why using CSS is considered a better practice, you may want to take a look at some of the following articles:
CSS Tips
September 6, 2005, 7:37 PM | 0 Comments
I’ve been thinking about this for the past few weeks now, and I’ve finally decided to move on it. I’m going to start a CSS Tips library that will be updated frequently and filled with tips and how-to walkthroughs of various CSS techniques.
These tips will probably start off at the beginner level and will progress in difficulty as they move forward. In honour of these new tips, a new category has been added to the Blog called CSS Tips, where all of the Tips will be filed.