Page 1 of 1
menus and content are shifted on some pages
Posted: Fri Mar 30, 2007 9:36 am
by (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
Re: menus and content are shifted on some pages
Posted: Fri Mar 30, 2007 10:15 am
by 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
Re: menus and content are shifted on some pages
Posted: Fri Mar 30, 2007 10:50 am
by (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
Re: menus and content are shifted on some pages
Posted: Fri Mar 30, 2007 11:26 am
by kermit
(a) wrote:
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}
Re: menus and content are shifted on some pages -- solved
Posted: Fri Mar 30, 2007 1:42 pm
by (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
Re: menus and content are shifted on some pages
Posted: Fri Mar 30, 2007 3:20 pm
by 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.
Re: menus and content are shifted on some pages
Posted: Fri Mar 30, 2007 3:36 pm
by (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
Re: menus and content are shifted on some pages -- solved
Posted: Fri Mar 30, 2007 6:32 pm
by kermit
(a) wrote:
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.