Question

I have an anchor with a background. The anchors has text inside it. However, I do not want the text to display since the anchor has a background image and I want just the background image to display
By using the following CSS, I was able to get it accomplished but it only works in CSS3 browsers: http://jsfiddle.net/3SmmL/

By adding the display:inline-block; the element acts a block element but allows other divs to remain inline. Therefore the text-indent will work properly. (Since text-indent is not supported by inline elements)

However, in non-CSS3 supporting browsers, the inline-block property is not supported and therefore the whole anchor is indented by -999999px. If I use display:block; and set the width to 0, the anchors will look exactly like they do in the CSS3 version, but they will all appear on different lines (example: http://jsfiddle.net/3SmmL/1/) How can I get all those div to appear on the same without absolute positioning. I cannot modify the HTML code either.

Answer 1

Just add float: left to your second fiddle. That will align them the way you want.

http://jsfiddle.net/bnaegele/3SmmL/8/