Solve any CSS problem in 3 minutes (or less)
If you’ve spent any length of time building tableless web designs, you’ve probably come across some frustrating CSS problems. Sometimes floats don’t float right or links and images won’t line up. Internet Explorer offers its own brand of pain when it comes to CSS, with weird bugs like doubled float-margins and the ability to make entire sections of a layout disappear. It’s enough to make a good web designer run screaming for a print job.
Not to worry though. The next time a tableless layout causes you to bang your head on your keyboard, remember these two points: 1) it’s not your fault (well, maybe sometimes it’s your fault), and 2) there’s an easy way to get to the heart of any CSS problem, especially issues with layouts and positioning…
Put a border on it.
A temporary border is the key to solving your CSS problem in a flash. One pixel, solid, and red is my favorite (border: 1px solid red;). But don’t be afraid to use other colors. The more vibrant, the better.
The theory behind why the border property helps is simple. Tableless web design is all about boxes. In fact, every element in every layout is a box. They’re just hard to recognize sometimes. Margins, padding, block elements with auto widths, and a host of other invisible styles hide what’s really going on in a layout. The border property turns the “idea” of boxes into boxes you can see.
Here’s a simple example. Let’s say you create a horizontal navigation bar with an unordered list (<ul></ul>) and it’s supposed to have a background image tiled behind the buttons. When you look at the layout in your browser, however, you get something like the image on the left below. No background tile.
If you put a red border around the unordered list, you can see that the box has collapsed. All you’d need to do is set the height property for it and the background tile would appear.
Got an unexplained horizontal scrollbar in the browser window? Put a border on div and paragraph tags. You may find a width property you set, or forgot to set, that causes elements to expand beyond the window. (If I had a dime for every time that’s happened…) Testing cross-browser compatibility and can’t figure out why Internet Explorer refuses to cooperate? Put a border on the offending design elements to see how each browser renders them differently. Whatever the issue, borders can help.
CSS problem-solving is one of the hardest parts of tableless design. But you can cut the amount of time you spend on it through practice and a little help from the border property.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
4 Comments
Thanks for sharing :) awesome post.
Great tip thanks.
You can also use the “outline:” property just like you’d use the “border” property. However, outline will not add to the element’s width & height like border will. The only downside is that outline will not render in IE6.
Heme — That sounds good, but as far as I know the outline property is only supported by Opera and the latest versions of other browsers. And since Internet Explorer 6 is usually the reason you have CSS problems in the first place… :)