Web Design Articles

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.

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.

Since CSS3 has become such a big deal in the future-thinking minds of web designers today, I think it would be appropriate for front-end developers to begin formulating some best-practice habits and techniques so that any CSS3 development we do is done right, and we therefore are able to get CSS3 development off to a good start.

By no means do I assume that everything in this article is etched in stone and error-free, but I think this will be a good starting point for this topic, and I will be happy to add to or amend any points that anyone feels need adjusting or clarification.

Consider this a starting point for discussing best practices for CSS3, especially since there don’t seem to be any articles available yet that exclusively discuss CSS3 best practices.

Recently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3’s text-shadow property.

In another article, Chris Coyier of CSS Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning.

During a recent project I was working on, while messing around with the CSS3 text-shadow property, I serendipitously came across a simple way to combine the two different effects from those two articles to create a letterpress effect on active link states.

The CSS3 Click Chart has been updated to include 4 new CSS3 properties, a few of which I’ve only recently come across.

At this point, most of the cool and trendy stuff has been included in the chart, so nothing new that I add will be of great interest, but I’m continually researching and discovering new properties and enhancements that are part of the CSS3 spec, so I’ll continue to add them over time.

Ever since WordPress burst on the scene and gained huge popularity among designers, developers and Joe Blow bloggers, it has become shockingly easy to create SEO-friendly content. WordPress handles everything for you: Pretty spider-friendly URLs, semantic content, accessibility, and structurally accurate heading tags.

Wait — scratch that last one. I’ve always been suspicious that WordPress’s HTML heading structure was slightly off, and recently my suspicions have been (evidently) confirmed. Two articles have provided some important info to help front-end developers, content strategists, and SEO experts structure their content in a more accessible, semantic, and SEO-friendly manner.

CSS3 is fun to mess around with, and this info chart has certainly kept me busy while helping me to become more familiar with the newest techniques in CSS.

I’ve made updates and modifications to the click chart, including a few improvements to some of the already-existing examples, to make them more specific. The changes are listed below, or you can skip the boring descriptions and just use the demo button to view the updated chart.

If you’ve been developing with CSS for some time now, you’re certainly familiar with the inline-block value for the display property. The most common use for this property/value pair is when getting IE6’s margins to behave.

To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of inline-block (again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.

Although this IE6 workaround for floated elements has probably been the most useful way to implement the inline-block value, it could serve a much more legitimate purpose if the value itself is better understood.