CSS archive
Articles, examples and tutorials relating to web development using Cascading Style Sheets.
Why does my content flow outside its box?
Usually this question is accompanied by: “It looks fine in Internet Explorer but not Firefox”
and it’s usually because a height has been specified on the element in question.
Don’t use IE as your primary testing browser
As mentioned in previous posts, I spend some time on web design-related forums so a lot of what I’ve written on this site has been in response to questions I see asked quite often. This post is not so much about a question, but a reaction.
Styling form buttons
Anyone who’s used the web has encountered buttons in forms. Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. Roger Johansson has delved into this issue in more detail.
Content bookends
Sometimes you want to have a list of text items or images appear on the same line but with some items aligned to the left and some aligned to the right. An example of this would be a footer where you want to split the links down the middle. Or maybe a blog post where you want to put the date on the left and the number of comments on the right. More on Content bookends
Onfocus, background-changing, sliding door tabs
There are already several excellent articles discussing the sliding door tabs technique for creating navigation elements, so why do we need another one?
Elastic layouts
Prompted by a comment from Mike Cherim of Accessites in answer to my post on Zoom Layouts, this post is to list Elastic Layouts.
Zoom layouts
I came across an article today on A List Apart written by Joe Clark: Big, Stark & Chunky (it is 18 months old - I know, I should read ALA more often) which was aimed at promoting the use of ‘zoom layouts’, which are those designed for people with low or impaired vision.
Single image replacement rollovers with Suckerfish dropdowns
I discovered two of my most often used CSS techniques at the same place - Petr Staníček’s Wellstyled.com (Staropramen, Budvar, Pilsner Urquell, great CSS techniques - gotta love the Czechs 
).
And those techniques are an image replacement (IR) technique that I later found out was actually called the Gilder Levin method and the use of a single image for creating CSS rollovers without the need for preloading images.
More on Single image replacement rollovers with Suckerfish dropdowns
Absolute positioning practical examples
If you’ve read Absolute Positioning Pitfalls, you’re probably wondering when you can use absolute positioning.
Well, I generally find that I use it not for laying large areas of a layout, areas that contain multiple other elements, but rather for positioning individual elements in relation to other elements. (It certainly can be used for creating large layout areas in certain instances, but I’m not going to cover that here.)
Absolute positioning pitfalls
This article first appeared on CSS Creator Forum and was written in response to the common requests for help from people new to CSS who were encountering problems whilst trying to use absolute positioning to create layouts (seemingly as a result of using Dreamweaver in ‘design view’ mode).
