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
"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.
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.
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....
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
That post displays for me fine in IE. Have you fixed your problem? If not, put another post which is displaying incorrectly for you.
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.
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.
Anyone out there know how to help us with this issue?
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.
Hmmm. Yeah, David, I'm pretty sure that was what I posted above....
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!
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.
Thank you - I'll try that with the dodgy posts as an example and see if it works.
Good luck, and let us know how it goes, please!
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
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.
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.
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.
Try
.storycontent{
overflow-x: hidden;
}
Sam_a - will do. I'll try it this evening when I get in from work. Thanks.
Sam-a: Unfortunately that made no difference. Still have the problem.
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 :)
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.
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
jimmiles
Member
Posted 6 years ago #
Helped me too, Sam!
Grateful,
jim
vkaryl
aesop
Sam_a