Tuesday, 21 October 2008


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">


</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:
screenshot with K-Meleon browser
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.
screenshot with Internet Explorer
(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.)


[1] At least mine.  I’m using K-Meleon 1.5.1

[2] Internet Explorer, however, does have a problem with the way it handles some of my transparent PNGs, but that’s a problem for another day!

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

1 That's a "roger", Old Grouch.

The last line I see is "You used to be a revolutionary."

Computer: IBM Thinkpad T20 (Pent. 3) with Ubuntu Linux 7.10 and Firefox

Posted by: Turk Turon at 10/22/08 00:55:57 (5D2q+)

2 Cuts off at exactly the same place here. Platform: Enpower (PC Club) Sabre (Pentium 4) with Windows XP SP3 and Safari 3.1.2.

Posted by: CGHill at 10/22/08 01:48:08 (1AVH4)

Hide Comments | Add Comment

Comments are disabled. Post is locked.
71kb generated in CPU 0.0478, elapsed 0.4373 seconds.
53 queries taking 0.4278 seconds, 210 records returned.
Powered by Minx 1.1.6c-pink.