Now that IE7 has overtaken IE6 in usage it has become more common to find authors trying to use position:fixed in their layouts. Therefore in this article we will try to address some common problems and misconceptions when using position:fixed (we will not be covering the background-attached “fixed” property but you can find out more about that here if you are interested.).

Note that position:fixed doesn’t work in IE6 and under so you will need to be using another browser although we will try to accommodate IE6 with some alternate styling.

Fixed to What?

Fixed positioning varies from other positioned elements in that the element is always placed in relation to the viewport and not a local stacking context. Even if you add position:relative to a parent of the fixed element it is still placed in relation to the viewport.

This can present problems if you want to place the fixed element inside a centered layout and then place it at a certain position within that centered layout.

In order to have a positioned element inside a centered layout you can simply let it occupy its normal position in the flow and not specify any position values for top, bottom, left or right at all. This will enable the element to become fixed at that point while the rest of the content scrolls.

We’ll work through some simple examples to show this in effect.

We’ll start with this simple Example

(more…)

In recent thread over at the SitePoint forums, someone asked how to have any sized image fit nicely into the viewport while maintaining its aspect ratio. The assumption is that all the content can fit in the viewport and no scrollbars are needed. While CSS is wonderful and magical, it doesn’t know the sizes of images and let us play with them to pixel perfection, so we must turn to good old JavaScript to maintain aspect ratio.

(more…)

I’d like to share a couple of simple tips for adding graphical borders or side shadows to your CSS layouts. This article is mainly aimed at beginners but there are some useful tips for everyone if you’ll bear with the simpler stuff first.

CSS Full Length Graphical Borders on Fluid Layout

It’s quite easy to use graphical side borders on fixed width elements as you can simply repeat an appropriate sized image down the y-axis of the container and draw both edges at the same time. However, it is often not well understood how to achieve this effect with an element that has a fluid width especially in a 100% high environment.

We will first learn how to apply an image to both sides of a normal content height (but fluid width) container and then later on explore the possibilities of using this for a 100% (viewport high) container.

(more…)

It’s always good when you learn something that you already knew isn’t it?

I know that probably doesn’t quite make sense but what I mean is that quite often you know how things work but it’s how they are applied that can make all the difference. This is the beauty with CSS where you can always be surprised at the different ways the same layout can be achieved. This happened to me the other week when I noticed a different way that a site had been centered using simple techniques already known to us all. Indeed, many of you may already have used this method but it seems to have escaped my attention until now.

The Old Way

One of the first things I learned to do in CSS was how to horizontally and vertically center a fixed width and height element. This could be an image for a splash page (god forbid) or a small centered site that some designers love to do. Originally this was accomplished with absolutely positioning an element 50% from the top and 50% from the left of the viewport. This of course only places the top left corner of the element at the center of the viewport and you then need to drag the element back into a central position with a negative margin equal to half the height and half the width of the element.

Let’s take a look at the old way of doing this and note what the problems are.

(more…)

This is an old question but worthy of a mention once again especially as I seem to have spent the last few days repeatedly pointing out to posters why their page isn’t displaying properly. No matter how good a coder you are no one is perfect and the odd typo or spare character will often creep into your code when you aren’t looking.

Why Should I Validate?

I don’t know the answer “why you should validate” but I certainly know why I validate.

In a recent article on Search-This a poster commented that it was unnecessary to validate HTML and CSS and served little benefit so I thought it would be wise to explain why I always validate and why it is good for me. You can then make up your own minds whether you should validate or not.

(more…)

Sometimes the simplest things can turn out to be more complicated than you ever imagined. This can sometimes be the case with CSS and cross-browser support. It’s no wonder that beginners to CSS often throw their hands up and revert back to using tables because some bug or other has thrown them off course.

As an example I thought I’d document a few problems that crop up time and time again with absolute positioned elements in our favorite browser - yes, IE6, I’m talking about you again!

Removed From The Flow

Absolute elements are removed from the flow and have no affect on surrounding content. Conversely surrounding content should not be able to affect absolute elements either. That’s not quite true as a positioned element will create a stacking context for further positioned elements but that’s as far as any effect will go. (We often set position:relative on a parent so that the absolutely positioned child can be placed in respect of that parent and not the viewport.)

In effect the absolute element should not care what else goes on around it and is oblivious to anything except its own start position. IE, however, has a few peculiar issues with this in the simplest of layouts and we will document a few of the most common and thought-provoking problems you will encounter on a day to day basis.

The following examples are a little contrived in order to show the effects at the simplest level and could be done by other methods but that’s not the point of the exercise.

(more…)

Keep scrollin’, scrollin’, scrollin’,
Though the streams are swollen,
Keep them images scrollin’, rawhide.

No, I haven’t gone mad yet - it’s just been a long day and I couldn’t think of a suitable tag line so I just burst into song. As you may have guessed I’ve got a bad case of the scrolls today but the doctor says I’ll be fine.

Let’s get to the point before you run for the door. This week we will look at how to create an element where the inner content is larger than the parent. We’ll also look at how by using the overflow property on the parent we can arrange for scrollbars to appear so that the inner content can be viewed.

This may seem like a very simple task. However, there’s more to this than may be anticipated so bear with me and I think we can all learn something along the way. As usual let’s start by viewing the finished result so that you have a good idea of what we are going to achieve. Here is a screenshot of the finished result.

Figure 1

(more…)