Jot causing weird css errors

I have a working version of JOT 1.1.4 i think on a web page. When you first visit the site, it works great, but when you leave a comment, it causes everything in the main content div to shift upward, and it all gets hidden. The way the pages are build, it needs to be able to clip some of the page, so when someone submits a jot comment, it moves everything around, and the pages don’t show a bunch of info. Using EVO 1.0.0 i think. I really stupid part, is that if I open firebug and play with the overflow hidden/visible, on the containing divs, then everything comes back like it is supposed to. Its almost as if there are open tags in the JOT template. I am using the included templates straight from the assets directory.

Heres a link

http://www.fortheloveoffilms.com

Feel free to leave a comment and see for yourselfs, just use the words "test" somewhere in your post and title.

Any and all help would be greatly appreciated. Thanks

I haven’t tried it with a comment, but looking at the Harry Potter review with the long title, the titlebox div’s content overhangs and obscures the tags line. This looks like a standard CSS "clearing floats" problem, one cure to which is to fiddle with overflow settings.

Have a look at this Sitepoint article, which has links to some others on the subject.

Incidentally, does the DIV around the H4 serve any real purpose?

KP

kp52: Thanks for the catch. I changed some font sizing yesterday and didn’t even think about that happening. The outside div is there for positioning only, there is a ton of floating and vertical stretch happening in this layout. Interestingly enough, everything above the #content div renders perfectly on jot form submit. its all the stuff inside the content div that has some issues. I don’t claim to be an expert in HTML/CSS, but I am not even sure if the problem is on that side of things.

Please try to leave a comment on the site! (see link in first post) No login or anything required, just fill in the required fields.

It is almost as if the browser doesn’t re-parse the whole page, it just changes the content in one area, and then the rendering happens in the wrong order.

PLEASE TRY TO REPRODUCE, Then post back.

Thanks, J

I noticed a similar but today and found that if I remove the #jotnav[+jot.id+] from the URL it shows alright with no CSS errors.

E: I’m talking about the navigation links that add #jotnav[+jot.id+] to the document, see chunk.navigation.inc.html in /templates.

E2: some more info:
MODx Evo 1.0.2
Apache/2.2.3
PHP Version 5.1.6
Jot call: [!Jot? &subscribe=`0` &pagination=`4` &moderated=`0` &captcha=`0` &guestname=`Anonyymi`!]
Action taken when problem occurs: clicking the "Next" and "Prev" links.

Ok, I found a hack around this, it’s not the best solution but it works and no longer messes up the layout:

I removed the #jotnav anchor from chunk.navigation.inc.html, took out the [+jot.id+] parts from all the navigation links (remember to check that you take them all out!) and put the anchor in an absolutely positioned div outside the main elements in my template and experimented a bit until I found the right values that would make it jump to the comments after clicking the navigation links.

The problem doesn’t seem to be Jot, but somehow other anchor links in my site mess up the layout as well. jad889nb you could also try and see if this is the case with your layout. Anyhow, the fix I posted works with Jot comments.