I am trying to create a page with 4 of the same drop shadowstop, bottom, left and right. Now, as the content on the page extends down I want the left and right drop shadow images to extend and keep the page looking clean. I am running into a problem with IE where the image does not extend. It stays the original pixel height of the image itself, regardless if I make it 100% etc... I have tried using a class in css, and still no luck. I thought I should clarify... I can make this work by using background="images/theimage.jpg" with the <td > , but this is not supported by Netscape and thus will not validate.
I just tried these and both work fine in IE: <img src="my-image.gif" width="300" height="32"> <img src="my-image.gif" style="width: 300px; height: 32px"> J.D.
Tried these and they work too: <img src="my-image.gif" width="32" height="100%"> <img src="my-image.gif" style="width: 32px; height: 100%"> I'm thinking that may be the element that contains your images doesn't take up as much space as you think it does. Add "background-color: red" to this element to see how tall it really is. J.D.
The problem I continue to have JD is that FF will make the image fill the <td> height 100% where as IE will only extend as far as the image. Here is the url: www.frontierfireprotection.ca. I have used the background option as a quick fix. I threw that together quickly, so no laughing... The images are the two left and right drop shadows...
I must be missing something because this page appears the same in IE and FF to me. Anyway, since both browsers stretch images in the same way, I think that the problem you see is probably related to the image container. If you can put together a small test page that shows the problem, I could take a quick look at it tonight. J.D.