max-width: in CSS

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

max-width: in CSS

Arrow
This post was updated on .
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?
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

Harvey
In reply to this post by Arrow
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!
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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;
}
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

Arrow
This post was updated on .
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.
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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".
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

Arrow
I've tested in IE with and without Compatibility Mode and it looks fine :)
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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.
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

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.
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: max-width: in CSS

arrow
CONTENTS DELETED
The author has deleted this message.