Hide those ugly lines with new and improved overflow:hidden!

Ok, so let’s say you’re doing image replacement on an unordered list. Since we’re all good boys and girls here, we include the actual text inside the link tag and spin it off the left of the screen with text-indent. Well if you’re a Firefox user (or test with it), then you may recall seeing the border generated around the navigation and going off the left of the screen (see below).


It’s one of those things that I never really thought much about. But last week a co-worker of mine showed me a really simple way of getting rid of those lines. Enter “overflow: hidden”.

For those of you using Firefox, I have two examples below. The first is without the overflow attribute, the second is with.

Without overflow:hidden

With overflow:hidden

Special thanks to Chaz for the tip.