Support Forum Topic: crop image and display inline

Support Forum Topic: crop image and display inline http://support.westciv.com/ Support Forum Topic: crop image and display inline en Fri, 10 Sep 2010 13:37:21 +0000 gt2304b on "crop image and display inline" http://support.westciv.com/topic/crop-image-and-display-inline#post-973 Tue, 25 Sep 2007 17:39:51 +0000 gt2304b 973@http://support.westciv.com/ I guess the ONLY html element that can be displayed inline AND you can set the width and height is the img element... =( That is a nifty workaround with the transparent gif, but I guess this is one example of how CSS is still lacking in allowing you to separate content and presentation. Thanks for the reply. Cary on "crop image and display inline" http://support.westciv.com/topic/crop-image-and-display-inline#post-972 Tue, 25 Sep 2007 07:19:43 +0000 Cary 972@http://support.westciv.com/ I couldn't come up with any way of making this work in IE short of using a transparent gif with a background image. Also, this will still allow you to use alt text if you need it. <code><img class=\"cropicon\" src=\"blank.gif\" width=\"14\" height=\"14\" alt=\"\"></code> <pre><code>img.cropicon { background: url(croppicture.gif) no-repeat 0 0; }</code></pre> gt2304b on "crop image and display inline" http://support.westciv.com/topic/crop-image-and-display-inline#post-971 Mon, 24 Sep 2007 22:54:49 +0000 gt2304b 971@http://support.westciv.com/ 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: <code><table><tr><td><div></div></td></tr></table></code> I was able to get close to what I want by doing this: (html:) <code></code> (css:) <pre><code>span.crop-icon { padding:0 14px 0 0; font-size:14px; background: transparent url(croppicture.gif) no-repeat top left scroll; }</code></pre> 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?!?