I wonder how I can use <div> instead of <table> tag to get the same result. Ideally I’d like to use the image as a background image because the icon is used many times per page so calling it from a background image reduces the number of http requests.
Yes, much better! I actually didn’t notice that you wanted a background image until the last minute, and just replaced the image element with a background image when I re-read your first post. I should have started from scratch and seen that the solution was much simpler with a background image. Thanks rainner.
Ideally, though, if you are going to use this setup multiple times, it’s better to pull out the inline CSS and just apply the styles via a class. I’m sure the inline styles were just for demo purposes.
I’m sure the inline styles were just for demo purposes.
If you are using different icons, it might be better to place the images in the HTML anyway. In your original post, it sounded like it was the same image being used over and over. It would probably be easier to make calculations with JS if the image is in the HTML.
Ok, no offense guys, but I REALLY have to laugh at the responses so far… Now, I’m just guessing, but shouldn’t this be a HEADING tag as it looks like something that goes BEFORE some content? (or is it a single list item without the content?)
Either way, DIV is the wrong tag for the job as is table.
Or whatever the appropriate SEMANTIC outer tag would be (H3? H4? LI?) – I mean, these look like content and/or headings.
O well, you should thank us then. Laughter is healthy.
Hmm, your code doesn’t quite sit as the OP requested (everything sitting right for me). But anyhow, the OP has started another thread asking for the left padding to be dynamically set, depending on the width of the image. For me, that means it would be better to have the image in the HTML. What do you think? Do you know enough JS to show how to do that?
Actually I’m developing a commenting widget in which the user can customize the comment icon. Since the comment icon might be wider/narrower than the fixed padding-left I use in the embed code, the padding-left value needs to be flexible and change dynamically based on the image width.