Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Image vs Column Width

edited June 2006 in Vanilla 1.0 Help
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
«1

Comments

  • Options
    You can make the CommentBody div scroll horizontally on overflow by setting overflow:auto;
  • Options
    You can use CSS to restrain the width of images within the comment body with something like
    .CommentBody img { max-width: 450px; height: auto; }
  • Options
    or:
    .CommentBody { overflow: hidden }
  • Options
    cheers.... learning css as i go along ;)
  • Options
    edited June 2006
    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?
  • Options
    edited June 2006
    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;
    }
    
  • Options
    edited June 2006
    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?
  • Options
    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)
  • Options
    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
  • Options
    It looks fine to me in SeaMonkey, but in IE the image shrinks down to ~28 pixels.
  • Options
    Wow... I just logged into a different computer and got the same result. What the hell is going on here?
  • Options
    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.
  • Options
    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.
  • Options
    I have even less knowledge of Java than I do of CSS... Any sites dealing with this? cheers
  • Options
    lechlech Chicagoland
    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.
  • Options
    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
  • Options
    lechlech Chicagoland
    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 :/
  • Options
    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;
  • Options
    Thanks a lot for that.... It worked! I will never sing the praises of IE ever again Thanks for all your help
  • Options
    lechlech Chicagoland
    Now, let's convince the remaining 80+% of the population still under the thumbs of IE and why it's EVIL.
This discussion has been closed.