Grow your CSS skills. Land your dream job.

Links of Interest

Published by Chris Coyier

Faux Absolute Positioning

Always interesting to see new techniques for layout.

With faux absolute positioning, we can align every item to a predefined position on the grid (as with absolute positioning) but items still affect the normal flow and—thanks to clear—have many of the same advantages as normal-flow elements. Every row in the grid will always have height dependent on the content...

Another advantage of the technique is that it mitigates much of the fragility of floats. When the content of a floated box is wider than the box itself, it pushes the next box to the right (and by consequence, the box often drops down). With faux absolute positioning, the box to the right stays in place, no matter what.

 

Dropdown Menu: Start with CSS, Improve with jQuery

When it comes to drop-down menus, there are two techniques: CSS and Javascript. I personally tend to take the javascript route, just because there is more you can do functionally that can't be done with CSS alone. Stuff like delays and animations... However, to stay true to the web designers mantra of keeping design separate from content separate from functionality, we should ideally make the menu work with javascript turned off. The best way to handle this is to create your drop-down menu with CSS-only, then just javascript to enhance the functionality.

 

Testing Firefox 3 AND Firefox 2

With an über-standards-compliant browser like Firefox, you shouldn't have to be too worried about your pages borking with a new version. But... of course there will be some quirks. There were actually quite a few things I needed to adjust on some client sites to get things looking right in both FF2 and FF3.
portable apps.

On a Mac? Try MultiFirefox.

On a PC? Try PortableApps.

 

Kotatsu

Need some quick HTML markup for a table? Try Kotatsu. Just click some buttons adding as many rows and columns as you need, and apply classes as needed, and generate the HTML. Nice little time-saver tool!

Comments

  1. Permalink to comment#

    The faux column technique looks great, can’t wait to have a second to try it out.

    and thank you so much for posting that firefox link

  2. Hey – not related to this post at all, but what font do you use in the header of CSS tricks? its so bold and in your face – i love it!

  3. @Niki: “Agenda” — it’s a pretty nice full-family of fonts. Looks like MyFonts has it. It’s too friggin expensive if you ask me. Got it from a client on a job one time.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".