Hi all,
so I need to crop an image that is 14x28 and display it inline (in the middle of a paragraph). So here's the dilemma: to 'crop' an image, you have to constrain the container around the image (either as an img tag or as a background image) which means that the container must be a block element. (only way to specify width and height). But again, I would like to display this image in the middle of the paragraph.. something like this:
Doesn't this picture [14x14 cropped picture] look great?
In the interest of accessibility and just good html/css practices, I need the picture to remain cropped at 14x14 in the event the font-size is increased or decreased by the user.
The ONLY way I have been able to get the functionality that I want is to create a single cell table with display:inline that contains a div which crops my image. But this results in ugly, non-semantic markup: <table><tr><td><div></div></td></tr></table>
I was able to get close to what I want by doing this:
(html:)
<span class=\\\"crop-icon\\\"></span>
(css:)
span.crop-icon {
padding:0 14px 0 0;
font-size:14px;
background: transparent url(croppicture.gif) no-repeat top left scroll;
}While this works in firefox, it doesn't work in IE7 -- not sure why... (In IE7, the background image is not displayed.. there is just an empty space where it should be. The really weird thing is that when I X-RAY the blank space, the whole (uncropped) image pops onto the screen and stays there until I do a refresh of the page.)
can anyone help?!?
