CSS on Movable Type blog is killing me!

Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses templates.
The version that we are using (3.34) did not have a pagination system so
I Googled and found how to add the code manually. It works as far as the
pagination goes but it seems to have created a new problem. The section
with the links that should be at the top of the right side of the page
is fine in most of the blogs but on one, it is showing at the bottom of
the page. I haven't a clue why as everything is on the same templates.
It should 100% work or 100% be broken. Prior to adding the pagination
code, all blogs worked properly.

I have tried expanding the container and the beta (right side) div and
shrinking the alpha (left side) div but no good. I played around with
several other settings with no change.

I'm just about out of original ideas on what to change. Anyone have any
guidance for me?

The blog that's acting up is at
http://land.allears.net/blogs/michaelbachand/

It is an index page, not an individual entry. All the other blogs use
the same templates and they display perfectly. Links to several of the
good ones so you can see what it *should* look like:

http://land.allears.net/blogs/photoblog/
http://land.allears.net/blogs/allearsteam/
http://land.allears.net/blogs/mikescopa/

Thanks,
Jack

On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:

Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses templates.
The version that we are using (3.34) did not have a pagination system so
I Googled and found how to add the code manually. It works as far as the
pagination goes but it seems to have created a new problem. The section
with the links that should be at the top of the right side of the page
is fine in most of the blogs but on one, it is showing at the bottom of
the page. I haven't a clue why as everything is on the same templates.
It should 100% work or 100% be broken. Prior to adding the pagination
code, all blogs worked properly.

I have tried expanding the container and the beta (right side) div and
shrinking the alpha (left side) div but no good. I played around with
several other settings with no change.

I'm just about out of original ideas on what to change. Anyone have any
guidance for me?

The blog that's acting up is at
http://land.allears.net/blogs/michaelbachand/

It is an index page, not an individual entry. All the other blogs use
the same templates and they display perfectly. Links to several of the
good ones so you can see what it *should* look like:

http://land.allears.net/blogs/photoblog/
http://land.allears.net/blogs/allearsteam/
http://land.allears.net/blogs/mikescopa/

The problem is with the HTML not the CSS.

It looks like there's an extra </div> somewhere in all the stuff inside
#alpha that is closing off pagebody-inner prematurely, so beta is ending
up outside pagebody-inner altogether, and that's why its box goes below
it.

Alpha and beta are supposed to be siblings inside pagebody-inner, but
they aren't in the bad page.

Ben C wrote:

On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:
Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses templates.
The version that we are using (3.34) did not have a pagination system so
I Googled and found how to add the code manually. It works as far as the
pagination goes but it seems to have created a new problem. The section
with the links that should be at the top of the right side of the page
is fine in most of the blogs but on one, it is showing at the bottom of
the page. I haven't a clue why as everything is on the same templates.
It should 100% work or 100% be broken. Prior to adding the pagination
code, all blogs worked properly.

I have tried expanding the container and the beta (right side) div and
shrinking the alpha (left side) div but no good. I played around with
several other settings with no change.

I'm just about out of original ideas on what to change. Anyone have any
guidance for me?

The blog that's acting up is at
http://land.allears.net/blogs/michaelbachand/

It is an index page, not an individual entry. All the other blogs use
the same templates and they display perfectly. Links to several of the
good ones so you can see what it *should* look like:

http://land.allears.net/blogs/photoblog/
http://land.allears.net/blogs/allearsteam/
http://land.allears.net/blogs/mikescopa/

The problem is with the HTML not the CSS.

It looks like there's an extra </div> somewhere in all the stuff inside
#alpha that is closing off pagebody-inner prematurely, so beta is ending
up outside pagebody-inner altogether, and that's why its box goes below
it.

Alpha and beta are supposed to be siblings inside pagebody-inner, but
they aren't in the bad page.

I thought of a </div> mismatch and checked out each open and close. They
are all where they are supposed to be. I used Firebug to highlight the
divs and all the alpha and beta divs are showing the way they should be.
Besides, if what you suggest was the cause then all of the blogs would
be broken since they all work on the same templates and stylesheets.

Thanks for taking a look though, Ben. I do appreciate it.

Maybe I'll have to cross my fingers that dorayme or Els happens to take
a look at it. ;-)

JackM wrote:

Ben C wrote:
On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:
Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses
templates. The version that we are using (3.34) did not have a
pagination system so I Googled and found how to add the code
manually. It works as far as the pagination goes but it seems to have
created a new problem. The section with the links that should be at
the top of the right side of the page is fine in most of the blogs
but on one, it is showing at the bottom of the page. I haven't a clue
why as everything is on the same templates. It should 100% work or
100% be broken. Prior to adding the pagination code, all blogs worked
properly.

