Six indispensable CSS tips and tricks I use on every project
After building Web sites for quite a few years, I have settled into a groove. Much of the XHTML and CSS that ends up in every project is recycled because it works so well on so many different levels. Without a doubt the following six tips and tricks are my favorite, and the most indispensable. None of these are of my own invention, but all have saved me weeks of development time.
Overclear
I call this technique overclear, and it is my preferred method for clearing floats. After using it on a couple of projects, I have never used another clearing technique. By declaring a width, and setting the overflow property to hidden on a parent div, child elements that are floated will no longer need a trailing element with the clear property. It is a mouthful to say, but not that hard to understand. There are probably a dozen other hacks to accomplish this same feat, but this one is the least destructive to the style sheet.
CSS:
.float_left {
float: left;
}
.overclear {
width: 100%;
overflow: hidden;
}
XHTML:
<div class="overclear"> <div class="float_left">1</div> <div class="float_left">2</div> <!-- <br style="clear: both;" /> « I'm not necessary anymore. --> </div> <p>This element is free and clear.</p>
The only con to this technique is that margins on a div with the overclear class will collapse. In order to put space between the parent div and the next sibling element you can use bottom padding, or, use a top margin on the sibling element.
Revised Image Replacement
It is necessary to provide a text equivalent when a design requires the use of graphic design elements and fonts that are not browser safe in order to display a heading. This helps primarily with SEO, but also assists screen readers. Dave Shea of mezzoblue does the best job of summarizing all the image replacement revisions that exist today. I accomplish this through the use of the text-indent property.
CSS:
h1 {
background: url(images/my_graphic_heading.gif) no-repeat;
text-indent: -9999px;
width: ###px;
height: ###px;
}
XHTML:
<h1>This Is a Very Important Heading.</h1>
Replace the width and height properties with the width and height of your graphical heading. The only con to this technique is that when a user browses with images turned off and CSS turned on, the text is indented beyond the viewable display of the screen. You can decide whether or not the tradeoff is worth it.
Floating Image Callout
When you want to float an image next to a text block without experiencing text wrap, you usually have to float the text as well, and then give both elements a width. This visual display is common in many designs, but can be accomplished with a little less effort and markup. This alternative is also fluid, and no widths are required. For lack of a better term, I call this a floating image callout. The min-height fast “hack” is by Dustin Diaz.
CSS:
div.outer {
min-height: 85px;
height: auto !important;
height: 85px;
}
div.inner {
padding: 0 0 10px 85px;
margin: -75px 0 0 0;
}
XHTML:
<div class="outer"> <img src="images/my_image_callout.gif" width="75" height="75" alt="Image Callout" /> <div class="inner"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras dolor lectus, adipiscing sed, cursus non, posuere sit amet, mi. Aliquam nunc orci, hendrerit eu, scelerisque id, accumsan at, ipsum. </div> </div>
The only con to this technique is the min-height hack. I have tried several other approaches (primarily with margins), but they fail miserably in Safari and Opera.
Absolutely Relative Positioning
This is definitely the simplest CSS tip because it involves a common misunderstanding of how the position property and accompanying absolute value works. Many beginners mistakenly believe that an absolutely positioned element is always positioned in relationship to the body of the page. This is not accurate. An absolutely positioned element is positioned in relationship to its containing block, or parent element. This might be the body element, depending upon your design requirements.
Essentially, if the parent element has a relative position, you can position another element absolutely anywhere within it, no matter where it exists in the page.
CSS:
div.outer {
position: relative;
width: 500px;
height: 500px;
}
div.inner {
position: absolute;
top: 25px;
left: 25px;
}
XHTML:
<div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> </div>
The only con to this technique is that whenever an element is positioned absolutely, it is removed from the flow of the page — even if it is positioned within another element other than the body itself. This trick works best with fixed width and height elements used only as graphic design compliments.
Image Sprites
This is by far the most innovative CSS tip I have ever come across. It completely eliminated the need for JavaScript image rollovers, and even cuts down on server request load. If you have never used image sprites, then I suggest you read up on the technique over at A List Apart. This was introduced by Dave Shea again. Search for the key terms “CSS Image Sprites”, and several other articles pop up elsewhere as well.
Sliding Doors
I am going to have to defer to A List Apart again on this one. Douglas Bowman gives an in-depth overview of the trick. There have been numerous iterations since the article was written way back in 2003, but the general concepts are the same. Every tabbed interface I use is some version of Sliding Doors, and the best part about it is that the tabs scale when the font size increases. No more fixed images, and image rollovers. Combined with image sprites, this is really the best thing to come out of CSS in a very, very long time.
Categories
- Announcements (36)
- Book Reviews (3)
- CSS (11)
- Humor (1)
- Illustrations (1)
- Information Architecture (2)
- Java (2)
- JavaScript (37)
- Link Farm (46)
- MySQL (2)
- PHP (3)
- Professional Growth (31)
- Short Stories (3)
- Technology (10)
- Web Development (44)
- Web Site Analysis (7)
- XHTML (2)
A day late and a dollar short... comments are closed.
Great post, all techniques I use on every project for sure.
I have been using the following method for having text next to floating images. I like it because you don’t need a wrapper around the text.
http://greg-wood.co.uk/blog/article/a-nice-little-css-positioning-technique
Comment by:
Dan Shields
Nice stuff! For the “Floating Image Callout”, the negative margin won’t work on IE.
@Dan, I’ve been looking for that article for a while, thanks!
Comment by:
5h4rk
Hey 5h4rk,
What version of IE were you testing on? I have Multiple IEs, but sometimes that standalone version of IE6 differs from the actual version.
Comment by:
Brian
@Brian, sorry, my mistake, your technique works beautifully. I thought IE doesn’t support negative margin but it turns out that it’s a bug only, http://haslayout.net/css/negmargin
Comment by:
5h4rk
@5h4rk
No problem. Thanks for taking the time to look into it further, and for clarifying with the link.
Comment by:
Brian
That overclear method is stellar - thanks so much for that. I’ve always hated using the extra “” method. Not that it matters, but any reason why you call it “overclear” instead of just “clear”?
Comment by:
Daniel
[...] Six Indispensible CSS Tips and Tricks I Use on Every Project (Brian Reindel) [...]
Comment by:
Dew Drop - November 24, 2008 | Alvin Ashcraft's Morning Dew
@Daniel
Looks like something got messed up between the quotes. Sorry about that — not sure what that says.
The name was just something I came up with on the fly… it clears using overflow… I’ll name it overclear :)
Comment by:
Brian
as for the Floating Image Callout, try this maybe:
div.outer {
overflow: hidden; zoom: 1;
}
div.outer img{
float: left;
}
div.inner {
overflow: hidden; zoom: 1;
}
Comment by:
gavin
If you find you are having trouble with negative margins on IE, then giving the DIVs “has layout” with either zoom, as Gavin pointed out, or a width, should do the trick.
Comment by:
Brian
Sorry - what got messed up between the quotes was
Comment by:
Daniel
ok… I give up!
Comment by:
Daniel
Very nice. Thanks!
Comment by:
Timothy
@Daniel
No problem — sorry it didn’t come across.
Comment by:
Brian
Overclear: I ridded extraneous tags from my code a long time ago, using a slightly modified approach to yours. You have to keep in mind that floats are treated differently than blocks but similar to other floats. My approach is to float nearly all the main containing blocks, and assigning width:100% when one needs to clear. For example,
<div id="body">
<div id="main-content">...</div>
<div id="side-content">...</div>
</div>
<div id="footer">...</div>
#main-content and #side-content are floated left and right respectively. #body is floated left, so that it contains both. To make #footer clear itself, then, is simple: float it left too, and then assign it 100% width. The benefit to this method is that the margins don’t collapse, either. So after you set it up like this, you can manipulate the box models in any way you like.
Image Replacement: This is always a thorny issue. Like you mentioned, with images turned off and CSS on, the text goes missing. The only way around this, if you care enough, is to add an empty into the mix. Put the empty span after your text, apply the image to the span instead of the parent, and use positioning to cover the text with the image. It adds garbage HTML code, but it does ensure that the text will always be there under any scenario.
Absolute/Relative Positioning: Slight correction here. Elements are not positioned relatively to their parent, but rather, their first ancestor that itself is absolutely or relatively positioned. If no containing block is absolutely or relatively positioned, then the element is positioned relatively to the body itself.
Comment by:
Chris Pratt
Good tips, glad to see them all in one post. I forget some of the little things sometimes.
The ‘overclear’ method is just crazy. I have been doing the same thing for about 6 months or so, where was this technique back in the day :).
Comment by:
Jason
There is a recent article explaining how to create the image sprites with more graphics than the David Shea one, might help some people understand better as well. Here - http://www.lightpostcreative.com/image-sprites-tutorial/
Comment by:
Alex
Nice techniques, its refreshing to see something written that isn’t a rehash of “format your CSS like this, use print style sheets!”
Regarding your float containing method, its also the primary one that I use. You don’t have to set a width, its only required to give IE6 hasLayout. You can get away with using zoom : 1; in an IE6 only stylesheet instead. This is great because sometimes you can’t set a width on that top level element (for example, you might have a padding or margin set in px, setting 100% will then break the page)
The other downside is if you need to place elements outside of that cleared float area. With the overflow : hidden it will just cut them off. To get around that I will sometimes use the clearfix hack (google it) this has the same behaviour as the overflow : hidden; but it allows elements to leave that float container div.
Comment by:
Samuel
@Chris Pratt,
Thanks for the clarification on the absolute/relative positioning. That one really trips up beginners, but once put to good use it can be very handy.
@Jason
It was the same thing for me with the IE double margin on floats bug fix. Just give your floated element a display value of inline, and you’re done. When I came across that one I was dumbfounded it was so easy.
Comment by:
Brian
@Brian
Totally, I have a love/hate relationship with the ‘dumbfounded it was so easy’ solutions sometimes.
Comment by:
Jason
[...] Shouldn’t defend an accused - he Explodes, She Doesn’t Back Off! (VIDEO) The Disappearing Male dâ??bug » Blog Archive » Six indispensable CSS tips and tricks I use on every project Today’s photo: India’s approach to Somali pirates Ajaxian » Meer Meer: Cross browser testing all [...]
Comment by:
[root@EGA]# » Blog Archive » links - 20081124
[...] Bookmarked a link on Delicious. d’bug » Blog Archive » Six indispensable CSS tips and tricks I use on every project [...]
Comment by:
LifeStream for 2008-11-24 | Brandon Corbins Head
Thanks for the great post, Brian!
I like the overflow:hidden trick, too, but as Samuel noted above, it has its own limitations. Sometimes you need elements within that containing element to bust out of the box, through either negative margins or absolute positioning.
About six months ago I started switching all my float clearing over to the “overclear” method, but lately I’ve been slowly switching back to the “clearfix” hack. However, taking a cue from Dave Shea, I’ve started naming the class “group” rather than “clearfix.” It seems a whole lot more semantic.
Comment by:
Karl Swedberg
When accessing the internet from a slow (e.g. mobile) connection, it’s not rare to turn off images, one of my mates pointed out. Hence instead of using the ‘Revised Image Replacement’ technique, you’d better choose ‘The Gilder/Levin method of image replacement’. [1]
[1] http://www.weon.co.uk/wp-content/uploaded/downloads/gilderlevin_demo.htm
Comment by:
slink
[...] d’bug » Blog Archive » Six indispensable CSS tips and tricks I use on every project (tags: webdev webdesign web tutorials tips tutorial resources programming tricks webdevelopment xhtml) [...]
Comment by:
links for 2008-11-26 | glenneo
[...] Six Indispensable CSS Tips and Tricks I Use On Every Project - d’bug [...]
Comment by:
This Month in Web Design: Best Links of November | Vandelay Website Design
[...] d’bug » Blog Archive » Six indispensable CSS tips and tricks I use on every project (tags: css tips hacks floats) [...]
Comment by:
links for 2008-11-29 :: User First Web
I’ve in fact been looking for alternative (and better) ways of doing some of these things with CSS, and here they all are. Thank you so much!
Comment by:
Zhuoshi
[...] [upmod] [downmod] d’bug » Blog Archive » Six indispensable CSS tips and tricks I use on every project (blog.reindel.com) 3 points posted 5 months, 3 weeks ago by jeethu tags webdesign tips tricks [...]
Comment by:
Tagz | "d’bug » Blog Archive » Six indispensable CSS tips and tricks I use on every project" | Comments