CSS: Two-element "table" aligned nicely

Question

Hi

This is a somewhat open-ended question, but I really want to understand this one so I don't care.

I have a two-element "table" (CSS with spans). The left column always has an icon which is 20x20 pixels. The second column has a single line of text associated with the icon.

I have gone through all sorts of ideas I could come up with to make this look exactly the same in IE6-8, Firefox 3.5 and Google Chrome, but all ideas result in the text being one or two pixels off at best.

I'm looking for a fool-proof non-<table> way to make this list look exactly the same in all browsers. I mean every single pixel.

Answer 1

Yes...

Render an image ;)

(Sorry, but if you want it really "pixle perfect", then this is most likely the easiest way)

Answer 2

You are chasing a moving target. With so many broswers and so many versions there will most likely never be a way to make it perfect. Then even if you do get it close to perfect the next release of any of the browsers may break it again.

Answer 3

Pixel perfect doesn't exist - you simply don't have that kind of control over the range of browsers out there, and nor is it profitable for you to attempt to make it so. Diminishing returns, thy name is IE6.

Fwiw, it also sounds likely that you would do better here to simply have a list (<ul>) with list-style-type set to none and using background images to display your 20x20 icons.

Answer 4

Here's my question: if it's really a table, why not use <table> ? It's one thing to avoid using tables for purposes of general page layout, but the table tag is still perfectly legitimate for, well, displaying tables.

If that doesn't work for you, consider a <ul> modification or similar. It's unlikely, though, that you'll ever get it truely pixel-perfect in all browsers.

Answer 5

I agree with Tony and annakata. However, usually the best result comes from something simple like this:

<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span>

Which at least looks exactly the same in webkit, ie8 and firefox. (I believe ie7 too, but I didn't test)

Answer 6

I'm sory for this huge edit I didn't read the question properly. As some have already said it's very hard to achieve pixelperfection on a website as every browser render the pages differently. With css you can use absolut and relative positioning of basically anything but its far from perfect when it comes to cross browser compatibility.