It looks like there's an extra </div> somewhere in all the stuff inside
#alpha that is closing off pagebody-inner prematurely, so beta is ending
up outside pagebody-inner altogether, and that's why its box goes below
it.

Alpha and beta are supposed to be siblings inside pagebody-inner, but
they aren't in the bad page.

I thought of a </div> mismatch and checked out each open and close. They
are all where they are supposed to be. I used Firebug to highlight the
divs and all the alpha and beta divs are showing the way they should be.
Besides, if what you suggest was the cause then all of the blogs would
be broken since they all work on the same templates and stylesheets.

Run the HTML validator on the page. There are errors, including a <div>
where it does not belong. This MAY be happening because the code
includes JavaScript in which special characters have not been properly
escaped, confusing the parser. You also have document.write calls,
which is not advisable with XHTML.

C A Upsdell wrote:

JackM wrote:
Ben C wrote:
On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:
Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses
templates. The version that we are using (3.34) did not have a
pagination system so I Googled and found how to add the code
manually. It works as far as the pagination goes but it seems to
have created a new problem. The section with the links that should
be at the top of the right side of the page is fine in most of the
blogs but on one, it is showing at the bottom of the page. I haven't
a clue why as everything is on the same templates. It should 100%
work or 100% be broken. Prior to adding the pagination code, all
blogs worked properly.

It looks like there's an extra </div> somewhere in all the stuff inside
#alpha that is closing off pagebody-inner prematurely, so beta is ending
up outside pagebody-inner altogether, and that's why its box goes below
it.

Alpha and beta are supposed to be siblings inside pagebody-inner, but
they aren't in the bad page.

I thought of a </div> mismatch and checked out each open and close.
They are all where they are supposed to be. I used Firebug to
highlight the divs and all the alpha and beta divs are showing the way
they should be. Besides, if what you suggest was the cause then all of
the blogs would be broken since they all work on the same templates
and stylesheets.

Run the HTML validator on the page. There are errors, including a <div
where it does not belong. This MAY be happening because the code
includes JavaScript in which special characters have not been properly
escaped, confusing the parser. You also have document.write calls,
which is not advisable with XHTML.

