You are viewing all articles posted in “HTML and CSS”
Recent articles can be found on the homepage.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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).
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.
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.
posted on 01 May 2007 (07:25 PM)
I like to think of creative ways to provide graceful degradation;
posted on 29 March 2007 (04:08 PM)
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.
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
divelements, 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
HTML as the block-level elements they are!
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.
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).
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.
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.
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:
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.
posted on 11 August 2006 (04:18 AM)
CSS provides a lot of different units to measure with. Of course there are
centimeter (among others), which are fairly regular. Other interesting units are
percent. The one big difference between those units is both
percent are relative, as opposed to the absolute
point. In this article I will provide some insight on the pros and cons of both groups.