Archive

You are viewing all articles posted in “HTML and CSS”

Recent articles can be found on the homepage.

CSS Trick: Remove borders from linked images

posted on 18 August 2009 (10:42 PM)

Here's a nice little CSS trick I cooked up today when talking to @heliumworkx.

You know how you sometimes use border-bottom to style links? Then you must be familiar with situations where there's an image inside a link on which the border looks really stupid. Unfortunately there's no CSS selector that targets links containing an img element, so a sprinkle of magic is needed in order to hide the border.

Read more

Guessing font availability with Javascript

posted on 13 November 2008 (09:28 PM)

Recently I wanted to use an uncommon font in a website, but the site was too image-rich to use sIFR, (loading time made for an uneasy user experience).

I decided to add the font anyway in my stylesheet, and provide a “lo-fi” experience, for people who didn’t have the font handy.

The lo-fi version however, should mimic the style of the uncommon font as good as possible.

Sometimes, though, that’s easier said than done.

Read more

Focus onload but keep Backspace intact

posted on 12 September 2008 (05:26 PM)

A lot of websites try to help you by auto-focusing on an input field on pageload, so you can start typing right away.

Well, thanks so much, you guys couldn't be more helpful.
Except of course that I always use the Backspace key to move back in my history. By focusing on a form field you're essentially disabling some fundamental browser functionality.

Read more

Dynamically added form elements lose their margins

posted on 08 September 2008 (11:17 AM)

I stumbled upon an annoying bug today. When dynamically appending input fields to the DOM, their margins are not as you specified in their respective classes.

Read more

How to send multiple values through one form button

posted on 04 July 2008 (09:28 AM)

Sometimes you want to have a form with multiple "actions". For instance, in a webshop, you want to list all your products, each paired up with an individual submit button to add that particular product to a shopping cart.

But how can you, on the server-side, differentiate between products?

It gets even more difficult when you have lots of hidden data you wish to send alongside the name or id of the product, but you want to show only one button.

There are a couple of ways to achieve this, all with their own pros and cons. Below I will list some options.

Read more

CSS Tricks episode 1: 100% width in a variable width container

posted on 29 June 2008 (01:25 PM)

I'm extremely busy these days. Busy working my dayjob, where lots of clients ask for my attention, and busy planning to move to another appartment in the coming weeks.

Because of that, Whatstyle hasn't seen any big articles nor updates for a long time now. Because of that, I've decided to start a series of small articles with quick solutions in the field of CSS. Every time I solve some problem that might be unusual, difficult, or interesting, I'll write up an example and explain it here. Something you can then add to your toolbox, in the back of your head, so you can easily implement it and move on the next issue.

Today the article's about giving an absolutely positioned element a 100% width when it's variable width parent has padding on the sides.

Read more

Formatting CSS, how not to do it

posted on 09 March 2008 (04:22 PM)

Every once in a while, I stumble across a piece of CSS and I think, Now that's a handy method of formatting, I'm gonna try that in my next project.

One of those formatting styles is nesting your CSS rules according to the nesting level of the HTML elements you target. I've tried it once, but never again.

Read more

Microsoft Internet Explorer 8 introduces version targeting

posted on 25 January 2008 (12:59 AM)

Wow. Everyone, and I do mean everyone, seems to be talking about Microsoft's version targeting system, that's to be introduced in IE8.

MS sure knows how to stir things up. Here's my take on it.

Read more

My CSS Wishlist

posted on 04 November 2007 (02:21 AM)

Everytime I hear a podcast and lots of times when I read a webdev article, people are asked what CSS features they would like to see implemented the most.

Now it's my turn.

Read more

Pure CSS Text Resizer

posted on 22 September 2007 (03:15 AM)

Inspired by comments on Roger Johansson's article about text resizing widgets, I created a text-resizing widget that does not rely on scripting. CSS only!

Read more

Be careful when fetching width!

posted on 26 July 2007 (12:04 AM)

I stumbled across a little oddity today. It kept me busy for longer than I would've liked, so I thought I'd share (although you're probably not very likely to run into the problem, since it's not a very common situation).

Read more

