Word-Wrap: A CSS3 Property That Works in Every Browser
By Louis Lazaris on July 21st, 2010
Categories: CSS, Web Design Tutorials | 41 Comments >
Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.
The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.
While we might normally associate CSS3 with modern browsers like Safari and Chrome, it should be noted that the CSS3 spec goes back to 2001. So a few properties (like word-wrap) have had support for some time now.
How to Resolve a Fluid Header/Footer Problem When the Window is Resized
By Louis Lazaris on July 19th, 2010
Categories: CSS, Web Design Tutorials | 24 Comments >
After redesigning this website, and realizing that I’ve been way too nonchalant about different window sizes, I came across an issue that probably occurs in a lot of different layouts.
The problem happens under the following circumstances: (1) The header and footer of the page have no specified width; (2) The content area has a specified width, and is centered using margin: auto; (3) The window is resized below the content area’s width, or the window starts out below the set width of the content area.
In most cases, this issue will go unnoticed, because generally speaking, sites are designed to fit within the 960px standard width, which will be fine for most users. Because my monitor’s resolution is set to higher than 1024×768 (which is small in the web design community nowadays), the problem was occurring on my own site, which has for a while now been designed for a larger than average width.
Nothing to See Here – Just a Redesign
By Louis Lazaris on July 13th, 2010
Categories: Web Design Articles | 16 Comments >
Over the past week, I’ve redesigned Impressive Webs, and today it’s launched. The last design got old quick, and I felt it wasn’t as good as it should have been.
This design didn’t take me too long, since the basic structure and layout of the site is still somewhat the same. I think it’s a little cleaner and more professional looking, and it was certainly influenced by some of the great designers I’ve observed over the past year or more while blogging regularly.
I’m hoping that certain features of the design will allow for creativity within individual posts at any time in the future, should I decide to venture into that area of design blogging.
IE-only Styles: Where Should They Be Placed?
By Louis Lazaris on July 6th, 2010
Categories: Web Design Articles, Web Standards & Best Practices | 24 Comments >
Dealing with Internet Explorer is a fact of web design, and it isn’t going to go away anytime soon.
If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.
Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:
The Complete Guide to Commenting on Web Design Blogs
By Louis Lazaris on June 29th, 2010
Categories: Web Design Articles | 51 Comments >
I think it’s safe to say that the voice of the audience in the web design blogging community has had a tremendous effect on the quality and honesty of web design-related articles.
Since opinions stated in blog comments often have the potential to misrepresent what the author has said, I thought I would put together an exhaustive reference of tips and recommendations that will help all of us become better at commenting on the different web design blogs that we visit each week.
So please consider applying the advice in this article in order to improve the communication level on web design blogs, and to help all of us move forward in a positive direction as we try to become more skilled at coding, designing, developing, and maintaining websites.
Coding for IE6 = Progressive Enhancement
By Louis Lazaris on June 22nd, 2010
Categories: Web Design Articles, Web Standards & Best Practices | 21 Comments >
It was disappointing to see the unwarranted uproar that occurred in the comments of my article on Smashing Magazine on cross-browser CSS. But in retrospect, it was probably a good thing, because a more important (but related) issue was brought to light in the discussion.
At this stage in modern web design, all front-end coders should at least be familiar with (if not very capable of implementing into their projects) the concept of progressive enhancement. In most cases, we tend to associate progressive enhancement with JavaScript and CSS, and rightfully so, because those technologies help us layer our functionality in a way that makes a website accessible to as many people as possible.
But progressive enhancement isn’t just limited to what we accomplish with fancy Ajax, jQuery, and CSS3 — that’s just part of it (albeit a very significant part). I would like to take the Wikipedia definition of progressive enhancement just a little bit further. Here is the definition:
Should You Ever Use Longhand for Padding and Margins in CSS?
By Louis Lazaris on June 21st, 2010
Categories: Markup & Style, Web Design Articles | 11 Comments >
Most CSS developers eventually come to learn that, because of code savings, using shorthand notation is usually best. For this reason, I strongly recommend using shorthand notation for almost all CSS values, including padding and margins.
While I encourage developers to use shorthand for padding and margins, I would also like to point out that there will be times when using longhand notation may be the better choice. Of course, in a case like this, it’s usually up to personal preference. But I have found certain instances where longhand notation made more logical sense from a performance perspective, as well as from a future-maintenance perspective.
What Does “width: 100%” Do in CSS?
By Louis Lazaris on June 18th, 2010
Categories: Markup & Style, Web Design Articles | 54 Comments >
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.
Challenge: Can You Explain This Opera CSS Bug?
By Louis Lazaris on June 15th, 2010
Categories: Markup & Style, Web Design Articles | 16 Comments >
While doing some testing for cross-browser compatibility on a few of my recent articles/tutorials, I came across some odd behaviour in Opera 10.53 when styling a list of links as block-level elements.
I haven’t done enough testing, but it could be that this problem is occurring on pages with very little content, because I’ve only seen the bug on my demo pages, which are usually bare-minimum HTML and CSS.
Nonetheless, this is quite an interesting bug that was confirmed by at least one of my Twitter followers, and which, after poking around a little bit, I was able to resolve, but I thought I’d share it since it is quite interesting.
The CSS white-space Property Explained
By Louis Lazaris on June 8th, 2010
Categories: Markup & Style, Web Design Articles | 67 Comments >
CSS has a pretty useful property called white-space that probably goes pretty unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
This article will attempt to describe the different values for the CSS white-space property, and how each one can be used. I’m going to try to explain each value in a very practical, no-nonsense way, and I’ll do my best not to be overly technical.
