Curious layout problem - Gecko browsers only

Since I added the Indy Blogmeet graphic at the top of this column, at the bottom of the page I’m running out of scroll bar before I get to the end of the posts.  (If you’re seeing this too, I’d appreciate a report in the comments with OS and browser).  Otherwise, this is mostly addressed to mee.nu’s Man In Charge, so I’ve buried the gory details below the jump.


Dear Pixy,

Roberta X did a graphic for the October Indy Blogmeet that, at 450x235, is too big to go in the sidebar.  It does, however fit nicely at the top of the “posts” column.  (If today is October 26 or before, it’s there now.)

To put it there, I added image code (in red) to the INDEX-ENTRY template file:

[include Header]
[include Banner]

<div id="contents">

<!-- display code added 081021 -->
<img width="400" height="235" align="" src="http://oldgrouch.mee.nu/images/blogoctbig.JPG" alt="October Indy Blogmeet" style="border: medium groove; margin-top: 20px; margin-bottom: 5px; margin-left: 55px;" />

<div id="content1"><div class="content">

[posts:here]
[magic.pager]
[magic.stats]

</div></div> . . .

I had first tried putting the image before the “<div id="contents">” line, but found that the sidebar gets pulled down even with the beginning of the posts, and I didn’t want white all the way across the top of the page.  So I tried the code placed within the "contents" div.  That way the sidebar copy renders is in its normal spot, flush with the bottom of the top banner (at least in both browsers I tried).

What’s happening: With Gecko (Mozilla) rendering engine browsers^[1], at the bottom of the page the tail end of the last post, plus the pager and stats applet output text, are cut off.  This is a problem, because without the pager output the viewer can’t get to subsequent pages:

It appears the overflow equals the height of the graphic plus its margins.  The amount doesn’t seem to depend on the height of the posts.  While preparing this one I changed the above-the-break copy several times.  The cutoff always appeard at the same place with respect to the bottom of the page.

Here’s the fun: Internet Explorer 6.0.2900 (XP service pack 3) has no problem^[2]... it gets all the way to the bottom of the page.

(These screenshots were taken when this post was at the top of the column.  As others have been added, the cutoff point is now different.)

I’m not clever enough to look at the generated source and figure out what the applets/stylesheets are doing.

So, questions:

• Is there a better/more correct place (in the templates) to insert the graphic?
• Is there something in the applet code that generates page height information (which Internet Explorer ignores but Gecko doesn’t)?
• Have I uncovered another of those Stupid Browser Anomalies (IOW, “live with it”)?

Inquiring minds, and all that...

(Oh, and BTW Pixy, I’m still not seeing my active INCLUDE-BANNER file in my template list.)

Cheers,
O.G.

-----

Posted by: Old Grouch in Beta at 23:29:39 GMT | Comments (2) | Add Comment
Post contains 510 words, total size 5 kb.