CSS Trickery

Pop Up ‘n’ Out Tab Menu

Alex S — Thu, 17 Jan 2008 12:28:59 +0000

Okay, so there are hundreds. No, thousands. Okay, there are most likely millions of CSS menus already out there, but I thought I’d go ahead and throw another into the WWW bucket.

It’s a little different to the usual take (at least, I like to think so) but best of all, it’s dead easy, it’s quick, and it’s oh so simple! So, you ready?

(more…)

Design for Firefox…

Jack F — Thu, 03 Jan 2008 13:28:25 +0000

We all know that the battle for browser supremacy has always been a struggle, but with standards slowly but surely improving, the usage of extensive, non-validating hacks is less. IE7, although still not quite as CSS capable as FireFox, was a huge step up from IE6. With, in the most part, people using IE7, FF2.0, Opera & Safari, we can begin to emit hacks from our style-sheets. However, there are people who have not made the upgrade to IE7. That is certainly understandable, when IE7 first came of age, it was very buggy, and in-fact I myself removed it just a couple of days after installation.

Firefox is, amongst web designers, seen as the best browser to design with… (more…)

Keep It Organised

Alex S — Sat, 22 Dec 2007 18:23:51 +0000

As you push on with your latest design, you might find that your stylesheet begins to build up rapidly. Before you know it, you’ve got line after line of code, with buried hacks and declarations all over the place, and some you can’t even remember what for!

So you end up back and forth between HTML and CSS, reminding the old brain what that class was there for. Then you fire up your browser and find IE is playing up again, so back into your CSS you go. But where is that declaration? Somewhere in that style haystack, but goodness know where!

(more…)

Universal CSS Settings

Jack F — Fri, 21 Dec 2007 19:43:29 +0000

As we all know, different browsers display different code. That line must feature somehow in nearly every article on this site and give us as web designers more work to do. One way to try and cut down on the work we do, is to apply the same rules to most of the, what I would call, generic elements, to make sure each browsers start at, if you like ‘0′.

(more…)

Using The Horizontal Rule to Great Effect

Jack F — Mon, 17 Dec 2007 17:13:31 +0000

In my opinion, one of the most useful elements for making a page clear is the

, or, as I call it, the ‘horizontal rule’. This, as with all other elements, can be styled with CSS, however you need to be careful, as different browsers style the

differently.

(more…)

Using the :hover to greater effect - Tables

Jack F — Fri, 14 Dec 2007 10:46:08 +0000

Before IE7, the :hover could only really be used on links. This was because IE6, the major browser at the time, would not allow the :hover to be assigned to anything other than ‘a’. However, with IE7, this attribute can be used more, because IE7 & FF both understand the :hover on pretty much anything. All we, as web designers, need to do, is make sure this degrades well and that the site accessibility for IE6 users is not compromised.

If you would like to know other uses for the :hover on things other than ‘a’, please check out these posts:
http://www.csstrickery.co.uk/2007/12/08/borders-as-underlines/

That post shows how assigning hover to the ‘li’ gives a nice effect. Anyway, on with this post.

(more…)

Fat Free CSS

Alex S — Wed, 12 Dec 2007 01:14:04 +0000

Well, almost.

CSS is great, no doubt about it. But when it comes to using it, things can soon get messy. With a class here, an ID over there and a helping of multiple declarations, the whole thing can soon snowball into a mass of margin zeros, float left’s and goodness knows what else.

So, with some low-fat ingredients and a sprinkle of ambition, let’s get to work.

(more…)

Firefox Essentials: The Top 3 Web Developer Extensions

Jack F — Tue, 11 Dec 2007 21:57:43 +0000

Most web developers would agree that, whilst designing, design for FF/Opera and fix for IE. Therefore FF is used as the primary testing browser. Thanks to the ability to integrate extensions into FF, your web developing can become a lot easier with the following list of extensions.

(more…)

CSS Indentation

nashultz — Mon, 10 Dec 2007 00:38:08 +0000

After about a year of coding, I have decided to become a writer and spread the knowledge of HTML and CSS coding around. I was given the opportunity to write for this site, so here I am and here is my first article. Hope you enjoy!

Have you ever wanted to know how to make your lines of text indented? Well this small post is going to show you the tricks on how that is done. Some may think that the code

is going to do the trick at separating the lines of text. Well that is one way about doing it. Some may even add non-breaking spaces to make the indent possible. Although that may work and be valid, it is not the correct way to make the indentation possible. The correct way to make the indent possible is by adding the code text-indent: 1.5em; to your CSS paragraph class.

(more…)

Borders as Underlines

Jack F — Sat, 08 Dec 2007 17:28:07 +0000

This is an article I wrote for Web Forumz ‘Creative Coding’ Newsletter.

Usually when a web designer wants to make a user acknowledge when they hover over a link, they would use the text-decoration: to either add an underline (if the navigation links have no underline in their inactive state) or remove an underline if vice versa.

(more…)