I’ve noticed that sometimes the size of the browser window knocks the right column down to the bottom of the window instead of in the right column. In other words, some of you may see this
instead of this
This happens more on Internet Explorer than on other browsers (if you’re interested, 60% of MountainRunner’s readers use some version of IE, 30% use FireFox, and the remaining 10% includes Safari, Opera, Conqueror, Camino (?), and others). The problem must be with the resize code and is triggered only by a precise pixel width, but I’m not sure how to fix it. I’ve tried modifying the CSS, but what works in one browser doesn’t work in another, etc.
If you have any ideas, I’m all ears (or eyes). Give me your suggestions by commenting on this post or through email. Thanks and enjoy your weekend. I’ll be offline until Monday.
It’s been a while since I did web design, but I believe the problem is a result of a flaw in IE5 and IE6 with the “float” code. You might want to focus your search there.FWIW, it works great for me in both firefox and IE7
IE pre-7.0 is not standards-compliant and can expand blocks past a CSS-defined width. Primarily, this happens for one of two reasons:1. A wide image or perhaps even a long string of text or a long link will cause IE to expand the containing division. Regardless of the CSS width assigned, the new expanded division will be given a width which will encompass these wide elements.
2. Either padding or margin settings — can’t remember which — will be “added-to” the CSS-defined width. This means, you set “width:350px” but padding or margin of 4px, on both sides of the division for a total of 8px, actually causes the IE-rendered width to be 358px. (Standards-compliant browser work opposite with padding, so that padding in this example will be taken from 350 or included in that figure, maintaining the strict 350px width.)
Either way, the expansion of a division on a page where one element is floated beside another will cause one division to drop below the other.
Often when designing a page, everything will work fine IE, but some new added element will cause this problem. This usually means something added in the sidebar, since that’s where new things get added more often. So your right sidebar may have an element which is itself actually wider than the width defined for the sidebar as a whole. Even a few pixels difference can cause the whole thing to drop down, because the sidebar is automatically expanded in the way IE pre-7.0 does such things to accommodate the elements within divisions.
Actually, using the Web Developer add-on for Firefox — an absolute must-have for web designers, imo — to outline selected elements…it looks like your “.module-content” divisions in the right sidebar are too wide.Just like wide images, links, etc., any division given a width wider than the width of the containing division will cause IE to expand that containing divisions (e.g., the sidebar).
I should have mentioned a third way that IE can cause problems: bulleted lists. IE pre-7.0 has a funky way of rendering them, depending on whether the “list-style-position” for lists is set at “inside” or “outside.” This may or may not be causing problems for your site. I’d check the width of “.module-content” first.
Curtis, NPP, and offline contributors to the thread, thanks. I think I fixed it. The solution was cleaning up the CSS of the template I borrowed originally, as well as adjusting some padding, margins, and adding a 1% buffer. My total allocated width is 99%… I don’t know if that helped, but I’ve spent too much time to do regressive testing now. But Curtis, you got me looking at the html as well and I found some code faults there, which may have also contributed.Again thanks. Now I can sleep at night. 🙂