Resizing image

[Slimsteve]

Simple layout question really, I have got an image which I am using as an orange background, I need it to stretch when the text is resized for accesiblity reasons.

The following works in Firefox, but it does not seem to work in IE, does anyone know if it is possible to get it work like that in IE.

HTML Code:
<IMG class="orange" SRC="templates/bbbshow/images/orangebox.gif" />

Styelsheet code:
img.orange {height:24em; width:374px;}

Thanks

 

[BabyJeffy]

Wrap the IMG in a <div class="orange"> and remove the class="orange" from your image. By default the DIV is 100% the width of it's parent container. You can add text-align:center to the DIV as well... all depends on the layout I guess.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[rpgfan3233]

Wouldn't you have to remove the IMG completely, BabyJeffy? The SRC would still be there, meaning it would be the image's height and width.

You would have to remove the IMG completely and move the class="orange" to a DIV as mentioned by BabyJeffy.

 

[BabyJeffy]

Now I read the OP again that's what I'd have said rpgfan.

Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[ChrisHunt]

Well, slimsteve, it looks like your code should work. I've just tried this in IE6 and it works for me:

<img src="test.gif" style="height:10em;width:10em;" />

Maybe there's something else in your CSS or HTML that's queering the pitch - have you tried validating them?

What does orangebox.gif look like? There are usually better ways of making a background image that resizes to accommodate content than this approach. Can you give us a link to the page in question?



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Slimsteve]

After some more investigation I found that there was other elements in the stylesheet which was causing this problem.

In future if I am having problems with CSS I will be testing only the concerned code on its own in a new page to make sure it works, before tackling issues in the real page.

Thanks for your help.

Slim