If you browse any CSS forums you will undoubtedly see a number of posts where the answer is: “You haven’t cleared your floats.” Although the concept behind the CSS clear property is quite simple it is still a common cause of frustration among newcomers to CSS. This article will explain when and where you need to clear floats and the reasons why this is necessary.
Episode 9 - 9/3/2007
Guest: Eric Meyer, CSS Guru meyerweb.com
Background: CSS Master, Author, Teacher
Total Time: 25 minutes
What I like about doing Random Bits is the format — it’s very different from a typical interview where it’s just a question and answer session. Instead I try to have more of a conversation with the guest and let you, the audience, ease-drop in on the conversation.
This was definitely a fun interview for me! I’ve been wanting to interview Eric for awhile now but, well, I’m only a novice at CSS so I wasn’t sure I was worthy of being in his presence. 
But because I didn’t want to limit you, our audience, from diving deeper into Eric’s CSS knowledge I decided to ask Tommy Olsson, friend of Search-This and CSS guru in his own right if he would join me. That way we could represent both sides of the CSS field, that of a beginner as well as someone who is very experienced.
You will be happy to hear that this will be a two part series! So what are you waiting for? This is Eric Meyer — the CSS ninja! Start listening!
No I don’t want you to take a nap. I’d rather you took a little tour with me and explore the possibilities that the CSS z-index property has to offer. In a previous article I briefly touched on how to use z-index and thought now was the time to expand more on the subject. So wake yourself up, get your thinking caps on and follow me as we come to grips with z-index.
Try and hang with me during the technical side of things because we have a fun exercise at the end!
I’ve been thinking negatively once again and instead of keeping my thoughts to myself I thought I’d share them with you. In this article we look at how negative margins work and how to apply them in everyday usage.
A number of people suffer under the misconception that negative margins are in some way a hack; they are not. In fact negative margins are valid CSS and extremely useful in certain situations. They only become a hack if you are using them to fix an error that you have made elsewhere. In normal usage negative margins work quite well and are supported across modern browsers. However, there are issues if you use negative margins on the opposite side of a float (e.g. floating left and then using a negative margin on the right) although most modern browsers now behave the same way when this happens. In some of the examples below you will see what I mean. Let’s dive in!
This article will show you how to highlight the current page’s link in a navigation menu using only CSS, no scripting. For example, if you have a navigation menu made up of Home, About, Contact and Products links and our viewer is currently viewing the About page then the link will be highlighted or in some way indicate that they are viewing that page.
After reading Paul’s article “CSS The Star Matrix Pre-loaded“, I wanted to contribute by writing a back-end solution to the CSS effect.
Before we get into this, you will need to have PHP 5 installed and MySQL 3.23 or higher. PHP 5 allows for greater implementation of OOP (Object Oriented Programming) than its predecessors.
Recently I had to create a Star Rating system for a client so I thought I’d share with you the techniques I used to accomplish this. If you are not familiar with a Star Rating System, it’s simply a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something.
You may think a simple rollover would accomplish this but difficulty arises because as you rollover each star it should stay highlighted while you light up the next one and so on until the end of the row of stars. If this doesn’t make much sense to you then take a look at what we are going to achieve in this article. (I will leave the server-side coding to someone more knowledgeable and we will just concentrate on the visual aspects of making this effect happen. )
