Problem with an image

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.

 

JD,

I need the height to 'float' as in 100% of the cell that it is in... I hope that makes sense.

 

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.