Rescaling of Images inside DIV

[sinistapenguin]

Hi There

I have been working on a Joomla website for my company. I have a large image on the front page. I have used the following code to scale the image to fit the screen:

=========================================================
CSS:

#image_container {
width:90%;
height:90%;
border:3px double #999;
margin:2% auto;
}
#image_container img {
width:100%;
height:100%;
}
--------------------------------------------------------
HTML:

<div id="image_container">
<img src="/images/jephson/homepage/headers/banner.gif" alt="logo"/>
</div>

========================================================

Now, apparently this should scale the image to 100% of the DIV. Indeed it does in Firefox/ Seamonkey. However, when you open the page in IE it scales the image to its actual size and squashes the left menu & pushes the right one off the screen!!

If you want to see what I mean, the URL is:

http://jephson.orphanspress.co.uk

Open it in Firefox and IE to see the difference.

Anyone who can shed some light on this will be branded a hero in my eyes!!

Cheers

Sinista

 

[TheCandyman]

I think the problem is the percentage values. Try setting the image_container with

width:288px; height:112px

and see how it works instead of 90%

 

[TheCandyman]

Also, fix the errors

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

 

[sinistapenguin]

Thanks Candyman!

I will look into the errors - the original template was not my design, but I know I have loads to look at!

The problem with specifying px dimensions to the image is that if I limit the image size to say 500px then when I view the page in 800x600 screen res it looks fine with the image filling the top part of the screen. When I look at it in 1280*1024 I get a tiny image in the middle of a load of whitespace and it kind of ruins the effect of the site.

In firefox/ seamonkey the image scales up and fills the whitespace which looks great, but IE just screws it up!

Cheers though!

Sinista

 

[Olavxxx]

You can have some JS which changes the size, if browser is IE.

I know its a work-around, but.. hey it's IE

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster