WordPress.org

Ready to get started?Download WordPress

Forums

Need some inspired help please... CSS and IE (26 posts)

  1. c0y0te
    Member
    Posted 8 years ago #

    Folks,

    As some of you already know I've spent some time recently working up and launching a 3 column theme for my site (http://www.avalon5.com)

    Problem is that some posts/articles don't quite display correctly in IE, where as others so. When displaying correctly the content is displayed between the two columns. When it's not correct, the content is displayed lower than the two columns (as if the content can't fit??)

    I've no idea why but I assume it's something to do with the CSS and an IE bug of some description (isn't it always?).

    Can some CSS guru please cast your eyes over my design/css/theme and let me know where I've gone wrong. These issues don't show in FF, only in IE. Thanks in advance.

    c0y0te

  2. moshu
    Member
    Posted 8 years ago #

    "some posts are OK, others are not"... this is not the best way to describe an issue. Give a link to a faulty post.

    After a quick overview I picked one post http://www.avalon5.com/index.php/archives/234 which has quite a big image, so I suspected it might be in the "not OK" category :) - and indeed.
    Check all those posts for the image size: FF makes them "shrink" to fit, but IE doesn't. The width of an image + paddings + borders + margins = cannot be bigger than the width of its container div.
    Resize the image and check if it works.

  3. c0y0te
    Member
    Posted 8 years ago #

    Is there any way to force this? I've got over 200+ posts on my site, most of em with images. It could take me a while to go through all those looking for dodgy image sizes.

  4. vkaryl
    Member
    Posted 8 years ago #

    If you have an overall img selector in your css, you could set width and height in percentages in the declarations - which *might* work. It's occasionally wonky.... more so in IE than in FF.

    If you don't have an overall img selector, you can add one with the above declarations (and probably border:0; as well). Same caveat applies....

  5. c0y0te
    Member
    Posted 8 years ago #

    Vkaryl - I'm a complete idiot with CSS, pure trial and error stuff.

    Any chance you could drop some code as an example for me please? Thanks in advance.

    c0y0te

  6. jwurster
    Member
    Posted 8 years ago #

    That post displays for me fine in IE. Have you fixed your problem? If not, put another post which is displaying incorrectly for you.

  7. c0y0te
    Member
    Posted 8 years ago #

    http://www.avalon5.com/index.php/archives/188

    It displays the post down the page after the sidebars when you click into it, instead of between the sidebars.

  8. jwurster
    Member
    Posted 8 years ago #

    I recall having a similar problem. It occurred with an image in my left sidebar. After I resized it smaller, the posts fit. I'm sure there is a better way to do this in CSS, but I'm not that good at CSS, yet, either. Perhaps someone can help us fix this correctly.

  9. c0y0te
    Member
    Posted 8 years ago #

    Anyone out there know how to help us with this issue?

  10. aesop
    Member
    Posted 8 years ago #

    The long way around is your safest bet: re-size the images to the exact size, /and/ provide that size in the markup as well.

    The alternative that has been proposed to size the images in the CSS is faulty and bug prone. And attempting to re-size them only in the markup is a similar waste of time.

  11. vkaryl
    Member
    Posted 8 years ago #

    Hmmm. Yeah, David, I'm pretty sure that was what I posted above....

  12. c0y0te
    Member
    Posted 8 years ago #

    Regarding this...

    The long way around is your safest bet: re-size the images to the exact size, /and/ provide that size in the markup as well.

    Not trying to be smartass folks.. but can someone give me this in english? resize to exactly what size? how do I provide size in markup?

    Possibly show me some code or examples please? Honestly - I'm happy to go try these suggestions, but I just don't understand what it is you are suggesting I go do.

    confused!

  13. vkaryl
    Member
    Posted 8 years ago #

    c0y0te: what he meant by that is to in each pic in your posts use something similar to the following:

    <img src="path to image" width="150px" height="60px">

    Hope that's a little less obfuscated.

  14. c0y0te
    Member
    Posted 8 years ago #

    Thank you - I'll try that with the dodgy posts as an example and see if it works.

  15. vkaryl
    Member
    Posted 8 years ago #

    Good luck, and let us know how it goes, please!

  16. c0y0te
    Member
    Posted 8 years ago #

    Tried that approach on the following post:-

    http://www.avalon5.com/index.php/archives/188

    Unfortunately it didn't seem to make any difference. Still open to suggestions folks. Thanks for any help you can offer.

    c0y0te

  17. vkaryl
    Member
    Posted 8 years ago #

    Well, my guess is that you'll have to make your in-post pics no wider than 154px (the widest of the ones on your index page), whereas the one in the linked example there is 158px wide.

    The other option would be to reduce the center column (div id="content", that is) width a percentage point or so, until IE stops choking. Hmmm. I see that you're using px dimensions instead of percentages, so you'd have to drop the 590px to 580px maybe.

    This is one of those "tweak 'til you drop from frustration" situations.... 3 column themes are right bitches.

  18. c0y0te
    Member
    Posted 8 years ago #

    right so - I might as well wait for the weekend to try that stuff as I'm thinking there will be lots and lots of trial and error.

    Thanks for the advice.

  19. vkaryl
    Member
    Posted 8 years ago #

    Well, yes, generally you need some uninterrupted blocks of time (so that when your spouse finds you beating your head against a wall you will have the time to explain, among other things....)

    When you get back into it, feel free to post back here, we'll try to help.

  20. Sam_a
    Member
    Posted 8 years ago #

    Try

    .storycontent{
    overflow-x: hidden;
    }

  21. c0y0te
    Member
    Posted 8 years ago #

    Sam_a - will do. I'll try it this evening when I get in from work. Thanks.

  22. c0y0te
    Member
    Posted 8 years ago #

    Sam-a: Unfortunately that made no difference. Still have the problem.

  23. moshu
    Member
    Posted 8 years ago #

    coyote, I am afraid, there no simple solution for that, otherwise it would have been widely publicized. IE works just like that: you have to manually re-size the images before uploading.
    Of course, you can define the width and height in the img tag, too; it will reduce the size of the appearence but not the file size, though. I know, the file size is irrelevant in this case... just a reminder :)

  24. Sam_a
    Member
    Posted 8 years ago #

    Try

    #content, .post, .storycontent{
    overflow-x: hidden;
    }

    You also get this problem on the post with the airplane (http://www.avalon5.com/index.php/archives/188)? That image doesn't look big enough to break the float.

  25. c0y0te
    Member
    Posted 8 years ago #

    Sam_a - you are a friggin' Genius:)

    Thank you so much for that code - it seems to have fixed it all up. Really - thanks!!!!!

    c0y0te

  26. jimmiles
    Member
    Posted 8 years ago #

    Helped me too, Sam!
    Grateful,
    jim

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags