max-width: in CSS

[Arrow]

Could I use the max-width: tag in my CSS to constrain the size of posted images? Is so, how would I do it?

Edit:
I've discovered that adding img { max-width: 98%; } to my CSS works great in Firefox but causes problems in Internet Explorer. In Internet Explorer all of the forum images (such as the folder icons, menus icons  and avatars) become distorted and the layout is squashed up in places.
What is the correct tag to add to img { max-width: 98%; } to make it only resize images that have been posted by forum members please?

[Harvey]

I never imagined that could be done in CSS. That would be great.

You are looking for a way to eliminate "scrollbars" without having to educate users I assume?

That would be fantastic.

[Harvey]

AHA! I think I figured it out.

Would REALLY appreciate you telling me whether this works in IE or not:

.nabble .message-text img {
max-width:750px;
height: auto;
}

Our forum is about 755 pixels wide (I think) in CLASSIC so I went with a pixel measurement instead of a percentage.

I REALLY hope this is the answer!

[Arrow]

Hi Harvey, thank you for your assistance.
I've modified you code a little bit so that the images will resize depending on the viewer's screen resolution. This is working for me in the latest versions of Firefox and Internet Explorer.
I''ve added the margin-bottom line because one of my users sometimes forgets to leave line spaces when posting multiple images.
Is the height: auto; line needed, it's working OK on mine without it?

.nabble .message-text img {
  max-width: 100%;
  margin-bottom: 5px;
}

[Harvey]

Arrow wrote

Hi Harvey, thank you for your assistance.
I've modified you code a little bit so that the images will resize depending on the viewer's screen resolution. This is working for me in the latest versions of Firefox and Internet Explorer.
I''ve added the margin-bottom line because one of my users sometimes forgets to leave line spaces when posting multiple images.
Is the height: auto; line needed, it's working OK on mine without it?

.nabble .message-text img {
  max-width: 100%;
  margin-bottom: 5px;
}

That is sooo coool!  I added both top and bottom margins because I get people doing that all the time too.

The max width % may actually be better because if someone "quotes" an image the space is narrower.

So you don't need the height: auto?

[Arrow]

I'm no coder so I can't say if the height: auto; line is supposed to be there. All I can say is that it is working for me without it :-D
I hadn't considered the quoting scenario but yes, a % should work well there. I shall test it out.

[Harvey]

One of my forum members who uses IE told me that when I used the percentage the quoted pictures were all smushed.

Looks like the pixel measurement is the way to go.

[Arrow]

Same problem here. I've been trying to fix it but as yet I can't. I think it has something to do with "quote-message" and/or "blockquote".

[Harvey]

If you've got IE can you look at this quoted pic and tell me if it is smushed:

http://forum.nyskiblog.com/The-Lake-Effect-Thread-tp1027323p1079595.html

[Arrow]

I've tested in IE with and without Compatibility Mode and it looks fine :)

[Harvey]

Arrow wrote

I've tested in IE with and without Compatibility Mode and it looks fine :)

I dont exactly understand what compatibility mode is but it seems that if you specific the width in pixels and not a percentage the quoted images are ok in IE.

Can you specify it that way?

[Arrow]

I can specify it that way but I'd rather use a percentage if I can work it out. Some of my members use large screen resolutions so it would be nice if they could see images at the size that they were posted instead of a smaller fixed size.

[Harvey]

Got it.

For us the forum is embedded in a frame and anything wider than 750px gets a scroll bar so I can set a fixed width.

[arrow]

CONTENTS DELETED

The author has deleted this message.