Forum Moderators: not2easy
I'm a [very] old-school efficiency nut, so I'm using the ol' multiple-buttons-in-one-image trick to minimize the number of files loaded at startup.
So I've got, say, ten buttons worth of graphics in a single GIF image, and I'm breaking it up via CSS into ten actual buttons on the site.
Which means each button is a DIV with the appropriate portion of the GIF as it's background.
The problem is that these links only work as Javascript OnClick events, which in turn means they break the browser's "open in new tab" functions. Plus it's just not good standards compliance.
I know that DIVs cannot be nested in <a> tags. So what to do here? Anyone else run up against this and found a solution?
I just cannot bear to load dozens of separate image files when combining them into a single image is so efficient (and real text buttons/links aren't an option here).
A <div> is a generic block level element, so have you though about making your <a>s block level as well?
<div><a href="#"></a></div>a { display: block; width: 100%; background: url(my_image.png); }Technically we don’t need the width:100% by IE6 tends to fall over and froth unless you trigger hasLayout (but that’s a topic for another day).
That's a very intriguing idea. So crazy it just might work! And I didn't know you could make <a>s into block-level items.
I'll give this a shot :)
