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…)

This past year I have been working on a CSS reference book along with Tommy Olsson and so I am pleased to announce that the book has just been released by Sitepoint.

Therefore I am taking this opportunity today to plug it a little as I am quite proud of the result as it took a lot of research and hard work. I believe Tommy and I make a good team because of Tommy’s extensive technical knowledge and astute understanding of the finer details of the specs (something that often goes above my head), and my practical knowledge on a day to day basis with how CSS works in the real world.

(more…)

Quite often I need to be in two places at the same time but it’s just not possible in the real world. Luckily however this doesn’t apply to some CSS techniques and in this article we will explore an often used CSS technique that allows portions of the same element to appear to be somewhere else.

If you are unsure of what I mean then take a look at this tooltip example.

CSS ToolTip

As you can see from the example above as soon as you rollover the anchor link a nice little tooltip box appears. I’m sure many of you know how this is done already but we’ll just explain the basics a little before we move on to some more interesting examples.

(more…)

Oh No! Not more round corners!

In a previous article we learned how to apply some nice shadowed corners and sides to a fluid width box and I thought it would be good to show a similar method that allows for transparent corners. This will allow the element to sit on any colored background without having to paint the transparent part of the corner with the background color.

I know you might think “Oh no - not another round corner tutorial” but stick with it and I’m sure you’ll find some of this info useful. Round corners are always a bit of a pain to do in CSS so I present here an easy to follow way to make round corners that can be used everywhere. We aren’t going to do anything clever or overly complicated and we aren’t going to bother with shadowed corners/sides because as I mentioned above we have already been there.

Before we begin here is a finished example for you to look at.

(more…)

Before I start I’d like to wish all readers to this column a “Happy New Year” and thanks for their continued support.

As a new year is already underway it seems like a good time to review what we’ve learned in some of the articles in 2007 and to highlight some key points or just points of interest. The following topics are taken directly from the articles and you should refer to the articles for the full details if you find any topics that interest you. Not all the articles are listed here although I do mention most of them.

January 2007

CSS Floats - Repelling Content

In January we learned that margin, padding and borders on static elements actually slide under any floated content as if the float was not there.

“Floats are removed from the flow and therefore any padding, borders or backgrounds on the repelled content will still slide under the float as if the float wasn’t there.”

This is an important point and the reason that so many authors are left scratching their head when they find that margins don’t seem to be working. Usually the problem is that they are setting a margin from a floated element and of course the float is not really there and so the margin slides under the float until it hits something more solid. The same is true for padding, borders or even background images on the elements concerned.

In the same article we also learned about the infamous double margin bug on floats and how to cure it using display:inline.

Read more …

Relatives - Who Needs Them ?

Still in January we discussed the misconceptions that authors have when using relative positioning. The main point of discussion is that relative elements are not really moved at all.

” That is to say that it has no effect whatsoever on the flow of the document. Although this may seem strange what relative positioning does is that it moves an element visually but not physically. According to all the other elements on the page the element is still in its original position and they will react to it as though it were still in the space it originally occupied in the normal flow of the document.

In technical terms the element is moved the specified distance but the space it previously occupied is preserved. Therefore if you move an element using top:-200px then you will find that there is now a big gap in the page where the element originally was and all content is treating that gap as though it were the original element.

As already mentioned above relative positioning isn’t generally used for structural layout but is more used for more subtle effects. This could be that you want to overlap one element with another without altering the flow of the document at all. If you used negative margins to overlap an element then you would find the flow of the page would also be affected by this 10px shift. Whereas with a relatively positioned element there will be no change to the flow of the page at all and only the relative element gets moved. Everything else remains where it was and totally unaware that anything has happened.”

Read more …

(more…)

In this article we are going to re-visit a technique we first learned in the Star Matrix Pre-loaded article, except that this time we are going to use it to produce a navigation menu. Before we start it may be worth it to become familiar with the menu we are going to make; you can see a live version here.

At first glance it seems simple enough, but as often is the case there’s more to it than meets the eye. As you roll your mouse over a menu item all the menu items go into the off-state and only the hovered item stays alight. This is quite a subtle difference from the norm where just the item rolled-over changes. Usually this effect can only be done with added JavaScript but today you will learn how to do this with CSS alone.

(more…)