menus and content are shifted on some pages

[(a)]

Hi there,

I am new to cmsms so please bear with me if my question is kind of dumb...

We made a website based on cmsms and all works like a charm (thank you btw for the great work!), except one minor issue: the menu and pages do not all have the same x-location in the browser. What I mean is: if you go to http://vielklang.zplane.de and then click e.g. on "support", the whole page including the menu moves a bit to the right (please ignore any other problems atm, we are still working on it).

Since all pages are based on the same template, I have no idea where to start searching for a solution. Has anybody a hint?

Thanks,
Alexander

[RonnyK]

(a),

there are some things with shifting pages.

You might want to add,

height: 1%;

to your div#main in the css.

Also some changes might be required to the template to reflect the 3px bug in IE. Are you checking on IE7, cause I don't see the behaviour in IE6.

I have my template running with:

Code: Select all

<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->
{/literal}
<!-- The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet 
"Layout: Left sidebar + 1 column" -->


<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->

to mark some changes only relevant for IE6 and below and no longer for IE7.

Be aware that this is based on the Left sidebar + 1 column! So check carefully for your template.

Ronny

[(a)]

Ahh, I only checked with Firefox. Indeed nothing is shifted with IE (7, at least). So it might be a browser problem?

Thanks again,
Alexander

[kermit]

Ahh, I only checked with Firefox. Indeed nothing is shifted with IE (7, at least). So it might be a browser problem?

this is not a browser problem or bug, it's just the way firefox "is" -- when not needed, the vertical scroll bar disappears, which changes the width of the viewport.. this can cause layouts centered in the body to shift slightly as you jump from page to page and some don't have enough content to require the vertical scroll.

i *think* this is what i did to "fix" this on my own sites:

html{min-height:100%;margin-bottom:1px}

[(a)]

Thanks, now I understood what the problem was.

For me, adding
html {overflow-y:scroll;}
to the style sheet seems to avoid the rescaling in Firefox.

Thanks again,
Alexander

[KO]

I do see some weird behaviour with IE6. If I open any page from top link -> "next/prev" links and printer icon jumps when I hover on top links for the first time. Then they find their right place. When I open other page they move again and jump back when I hover.

[(a)]

Indeed, thanks for pointing that out. I was not aware that there are several things in IE6 that don't look/behave like in Firefox or IE7. I am completely ignorant of css, but I will try to locate the issues anyway  .

Cheers,
Alexander

[kermit]

Thanks, now I understood what the problem was.

For me, adding
html {overflow-y:scroll;}
to the style sheet seems to avoid the rescaling in Firefox.

both this, and mine (above) will work. see http://www.csskarma.com/#firefoxwiggle for more info about both methods.