All posts in CSS

At one of my previous jobs we had a massive amount of CSS to handle; we had the global styles, then section/page specific styles and on top of both of those we had different styles for various versions of the application (as the same application and content ran many sites).

The solution we came up with was not too dissimilar to the one discussed in this months A List Apart article Progressive Enhancement with CSS and that article is well worth a read. But I also thought I’d write a little about the setup that we came up with and how it worked out for us.
Continue reading this entry »

I’ve just read this interesting post on how to speed up your web application with an automated system for working with browsers cache for your assets (CSS, JavaScript, images etc.).

Previously I’ve used query strings parameters within asset requests so that they act as a ‘cache bust’ parameter, these have usually been the source control revision number and is built into the release process. But I’ve never taken the step of force an expiry date on content that can be cached and the solution in the post is a lot more fine grained than my previous solutions. Something to consider for the future.

I decided quite a while ago, probably about 18 months ago, that I wasn’t going to attempt to style form controls any more.

This was based on my personal experience and my personal preference – I think your average user appreciates being able to easily identify a text box, a form button etc. – as forms can be confronting beasts to some people. If you leave all the form controls in their default style in the users chosen browser then at least they can readily and quickly identify and understand them.
Continue reading this entry »

Every time I start a new project I’m always trying to do things better than I did on the last project, it’s the way for all developers.

One thing that has always bugged me is trying to get the base text size the same across all browsers, but now I’ve totally dropped the idea of supporting IE 5.5 ever again I thought it might be easier now.
Continue reading this entry »

I’ve come across this problem before, where I want to hide the overflow of an element, this works fine in all browsers except IE – however it’s never been a problem in anything that I’ve progressed far enough with to worry about fixing it for IE.

Well this evening I came across the problem again, and found the solution – IE (I’m just looking at 6 here – not sure if 7 does the same) doesn’t like it when you have a position: relative; on the child (or possibly children) of an element which you have declared overflow: hidden;.

So in my case swapping that out for position: absolute; on the child and overflow: hidden; position: relative; on the parent worked a charm. Now IE 6 plays nicely like its other browser friends.

Last weekend I spent about 25 hours developing a prototype for a meeting we had with a potential client on the Monday. We started with a blank page at 9:00 a.m. on Saturday morning and by 10:00 p.m. Sunday we had a pretty much fully functioning prototype which had a great design (in my opinion) and all the functionality that we intended to demonstrate. Continue reading this entry »

I’ve been reading the 24 ways to impress your friends web developer tips on the run up to Christmas and the 21st article, Swooshy Curly Quotes Without Images, was quite timely for me as it is an effect I was going to include in my current project.

At first it looked quite promising, but upon experimentation it proved, for me at least, to be a little bit hit and miss to get it right in all browsers, and I must admit I gave up trying to tweak the margins and paddings quite quickly. But I liked the idea of not having to resort to using images for the large quotes, as I have done on previous attempts and began adding my own thoughts to the mix.
Continue reading this entry »

I’m in the midst of resurrecting another of my old sites in which I’m using the old design but bringing the HTML & CSS up to scratch.

The design calls for the site to be a 760 x 420 pixel container centered both horizontally and vertically within the navigator.
Continue reading this entry »