Image vs Column Width

0bvious

My vanilla forum is set up so the post area is no wider than 500px or so. This causes problems when images wider than this are posted, pushing the whole design of the page off kilter. I have to manually edit each post like this and add a width="450px" line to the image code.

Is there any way to do this automatically? or anyway to have images scale to vanilla rather than the other way around? (I am not yet a V1 upgrader, so any hints here will have to be compatiable both ways)

Thanks a lot

Bergamot

You can make the CommentBody div scroll horizontally on overflow by setting overflow:auto;

a_magical_me

You can use CSS to restrain the width of images within the comment body with something like
.CommentBody img { max-width: 450px; height: auto; }

Jazzman

or:
.CommentBody { overflow: hidden }

0bvious

cheers.... learning css as i go along ;)

0bvious

just tried several options, including adding the code above to the main .body section of the css, none of i worked. the best I managed was to get the image to be hidden off the side of the main body, not just the comments section.... here's how it looks: http://www.huge-entity.com/forum/comments.php?DiscussionID=107&page=1#Comment_919 any ideas?

WallPhone

I think you ment to use a comma to get the code block restricted, otherwise, it would apply to images inside the code block:

.Comment img, .Comment code {
   max-width: 450px;
   height: auto;
}

0bvious

I think I figured out the problem..... IE

The 'max-width' function doesn't work in internet explorer (my forum looks great now in FireFox)

I found this code, advised specifically for IE:

width:expression(document.body.clientWidth > 445? "445px": "auto" );

But all it does is set EVERY image to 445px wide.

How can I get around all this IE nonsense?

Bergamot

I don't believe there's any way to do this in pure CSS. You can try a javascript solution, or a server-side solution (not recommended)

0bvious

OK, I found a better version of that long line of code I pasted above. Here is how it looks in my CSS now: .Comment img, .Comment code { max-width: 445px; height: auto; width: expression(Math.min(document.body.clientWidth, this.width) > 445 ? "445px": Math.min(document.body.clientWidth, this.width)); } The images are being resized now, even in IE, but the body of the forum is still shifting out of place as thought the image were the original large size. I have tried throwing a few overflow instructions into the works with no result. What am I missing? Is it definitely not possible? Thanks again

a_magical_me

It looks fine to me in SeaMonkey, but in IE the image shrinks down to ~28 pixels.

0bvious

Wow... I just logged into a different computer and got the same result. What the hell is going on here?

WallPhone

I wonder if some code could be borrowed from one of those lightbox gallery scripts. The idea being the image is a thumbnail then blows to full size when hovered.

Bergamot

Well it's really easy to do in javascript. Just loop through the image elements on the page, and if one has an offsetWidth bigger than 500px, resize it.

0bvious

I have even less knowledge of Java than I do of CSS... Any sites dealing with this? cheers

lech

I think I tossed a rule into both the dirt and sky themes which handled this pretty well, mainly to do with height on image and code blocks, if you do a quick search you should be able to find and copy it.

0bvious

I looked through the sky CSS I have and couldn't find exactly what you mean. Is this a newer version of the CSS? Does it work in IE aswell as firefox? Cheers

lech

Ok, apparently I thought I did, but I didn't, instead I just stuck it on the code block, my appologies. And come to think of it, I did try to do this before without much luck so I let it slide (due to IE being generally nasty), sorry :/

a_magical_me

I think I have a solution. Use this width for the images:
width: expression(Math.min(this.width, 445));
IE also seems to require one more change. Go to around line 269 and change
background: url('[snip]/kubrickbgwide.jpg') repeat-y center;
to
background: url('[snip]/kubrickbgwide.jpg') repeat-y top left;

0bvious

Thanks a lot for that.... It worked! I will never sing the praises of IE ever again Thanks for all your help

lech

Now, let's convince the remaining 80+% of the population still under the thumbs of IE and why it's EVIL.