Another way to reduce the number of images used in your CSS

posted on 05 July 2007 (02:39 AM)

I did some fairly obvious pondering today. In a website I'm currently working on two images are used for some pagination links. Simple images representing a white arrow on a colored background.

There's one image for the regular link state, and one image for the link's hover state, which is the same except for the differently colored background.

It just hit me I could do this with only one image.

Read more

Peter-Paul Koch presents the Dutch Guild Of Front-Enders

posted on 02 July 2007 (11:29 PM)

Peter-Paul Koch is tired of the current state of professionalism in HTML development in Dutch web design agencies, and has formed the Dutch Guild Of Front-Enders.

Read more

Animated lists: Graceful degradation using CSS 3

posted on 01 May 2007 (07:25 PM)

I like to think of creative ways to provide graceful degradation; If Javascript is disabled, is there a CSS way to use the features Javascript would provide?. Most of the time, the answer, sadly, is "No".

With CSS 3 however, it's a lot easier to provide gimmicky stuff without having to write Javascript, and therefore, it's easier to provide graceful degradation. Note: the example in this article will only work in browsers that support (parts of) the CSS 3 spec, such as Firefox.

Read more

Use less DIV, use more HTML - Part Deux

posted on 29 March 2007 (04:08 PM)

Arjan Eising posted an interesting comment to my previous article:

Nice job done on this... but what will happen when you don't use the body element for instance? While it is not needed to markup your text valid...

This article provides an answer.

Read more

Use less DIV, use more HTML

posted on 26 March 2007 (09:49 PM)

I always try to write my HTML as clean as possible. This means, among other things, the following:

  • Always try and find the most semantic elements and attributes for the job
  • Don't use too many redundant div elements, none if possible

The latter item will be the subject of this article. I've been playing around with using the HTML element in my CSS rules lately, and it turns out to be one helluva flexible element. We really have to start using BODY and HTML as the block-level elements they are!

Read more

Pretty form controls with CSS

posted on 28 February 2007 (10:48 AM)

As Roger Johansson proves in his article(s) on styling form controls, you are very limited when it comes to spicing up form controls.

There are some sites around that provide an alternative, but these techniques rely heavily on Javascript to swap the normal form control with an image.

With the CSS3 pseudo-class :checked as my weapon of choice, I'll provide a way to make checkboxes pretty using CSS only (and tell you in which browsers it goes wrong).

Read more

Stop your page from shifting!

posted on 10 January 2007 (02:36 PM)

You know content, right? When it gets really really long, your friendly browser provides you with a scrollbar so you can access that content.

But sometimes, your content is not really really long. Your browser then does not display a scrollbar, for it's superfluous. It's a great system, really, but it does make your content shift from left to right and back when you browse different pages.

Read on if you want to stop this from happening.

Read more

Nested lists bug

posted on 26 August 2006 (02:59 PM)

I found me a quirk today! When implementing my search page, I noticed an awkward bug in Internet Explorer 6 and 7. It's got to do with nested lists in the first list-item. Read on for an example and a solution.

Read more

Styling quotations

posted on 23 August 2006 (02:51 PM)

I've always liked the way most standards-compliant browsers display inline quotations (marked up with <q>). In case you don't have such a browser at your disposal; it's an easy concept to grasp, these browsers put quotation-marks around the text like this:

A picture of how inline quotations look in standards-compliant browsers

Read more

Image popups that fit

posted on 23 August 2006 (02:19 PM)

First of all; popup windows should not be used. They're annoying, unfriendly thingies that should only be used as a last resort. Jakob Nielsen even states it the number 2 Web Design Mistake in his Top Ten. So don't use 'em! There are much better alternatives anyway. But if you really, really want to use popups, this article provides you with a handy approach.

Read more

Picking units

posted on 11 August 2006 (04:18 AM)

CSS provides a lot of different units to measure with. Of course there are pixel, point and centimeter (among others), which are fairly regular. Other interesting units are em and percent. The one big difference between those units is both em and percent are relative, as opposed to the absolute pixel and point. In this article I will provide some insight on the pros and cons of both groups.

Read more

Preferences

These settings will be saved for your convenience.