Banner in block makes forum too wide

[Resident Geek]

Ok. Here's the run down folks. I have placed a banner inside of an HTML Block that displays a banner for the forum only. I am using a percentage to scale the image consistantly. In Firefox/Mozilla, everything looks great. This is because Mozilla scales the images first. Before the rest of the page if I'm not mistaken.
In IE however, the banner is sometimes a huge stretched out image, and other times, the banner looks fine, except that it pushes the right side of the forum off of the screen, making it very difficult to navigate. I believe that this is because IE scales the image after inserting the images, page, etc...
Is there a way, using CSS if necessary, to FORCE IE to scale the image properly?
The web page is HERE

I really need this fixed, because nothing spells n00b better than saying, "Viewed best inside Mozilla Firefox" 

[Resident Geek]

Just thought to clarify something. When I say I'm using percentages, I'm saying, that I'm telling the image to have a width of 100%. This is to make it always stretch across the width of the center block above the forum. Since SMF/TP scales the blocks automatically, it Should scale the banner correctly... But it's not...

[Zetan]

this might be a silly suggestion.. Can you not resize the actual banner itself rather than have the HTML do it?

[Nokonium]

A tip from my HTML book

Don't use the WIDTH and HEIGHT extensions (of image tags) to reduce the image size. Instead create a smaller image. It will load faster and look better.

If you add the image size to the image tags i.e. <img src="image.jpg" width=600 height=75> it will tell the browser the image size and the browser will not have to calculate it, this makes it display faster.

[Resident Geek]

I want it to scale automatically so that even small screens can view the entire forum. I am using the image tags already. It is set as follows:
<img="source.ext" width=100% height=80>
This creates an image that always fills the width of the block, and will scale both up and down to fit all screen resolutions. I can't have my forum only accessible to people with high screen resolutions, and I don't want to eliminate the banner either.
If I put a set image size, then it's only going to be that size, and it won't be scalable.

[Nokonium]

I looked at your site but either guests cannot see the block or you have removed it. Without being able to see the image it is difficult to work on.

You could try giving the image an ID

Code Select Expand

<img id="banner" src="image.jpg">

and add the sizing to style.css

Code Select Expand

#banner
{
   height: 80px;
   width: 100%;
}

[knat]

I really need this fixed, because nothing spells n00b better than saying, "Viewed best inside Mozilla Firefox" 

LoL that was a good one 

I agree that resizing the image yourself is a far better solution.. i dont think it will change anything to use css.. IE will still have to calculate, and it wont do so before its finished with more important things.. like downloading some avatar from imageshack wich takes forever... so simply just make you banner small enough to fit even small resolutions 

[Ianedres]

You could try giving the image an ID

Code Select Expand

<img id="banner" src="image.jpg">

and add the sizing to style.css

Code Select Expand

#banner
{
   height: 80px;
   width: 100%;
}

That looks like a viable solution to me- if the static height @ 80px doesn't destroy the appearance of the banner at 800 or greater.

Another option (in greater detail) would be to get the browser screen resolution (via Java using a script from DynamicDrive.com or similar) and select a banner based on the common screen widths. Probably out of scope of what it is worth versus 'right now' in that you would have to move to a script or php box. Just my $.02.

[Resident Geek]

OK. Thanx anyways! I go ahead and try the CSS (I don't think it'll do anything different though) and if that doesn't work, then I'll just give it a defined size. Thanx for the help!