CSS Help Pile » Simple Tips & How To

Vitamin Features: Creating Sexy Stylesheets

Dec. 9, 07 • Simple Tips & How To0 comments

Vitamin Features: Creating Sexy Stylesheets is a great run through of simple tips that help tame your CSS from the outset.

Styling the Button Element with Sliding Doors

May. 26, 07 • Simple Tips & How To0 comments

Button styling is all the rage these days and Styling the Button Element with Sliding Doors builds on Particletree's excellent Rediscovering the Button Element to create another great use of the button element.

How to make sexy buttons with CSS

May. 7, 07 • Simple Tips & How To0 comments

How to make sexy buttons with CSS is a great little technique for making attractive buttons. It uses a simple and straightforward approach, too.

Form field hints with CSS and JavaScript

Apr. 17, 07 • Simple Tips & How To0 comments

Form field hints with CSS and JavaScript is a great way to guide your users while filling out forms of any type. I love the behavior of this technique and think it would be especially great for long forms.

10 Quick Tips for an Easier CSS Life

Mar. 27, 07 • Simple Tips & How To0 comments

10 Quick Tips for an Easier CSS Life nails it with some of the best tips that every standards-based designer should know when working on his or her sites.

Top CSS Tips

Feb. 18, 07 • Simple Tips & How To0 comments

Check out Top CSS Tips for some interesting tips and tricks you may not have considered before. Don't miss the comments for reader-submitted tips.

53 CSS-Techniques You Can't Live Without

Jan. 19, 07 • Simple Tips & How To0 comments

53 CSS-Techniques You Can't Live Without is loaded with great CSS tips and tricks you may have forgotten. With screen shots for each technique, it's an easy way to discover new ones, too.

A CSS-based Form Template

Dec. 13, 06 • Simple Tips & How To1 comment

A CSS-based Form Template is a great way to get started using CSS for your forms. Check out the related post for more information on the template.

CSS gallery layout - smells like a table

Sep. 28, 06 • Simple Tips & How To0 comments

CSS gallery layout - smells like a table is a simple way to get a nice gallery effect (see the example) without using any tables.

Easy CSS hacks for IE7

Sep. 14, 06 • Simple Tips & How To0 comments

I know that no one would even think of using CSS hacks anymore but just in case you're curious, check out Easy CSS hacks for IE7.

Pure CSS Menus

Jul. 27, 06 • Simple Tips & How To0 comments

The examples of how to use CSS for fly-out, drop-down, etc., etc. menus are getting better and better. These Pure CSS Menus are pretty damn clean in terms of code and use only minimal JS. Very cool.

Future-proof your CSS with Conditional Comments

Jun. 23, 06 • Simple Tips & How To0 comments

I guess the rule will soon be that with each new version of IE, you'll have to add another, separate CSS file tailored specifically to correcting its various wonkeries and gotchas along with another file full of code to correct the bugs that effect of all versions of IE. Gross.

But, I suppose, at least folks like Bruce Lawson make accessing those various files easy by providing nice write ups on how to do just that: Future-proof your CSS with Conditional Comments.

'Sliding Doors' Box - Rounded Corners for All

May. 26, 06 • Simple Tips & How To0 comments

"Sliding Doors" Box - Rounded Corners for All is a nice little technique that avoids the biggest problem I have with 90% of the other rounded corners techniques out there: tons of crap markup. It's about as tidy as you're gonna get until all browsers support multiple background images.

CSS Drop Column Layout

May. 3, 06 • Simple Tips & How To1 comment

CSS Drop Column Layout is an oldy but a goody if you haven't seen it yet... or if you've forgotten about it. The technique is a slick way to take advantage of the wide range of screen sizes your visitors may have without sacrificing quality for any one in particular.

Top 10 CSS Tutorials

Apr. 17, 06 • Simple Tips & How To2 comments

Top 10 CSS Tutorials points out some really great resources that have cropped up in the past year or so. Although I think CSS Bar Graphs should have been #1 it's hard to argue with this list and every technique listed earned its spot.

Hoverbox Image Gallery

Mar. 1, 06 • Simple Tips & How To0 comments

I always love it when folks create clever ways to use CSS (especially when it's done without JavaScript) and SonSpring's amazing Hoverbox Image Gallery is no exception. Very well done!

Writing cross-browser CSS

Feb. 7, 06 • Simple Tips & How To0 comments

Writing cross-browser CSS tackles the key points involved in making your sites as cross-browser as possible before it becomes a huge headache. Just yesterday I was talking with someone who was having a site designed and the developers were struggling with, of all things, Firefox. It's good to know that my suggestion at that time followed what Roger imparts today:

"Use a standards compliant browser. [...] In practice, this means that you should use Firefox, Opera, Safari, or a browser that uses the same rendering engine as one of them during development, and then check in Internet Explorer and make any necessary workarounds."

Scalable logos - johnoxton.co.uk

Jan. 30, 06 • Simple Tips & How To0 comments

John Oxton has created an elegant way to create scalable logos using CSS and a dab of Flash. Check out any of the examples and resize the text to see the effect in action.

Centered Tabs with CSS

Jan. 25, 06 • Simple Tips & How To0 comments

Centered Tabs with CSS is a little old but is still an excellent way of creating great looking tabs. The mark-up is tight and the CSS is too. Don't forget to check out all the 24 ways to impress your friends!

Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One

Jan. 13, 06 • Simple Tips & How To0 comments

Anyone who has built a complex table-less standards-based website probably had to learn the hard way how unwieldy maintaining the associated mark-up and CSS can become if one isn't paying attention. For those of us still learning those lessons who want to skip ahead -- or those who are interested in comparing notes -- there's: Managing HTML and CSS to Keep Clients Happy and Avoid 'Disaster' - Part One.

via andyrutledge.com

Printing CSS background images (sort of)

Dec. 27, 05 • Simple Tips & How To0 comments

Printing CSS background images (sort of) manages to work around the fact that printing background images is turned off by default for most web browsers. Sometimes you'll get a client that wants a page printed exactly as shown on the screen, and this is a clever way to ensure that happens.

This would be an interesting addition to P+C DTR, too.

via CSS Beauty

CSS for Bar Graphs

Dec. 6, 05 • Simple Tips & How To0 comments

Using some percentage widths and snazzy gradients, Apples to Oranges has a great write up on how to pull off some attractive bar graphs using CSS. The three examples include a basic bar graph, a more complex bar graph and a vertical bar graph. It's good to see too, that the markup is as clean as the CSS is clever; very well done.

CSS Shorthand Guide

Nov. 2, 05 • Simple Tips & How To0 comments

Dustin Diaz has put together a sweet CSS Shorthand Guide detailing various shorthand property values and explaining quirks regarding their use.

Curing Float Drops and Wraps

Oct. 1, 05 • Simple Tips & How To0 comments

Curing Float Drops and Wraps runs down the list of all too common issues that can screw up an otherwise pleasant float-based layout. This article touches on a lot of areas: the box model, CSS hacks and exposes/explains some of the more obscure IE bugs.

via hicksdesign

footerStickAlt: Stick Footers at the Bottom

Aug. 29, 05 • Simple Tips & How To0 comments

The man in blue has a fixed up version of the footerStick technique called footerStickAlt that works in more browsers. To learn more about the alternative technique, read the related discussion.

Deluxe CSS Dropdowns and Flyouts

Aug. 23, 05 • Simple Tips & How To0 comments

Deluxe CSS Dropdowns and Flyouts from the good people at positioniseverything.net isn't pure CSS but it's a fine menu system with a lot of snazzy, user-friendly features.

Robust CSS Drop Shadows

Aug. 18, 05 • Simple Tips & How To0 comments

Robust CSS Drop Shadows are some pretty snazzy drop shadows because they don't have issues typical of most drop shadow techniques. So, for example, it doesn't require four separate divs or lose detail in the shadow (non-blended, hard edges).

Optimizing CSS presentation in HTML emails

Aug. 4, 05 • Simple Tips & How To0 comments

Why spend all day checking your CSS-formatted email in various email clients when you can spend 20 minutes reading Optimizing CSS presentation in HTML emails and learn even more? Not only that, but if you scroll down a bit you can download a sample email, sweet!

Running With Sprites (Get'n Down w/ Images)

Jul. 29, 05 • Simple Tips & How To0 comments

Another image slicing meets CSS meets sprites resource to add to pile from Avalonstar.com. This example uses the :active pseudo class to add another layer of interactive goodness. Confused? Jump right to the example and click around to check it out.

Architecting CSS

Jul. 20, 05 • Simple Tips & How To2 comments

The article Architecting CSS over at Digital Web is too great for words. For beginners this is great because you can avoid getting burned by your styles. And for more experienced developers, who have already learned from their mistakes, it's still a great read and may even inspire a few more techniques for style management.

CSS Tabs with Submenus

Jul. 3, 05 • Simple Tips & How To0 comments

CSS Tabs with Submenus is an elegant example of using nested lists to create CSS tabs. What makes this method stand out is that the mark-up of the tabs doesn't change, only the body's class changes; containing navigation logic to a single line of markup.

CSS: more accessible graphic menu

Jun. 28, 05 • Simple Tips & How To0 comments

I don't know what the hell this page is saying but the resulting menu is really interesting and attractive. From my cursory overview, it looks like a combo of CSS sprites and a more traditional list-based navigation scheme. Scroll to the bottom of the page for a download of the CSS, markup and images in a single zip file.

Zoom Layout

Jun. 26, 05 • Simple Tips & How To0 comments

Doug Bowman's Zoom Layout post is an excellent reminder on how easy and important flexible layouts are for low-vision users. A good companion to Doug's write up is Clagnut's How to size text using em's, previously posted at the pile in May of '04.

Elastic Faux Columns

May. 27, 05 • Simple Tips & How To0 comments

There's been a lot of talk about what's better when it comes to fixed vs. liquid layouts. If all that talk has increased your interest in liquid layouts, you may be interested in reading Elastic Faux Columns at the beautiful pixelmeadow.com.

CSS Organization Tip 1: Flags

May. 4, 05 • Simple Tips & How To0 comments

Grouping and organizing CSS isn't exactly straight forward when you are dealing with large CSS files. There are best practices, sure, but for the most part you're free to be inefficient and still have a valid style sheet. Luckily there are great little write-ups like CSS Organization Tip 1: Flags that suggest some tips to help avoid avoid messy style sheets. Keep your eyes peeled for next tip, too; it will deal with how to break out sections effectively.

How to Create a Photographic Gallery Using CSS

Apr. 14, 05 • Simple Tips & How To0 comments

How to Create a Photographic Gallery Using CSS is an article written by the creator of The CSS Playground. This is a pretty interesting way to style a gallary from an unordered list and the basic concept of showing/hiding information could be applied to create various other image or text roll-over effects.

via opencontent.org/oishii

Mobile CSS First Steps

Apr. 6, 05 • Simple Tips & How To0 comments

Mobile CSS First Steps is a brief introduction to an increasingly important segment of the web browsing market: those who access the internet through devices such as cell phones, PDAs and, hopefully sooner than later, PSPs. The first steps are mostly related to how content should be presented but specific styles are included in the write up as well as information on common mistakes to avoid when designing for the mobile audience.

Access Matters

Apr. 1, 05 • Simple Tips & How To0 comments

Access Matters is the Simple Quiz of accessibility. I am a big fan of the Simple Quiz format because it's a great way to generate discussion and nearly always new information is provided. Accessibility is a particularly good topic for the format because it's all too easy a topic to overlook and there's quite a bit of nuance.

Tabtastic CSS Tabs

Mar. 22, 05 • Simple Tips & How To0 comments

Rather than my usual mangled post write-up I thought I'd just post the description from the Tabtastic CSS Tabs resource itself:

"This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.

Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.

via simplebits

Nifty Corners: rounded corners without images

Mar. 16, 05 • Simple Tips & How To0 comments

Nifty Corners: rounded corners without images adds either a heap of mark-up or javascript but it DOES accomplish what it says -- and I can't tell you how much I loathe creating corner images so it's almost maybe worth looking into regardless. I like that the article explains the various choices that went into creating the effect with and without javascript, as well as pointing to the sources of inspiration that helped contribute to its existence.

via stylegala.com

A CSS styled calendar

Mar. 7, 05 • Simple Tips & How To0 comments

An excellent step-by-step guide to creating a very attractive CSS styled calendar is available at Veerle's blog. The simple tutorial gives you the styles you need, the images that polish the calendar's look and a very brief lesson on making table elements more accessible.

CSS & Media Types

Feb. 13, 05 • Simple Tips & How To0 comments

Websites aren't only viewed on a screen. Using CSS, you can attach more than one stylesheet to a document at a time. These CSS files can then be enabled based on how the document is being viewed. For example, you can format a page differently for when it is printed out.

CSS Image Map

Feb. 10, 05 • Simple Tips & How To0 comments

FrankManno.com has a really cool tutorial on creating a fancy CSS image map with attractive highlighting and notations. Essentially this effect is pulled off from a combo of other known effects like CSS Sprites, a method for positioning background images for :hover effects, and using display:none/display:block to show and hide the text elements.

For a CSS image map without highlighting, check out moryson.net's example, noted previously at the pile.

Quick Tips to Fix a CSS Bug

Feb. 9, 05 • Simple Tips & How To0 comments

Mike Rundle has an interesting discussion revolving around simple tips that help isolate, fix and avoid CSS bugs. Not quite as comprehensive as Dave Shea's excellent CSS Crib Sheet (mentioned previously on the pile) but with the capability for user-contributed comments, it looks like it's well on its way to getting there.

Creating accessible bar charts

Feb. 8, 05 • Simple Tips & How To0 comments

Standards-schmandards.com the makers of Fangs: The Screen Reader Emulator for Firefox has an interesting write-up on how to create accessible bar charts.

I think it's a pretty cool lesson on accessibility regardless of if you're creating a bar chart specifically or if you're working with some other table-related content.

How To Clear Floats Without Structural Markup

Jan. 24, 05 • Simple Tips & How To0 comments

Most solutions for containing floats within an outer, wrapper div problem rely on the addition of a div specifically created to clear the inner floated contents. Position is Everything has a way to contain floats without adding that non-semantic prop div. To learn how the effect is achieved, read: "How To Clear Floats Without Structural Markup".

min-height hack

Jan. 6, 05 • Simple Tips & How To0 comments

Another workaround to compensate for the lack of min-height support to add to your list. Unlike the previous min-height workaround mentioned in the pile, this version uses less CSS in exchange for more markup.

Basically it works by floating a div with a tiny width and a pixel height, then it uses a float clearing method to force that minimum pixel height. When the content expands beyond that point, the floating prop div's job is over.

I've been using this method since before reading this write-up but only when the design absolutely requires a min-height because with the added mark-up it isn't the most efficient thing in the world to use willy-nilly.

(Oh, and don't name your class .prop500px. You will regret having to change it all the time.)

via Mezzoblue dailies

456 Berea Street CSS Tips & Tricks Highlights

Dec. 22, 04 • Simple Tips & How To0 comments

An excellent run down highlights the best CSS-related articles created at 456 Berea Street over the past year. Articles that may have once gone unnoticed are given new life with links, a brief description, and, when applicable, links directly to demo's -- all on one page. Just another reminder of what a great resource 456 Berea Street is and the depth of the content available there.

Float Layouts

Dec. 11, 04 • Simple Tips & How To0 comments

Following up yesterday's thread on positioning, comes a solid write up on float layouts from autisticcuckoo.net. I've been using float layouts exclusively in the past three months (check out the latest artypapers redesign, for example) and this covers quite a bit of what I've learned through trial and error -- so save yourself that pain and read this instead. Good examples, good tips and a good way to move forward with your CSS skill-set if you haven't already.

via Stylegala news

Vertical Centering with CSS

Dec. 8, 04 • Simple Tips & How To0 comments

In my old table days, I'd slap valigns in cells left and right top and bottom. These days, post CSS conversion, I rarely vertically align anything; choosing instead to pad and float myself silly or ditch my original plans and create a different design.

No more, however, as I have two reasons to achieve vertical alignedness with CSS, one method from Jon Hicks and another from Dusan Janovsky. (A clever combo of the two would probably be better yet.)

min-height: fixed;

Nov. 15, 04 • Simple Tips & How To0 comments

An oldy but a goody from Mezzoblue.com: "After one too many times wistfully wishing I could scale fixed-size elements according to their content in a cross-browser friendly way, I did something about it. Presenting min-height, without the min-height."

CSS Image Map

Nov. 5, 04 • Simple Tips & How To0 comments

At least der CSS code is in english for how to create an image map with CSS using little more than an unordered list over at moryson.net. You're going to have to fill in some of the gaps that arise from the language barrier, but the overall concept is pretty straightforward. Anyone thinking about how they can push the design boundaries in CSS would be wise to take note of this technique.

via hicksdesign

The Underscore Hack

Nov. 3, 04 • Simple Tips & How To0 comments

Wellstyled.com has put together a quick write-up on how using an underscore preceding a property can be used to supply IE 5+ specific styles.

via the ever-tasty del.icio.us

Pure CSS Scrollable Table with Fixed Header

Oct. 26, 04 • Simple Tips & How To5 comments

When you are representing tabular data, use a table. When you are represent'n, use a "Pure CSS Scrollable Table with Fixed Header" like the one imaputz.com has been working on. This is an interesting use of the tbody, thead tags and some mad styling. For anyone worried about browser compatibility, there is also a bullet resistant version available.

via del.icio.us/tag/css

Scrolling Drop Shadows

Oct. 18, 04 • Simple Tips & How To4 comments

From the good folk at zooibaai.nl comes Scrolling Drop Shadows, a cut and dry example of how to get drop shadows that stick to the top and bottom of a browser window and allow the content of the page to scroll underneath the shadows. Of course this doesn't work for IE unless you invest in some .PNG trickery, but it's still a good example of commonly sought after CSS effects.

via jinabolton.com

Ten CSS tricks you may not know

Oct. 4, 04 • Simple Tips & How To0 comments

From the good people at evolt.org comes Ten CSS tricks you may not know. From image replacement and a box model hack alternative to CSS shorthand and vertically aligning with CSS -- these ten tricks cover a wide range of issues and provides information about making your styles that much more efficient: this is a must read.

The CSS and XHTML Lab

Jul. 2, 04 • Simple Tips & How To0 comments

Oh man, this is some really great stuff coming out of 456bereastreet.com, a whole collection of labs creating all types of commonly used, attractive design elements. From the site:

"This is a collection of experiments, methods, tips and tricks related to CSS and XHTML that may or may not come in handy some day. Some of these techniques are based on ideas of my own, others are based on techniques, tutorials, and ideas that I've come across on the web, on mailing lists, in books, and other places."

What are you waiting for?

Sliding Doors Meets CSS Sprites

Jun. 24, 04 • Simple Tips & How To0 comments

From the person who brought you Responsible CSS - Recycle your background images the sandbox at fiftyfoureleven.com is at it again with Sliding Doors Meets CSS Sprites. This time two popular tab techniques, Doug Bowman's Sliding Doors and Dave Shea's CSS Sprites, are merged to create a new effect that really is the best of both worlds.

This is an excellent example of creative problem solving, very cool.

'This text is DEAD CENTRE and stays there!'

Jun. 9, 04 • Simple Tips & How To0 comments

Ever wanted to position a fixed-size content box smack-dab in the middle of the window? Well, check out: DEAD CENTRE over at wpdfd.com. Keep this in mind when you're trying to center your elements vertically, too.

CSS How To's

Jun. 4, 04 • Simple Tips & How To0 comments

From the good people (person?) at intensivstation.ch/ who brought you Assorted Fancy CSS Layout Templates from days past, comes: CSS How To's. It's in English and it touches on almost every single topic I'd planned on presenting in a future hands-on lab I'm gonna lead (horrifying, I know). Each topic is digested with some associated additional information, like a bit on the box model hack, for example. Also, available at the bottom of each page are links to further articles. Most helpful.

Onion Skinned Drop Shadows: the truly extensible CSS-based drop shadow

May. 25, 04 • Simple Tips & How To0 comments

For anyone who can't decide which CSS drop shadow method to use, here's another option from A List Apart: Onion Skinned Drop Shadows. This technique uses a layering method, hence the 'onion' reference, to allow for expansion and contraction of whatever object the effect is applied to. Oh, and it's cross browser.

Stylish, accessible forms

May. 23, 04 • Simple Tips & How To0 comments

Stuffandnonsense.co.uk has put together some great information regarding creating stylish, accessible forms. The stuff & nonsense folks provide the XHTML & the CSS to help get you and your forms in tip-top shape. (Tip-top? )

You may remember the accessible forms from The Man in Blue, mentioned on the pile previously, and these are fairly similar but it's a good reminder to pay attention to those forms.

via [the constantly updated & informative be sure and bookmark this] dezwozhere.com/blog/

How to size text using ems

May. 18, 04 • Simple Tips & How To0 comments

Clagnut.com has a great tutorial: How to size text using ems. I experimented with this concept, using ems -- yes, I admit I'm a dirty px user -- but was unsuccessful because I didn't understand the relationship with setting the body font size to a percent first, this tutorial clears that up and provides example conversions from px to em. Whenever I find the time to do the ten million updates for the help pile I'd like to do, this will be at the top of the list.

via dezwozhere.com

CSS Minitabs Pull-Down Menus

May. 14, 04 • Simple Tips & How To0 comments

aplus.co.yu has taken mini-tabs to the next level by extending them into fly-out (drop down, hover, pull-down) menus. Unlike the previous pure CSS pull down menus mentioned earlier on the pile, these work in Win/IE (6, 5.5 & 5.0). To learn more about the effect, read the aplus thread on the topic. It gives a great, step-by-step explanation of the various elements that comprise the menu system.

Update: I recently stumbled upon {style:phreak;}'s version of a similar type of menu, unrelated to mini-tabs: CSS Only Branching Menu

Navigation Matrix aka Really, Truly Beautiful Tabs Created With a Single Image

May. 5, 04 • Simple Tips & How To0 comments

SuperfluousBanter.org does the CSS community a big favor by creating and explaining the process and styles behind the amazing Navigation Matrix. It reminds me of the CSS Sprites example Dave Shea created for A List Apart, in that all the magic occurs with a single image file. This method draws upon the pixy fast rollovers, no preload needed example.

Just when I was thinking of re-doing different parts of arty|papers, something like this comes along to breathe some life back into the project. This is terrific.

Commented Backslash MacIE5 CSS Hack

Apr. 28, 04 • Simple Tips & How To0 comments

A post at scriptygoddess.com reminded me of the commented backslash MacIE5 CSS hack. This hack picks up on the fact that MacIE incorrectly interprets the styles following a commented out section of CSS when a backslash is included in the comments.

The extra backslash in the comments, will essentially escape any styles that follow. To let MacIE back in on the action, simply create another commented section. You can see this hack used in a previous version of the arty|papers homepage (view css | view page).

In the scriptygoddess post, the import hack for MacIE was used add took care of that specific issue.

Mini Tabs with CSS

Apr. 21, 04 • Simple Tips & How To1 comment

More helpful (and attractive) examples from SimpleBits.com. Calling the CSS mini tabs "the UN-tab, tab", is probably the best way to describe them. The comments in the related thread indicate that some browser inconsistencies exist, but I had no problems in the handful of browsers I checked it in (including IE5/IE5.5/Win and Opera 7.21/Win -- and IE/5.2/Mac it works great -- the more I think about it, this is a great example of padding and margins too).

Float Tutorials: Step by Step

Mar. 29, 04 • Simple Tips & How To0 comments

Tame the illusive maddening madness that can sometimes occur when dealing with floats by learning all about them at Maxdesign.com.au's excellent Floatutorial. If you're a beginner and you're asking yourself, "what's a float?", well, you can find out that out there too. With a total of 9 different tutorials you can learn how to use the CSS float property for anything from image galleries to how floats can help with overall layout.

Accessible, Stylish Form Layouts

Mar. 23, 04 • Simple Tips & How To0 comments

The man in blue comes out with another exciting experiment. This time tackling the often overlooked web form he's created an accessible, attractive layout scheme. You can read the explanation of how he achieves the effects or you can jump right into the examples he's provided. Usually the man in blue is pretty good about making things cross-browser compatible, so be sure let him know in the comments and check back if your preferred browser doesn't work.

Accessible Tabs with CSS / Slideshow

Mar. 22, 04 • Simple Tips & How To0 comments

Dan Cederholm of SimpleBits.com fame has posted the slides from the panel he presented at this year's SXSW regarding building accessible tabs with CSS. This is a great way to create tabs on your site without the use of javascript and minimal mark-up.

via SimpleBits

CSS Conditional Comments IE/Win 5.0+

Mar. 16, 04 • Simple Tips & How To1 comment

After reading an article about the dangers of improper use of CSS hacks I stumbled upon the three proper uses of CSS hacks @ quirksmode.org. The third being the acceptable use of conditional comments in IE/Win 5.0+ to output different styles to different versions of IE.

A List Apart: "CSS Sprites: Image Slicing's Kiss of Death"

Mar. 5, 04 • Simple Tips & How To0 comments

Tired of slicing images to create before and after hover buttons? Spending too much time trying to get everything to align just right only to find out that you have to recreate one of the images because of a spelling error? Well, fret no more. Dave Shea's recent article at A List Apart explains in detail how to achieve that same effect for a series of buttons / icons / etc. using a single image and minimal CSS. Take a look at the final example, then at the single image used to create the effect. I'm tempted to create a website just to use this code, or maybe I'll update my homepage again, this is really cool.

CSS Navigation // Menus

Mar. 2, 04 • Simple Tips & How To0 comments

The Imposter is handing out some tips on creating your navigational elements with CSS. These examples show what's possible with a little CSS and some know-how. A great start for beginners to get used to styling HTML elements not traditionally thought as style-able, like this example unordered lists. Each example is available for download.

Containing Floats // Stretching to Fit

Feb. 28, 04 • Simple Tips & How To0 comments

I had this very problem of an outside bounding box not stretching to fit the image/element within when doing another project where I had a series of pictures that needed to be grouped with a specific description. My solution, which came about after too much time spent on the problem, was to float the image and then include <br clear="left" /> at the bottom of each image/text group, in this example of containing floats, they use a div to accomplish the same result.

Easy Shadow Box II // CSS Drop Shadow

Feb. 27, 04 • Simple Tips & How To0 comments

Another good example of how to create a drop shadow/shadow box effect is explained at A List Apart. This method expands on the previous shadow example by implementing an image for the shadow part of the effect and goes into detail about the what each part of the effect actually does.

Semantic Details Explored // Emphasis

Feb. 26, 04 • Simple Tips & How To0 comments

A SimpleQuiz at SimpleBits reminds us all that it's not just in how something is seen, but also in how it is written in the code. This SimpleQuiz explores the possibilities to display emphasized, bold and italic text while keeping inline with idea of semantic design. These quizzes help to illustrate the details of something many may take for granted and the comments provide many more interesting solutions and discussions.

Easy Shadow Box

Feb. 22, 04 • Simple Tips & How To0 comments

A handy shadow tip over at silverorange labs explains how to create a shadow effect with CSS. This really creates a nice effect and you can go even further by using an image as the background instead of a solid color. In all modern browsers (not IE/Win) you can also take advantage of the .png file format's ability to use semi-transparency -- for things like dynamic menus, it really creates an awesome result.

Center a table with CSS

Feb. 20, 04 • Simple Tips & How To1 comment

Some different techniques for centering tables (sometimes yer data needs a table - it's true). This is expecially useful when trying to style older markup in a redesign project, as I discovered recently. One method I'm particularly fond of applies a few simple attributes to the
table element like this:

table.center { width:70%; margin-left:15%; margin-right:15%; }

So, the width % + margin-left % + margin-right % always equal 100% and you're good to go with a simple centered table.  Very useful.

Box Model Hack // IE5.0 & 5.5 Windows

Feb. 19, 04 • Simple Tips & How To0 comments

Fundamental to creating a hack for your style guide is understanding the idea of overwriting styles for specific browsers by relying on well-known CSS parsing bugs that exist within those browsers. The Box Model Hack is a perfect example of this commonly implemented workaround with the example of a div's width in relation to the width of its borders.

Search the CSS Help Pile