The javascript was in an ad program that was included on the page via
php include. I removed the php includes and function calls, then
validated the remaining items to complete validation. It still did not
fix the problem. :-( So I have returned the XHTML to the original to
see if anyone else can spot something.


--
My email address on the header is a non-monitored spam catching account.
I can be reached via http://www.wvnh.net/contact.htm


The dates for the next RADP Meet are December 4-7, 2009 for RADP-XIV
(http://meets.radp.org).

On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:

Ben C wrote:
On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:
Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses templates.
The version that we are using (3.34) did not have a pagination system so
I Googled and found how to add the code manually. It works as far as the
pagination goes but it seems to have created a new problem. The section
with the links that should be at the top of the right side of the page
is fine in most of the blogs but on one, it is showing at the bottom of
the page. I haven't a clue why as everything is on the same templates.
It should 100% work or 100% be broken. Prior to adding the pagination
code, all blogs worked properly.

I have tried expanding the container and the beta (right side) div and
shrinking the alpha (left side) div but no good. I played around with
several other settings with no change.

I'm just about out of original ideas on what to change. Anyone have any
guidance for me?

The blog that's acting up is at
http://land.allears.net/blogs/michaelbachand/

It is an index page, not an individual entry. All the other blogs use
the same templates and they display perfectly. Links to several of the
good ones so you can see what it *should* look like:

http://land.allears.net/blogs/photoblog/
http://land.allears.net/blogs/allearsteam/
http://land.allears.net/blogs/mikescopa/

The problem is with the HTML not the CSS.

It looks like there's an extra </div> somewhere in all the stuff inside
#alpha that is closing off pagebody-inner prematurely, so beta is ending
up outside pagebody-inner altogether, and that's why its box goes below
it.

Alpha and beta are supposed to be siblings inside pagebody-inner, but
they aren't in the bad page.

I thought of a </div> mismatch and checked out each open and close. They
are all where they are supposed to be. I used Firebug to highlight the
divs and all the alpha and beta divs are showing the way they should be.
Besides, if what you suggest was the cause then all of the blogs would
be broken since they all work on the same templates and stylesheets.

When I look at it in Firebug, I see the problem in its "Inspect" DOM
Tree viewer thing.

I am definitely seeing beta outside pagebody-inner on the bad page
and not on the good one. Maybe it's scripting that's breaking the tree
rather than the markup.

I am sure that is the place to look. I was interested by your problem,
because I could not see how any descendent of a float of specified width
could affect the placing of a subsequent float. And indeed that isn't
what's happening-- it's a different DOM tree.

On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:

Ben C wrote:
On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:
Okay, I'm swallowing my pride and asking for help. ;-)

We have a Movable Type blog that works dynamically and uses templates.
The version that we are using (3.34) did not have a pagination system so
I Googled and found how to add the code manually. It works as far as the
pagination goes but it seems to have created a new problem. The section
with the links that should be at the top of the right side of the page
is fine in most of the blogs but on one, it is showing at the bottom of
the page. I haven't a clue why as everything is on the same templates.
It should 100% work or 100% be broken. Prior to adding the pagination
code, all blogs worked properly.

I have tried expanding the container and the beta (right side) div and
shrinking the alpha (left side) div but no good. I played around with
several other settings with no change.

I'm just about out of original ideas on what to change. Anyone have any
guidance for me?

The blog that's acting up is at
http://land.allears.net/blogs/michaelbachand/

It is an index page, not an individual entry. All the other blogs use
the same templates and they display perfectly. Links to several of the
good ones so you can see what it *should* look like:

http://land.allears.net/blogs/photoblog/
http://land.allears.net/blogs/allearsteam/
http://land.allears.net/blogs/mikescopa/

The problem is with the HTML not the CSS.

It looks like there's an extra </div> somewhere in all the stuff inside
#alpha that is closing off pagebody-inner prematurely, so beta is ending
up outside pagebody-inner altogether, and that's why its box goes below
it.

Alpha and beta are supposed to be siblings inside pagebody-inner, but
they aren't in the bad page.

I thought of a </div> mismatch and checked out each open and close. They
are all where they are supposed to be. I used Firebug to highlight the
divs and all the alpha and beta divs are showing the way they should be.
Besides, if what you suggest was the cause then all of the blogs would
be broken since they all work on the same templates and stylesheets.

This is what I see in Firebug, for the bad page, showing beta outside
pagebody-inner. http://www.tidraso.co.uk/misc/bug.png

Thanks for taking a look though, Ben. I do appreciate it.

Maybe I'll have to cross my fingers that dorayme or Els happens to take
a look at it. ;-)

It is unfortunate you are having to make do with someone inferior like me.

Ben C wrote:

On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:
Maybe I'll have to cross my fingers that dorayme or Els happens to
take a look at it. ;-)

It is unfortunate you are having to make do with someone inferior
like me.

Hah.

FWIW I did have a brief look, but when my download meter topped out at four
megabytes for the problem page and then even more at seven megabytes for the
first "good" page I walked quietly away :-)

OP: Your pages are *WAY* too big, even in broadband areas. Nobody, and I
mean nobody at all will ever look at them if they are still forced to use
dialup.

Use thumbnails for those images. Max three or four K each, not up to a
hundred per each. But, then again, I suppose your blog software won't do
this :-)

--
Richard.

Ben C wrote:

On 2009-04-15, JackM <notreal (AT) earthlink (DOT) net> wrote:

I thought of a </div> mismatch and checked out each open and close. They
are all where they are supposed to be. I used Firebug to highlight the
divs and all the alpha and beta divs are showing the way they should be.
Besides, if what you suggest was the cause then all of the blogs would
be broken since they all work on the same templates and stylesheets.

When I look at it in Firebug, I see the problem in its "Inspect" DOM
Tree viewer thing.

I am definitely seeing beta outside pagebody-inner on the bad page
and not on the good one. Maybe it's scripting that's breaking the tree
rather than the markup.

I am sure that is the place to look. I was interested by your problem,
because I could not see how any descendent of a float of specified width
could affect the placing of a subsequent float. And indeed that isn't
what's happening-- it's a different DOM tree.

I finally got the problem fixed. Every time I changed one thing, it
seemed something else broke. Turns out I had to broaden my search as it
wasn't one thing that caused it, it was two. Ben was correct (thank you
Ben) about the closing </div> being out of place. Fixing that and
finding and correcting a <div></div> pair embedded in the pagination
code that shouldn't have been there brought the page back to normal.

And I had originally thought it to be a stylesheet issue. Guess I was a
little off in that diagnosis. ;-)