Posts Tagged ‘css’

This post has come from a quick bit of experimentation, trying to centre align list items.

The design called for centerally aligned list item links, and there could be 3, 4, 5 or more links. Initially I was stumped as to how to create this effect. I had considered a left margin to create the illusion of centre aligning for each possible number, but I knew there was a better way. I’m always aiming for a solution that works in the older browsers too, and this includes IE6. I don’t know why I do it to myself, especially as it apparently only has less than a 5% market share nowadays.

(more…)

In an ever-changing web world, new technologies are constantly evolving. With the emergence of alternative font display systems, new CSS effects and the increased uptake on modern browsers, designers are using these new techniques more and more. Add this to a sprinkling of current design ‘trends’ such as the noise filter, and pixel perfect line details and it makes for some very similar looking websites.

It is inevitable then that these new and shiny capabilities will catch a web designer’s eye (especially after years of browser constraints) but are we turning our eagerness to use the latest styling techniques into a world of monotonous and similar designs?

(more…)

I thought it was about time I experimented with some CSS3 multiple backgrounds so I decided to play around with a wallpaper design I worked on in September.

My experiment uses a top left, top right, bottom left and bottom right png gradient on the HTML element, with a repeating png overlay on the BODY.

(more…)

Whenever I start a new project, I seem to be repeating myself when it comes to adding, and styling basic content: Headers, Lists and Tables etc.

So I decided to create a ‘Kitchen Sink’ of markup and basic styling, using some content from the great HTML-Ipsum.com plus a few extra bits.

(more…)

I have recently been working on sites which have had the need for pixel perfect alignment, and I came across an alignment anomaly among the major browsers.

Previously, I have used IE7/ IE6 specific style sheets with completely new backgrounds, each 1px to the left or right of the original to compensate, but I decided to do some digging and found this blog post:

http://www.sohtanaka.com/web-design/1px-background-alignment-bug/

One of the comments I came across suggested a very simple alternative to multiple stylesheets and images, and is the version I used in my recent design:

html{background: #242424 url('../img/background.gif') repeat-y center; margin-left: -.1px; /*1px shifting hack*/}

A simple use of a margin allows the same image to be used for all browsers. What’s even better is that, although technically a hack, it is valid.