Fixed menu and IE-6?

KaiMartin · Post by **KaiMartin** » Sat Jul 15, 2006 12:41 am

Hi.
Did anyone successfully design a fixed menu style for CMSMS that works with IE-6? A no-scroll menu would be great for long content pages. The property " position: fixed" should do the trick for firefox, konqueror and friends. Yet, the notorious IE-6 chooses to ignore this snippet and will scroll the menu anyways. On http://lilalaser.de you can see my effort to morph the default theme into a fixed menu design. (Go to Produkte-Diodenlaser for a page with scrollbar.)

My preferred resource of information on CSS stuff, http://selfhtml.org, says, IE-6 can be tricked into the desired behaviour if the header contains this code:

Code: Select all

<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #container {
      height: 100%; width: 100%; overflow: auto;
    }
    #content {
      position: static;
    }
  }
</style><![endif]-->

But if I add this to Global Metadata, the pages come back with a fatal smarty error:

Fatal error: Smarty error: [in template:12 line 26]: syntax error: unrecognized tag: html, body { height: 100%; overflow-y: hidden; (Smarty_Compiler.class.php, line 436) in /var/www/vhosts/lilalaser.de/httpdocs/lila/lib/smarty/Smarty.class.php on line 1095

Is there anything I can do about it? Maybe a way to make smarty leave this code snippet alone?

------

Dr.CSS · Post by **Dr.CSS** » Sat Jul 15, 2006 5:07 am

why not put it in the head... like this one...

#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}

KaiMartin · Post by **KaiMartin** » Sat Jul 15, 2006 1:29 pm

mark wrote: why not put it in the head... like this one...

Hmm, I tried to put your snippet into the template (CSSMenu Vert 1 col) like this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-- Type the title of your site here -->
<title>Lilalaser - {title}</title>

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->

</head>

</__body>
[...]

This gives me the same kind of fatal smarty error:

Fatal error: Smarty error: [in template:12 line 25]: syntax error: unrecognized tag: width:expression(P7_MinMaxW(720,950)); (Smarty_Compiler.class.php, line 436) in /var/www/vhosts/lilalaser.de/httpdocs/lila/lib/smarty/Smarty.class.php on line 1095

Seems like I missed something obvious. Maybe some kind of global smarty configuration? BTW, SMSMS is version 0.13, downloaded last week.

------

Dr.CSS · Post by **Dr.CSS** » Sat Jul 15, 2006 4:16 pm

i didn't think this was going to get so long...

sorry i meant for you to put yours in like they do for that one, which is the...

{global_content name='JavaScript for IE page width'}

if you go to Global Content Blocks you will see a block called 'JavaScript for IE page width' if you clik it it will show a content edit box and you think ?so? where is it? all i see is {literal} {/literal} you have to clik the 'Source' button and a popup window will show you what i pasted below and you see the literal tags surounding the script, since you are not using a script i thought you could put yours in the head, so you might want to make the GCB with the literal tags around it and see if that works...

BTW: sorry i never looked at your site sorry

it looks like it has the same type of menu thing as the andreas07 that i ported... sort of...
http://www.multiintech.com/index.php?page=andreas07
it uses a style sheet called in the head like so...

{stylesheet}

i put the "fix.css" in the root of my install, turns out it is just a 2 liner...

/**************** IE fixes ****************/

html
{overflow:hidden;}

body
{height:100%; width:100%; overflow:auto;}

this is the GCB they use...

{literal}
=b){nw=b+"px";}if(w

#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}

{/literal}

yours might look like...

{literal}
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#container {
height: 100%; width: 100%; overflow: auto;
}
#content {
position: static;
}
}
{/literal}

KaiMartin · Post by **KaiMartin** » Sat Jul 15, 2006 6:40 pm

mark wrote: if you go to Global Content Blocks [...]

Bingo! (I knew it was something obvious...)

it looks like it has the same type of menu thing as the andreas07 that i ported...

Sure. But the andreas07 menu works even bettter. It gets decorated with scrollbars if the window is too small for the whole menu. Just applied that trick to my site

(Is there a way to avoid the horizontal scrollbar?

Thank you for helping!

------

Dr.CSS · Post by **Dr.CSS** » Sat Jul 15, 2006 9:00 pm

UH hate to say but no menu in IE

KaiMartin · Post by **KaiMartin** » Sat Jul 15, 2006 10:32 pm

mark wrote: UH hate to say but no menu in IE

That may be true. None of my boxes runs win, so I have no easy way to check

I wish, there was a site that just shows how my pages look in other Browsers.

Looks like the IE-only code breaks the menu

More experiments are needed. Until then I'll cope with a scrolling menu in IE.

The effect of the tag overflow:auto wasn't favorable either --- It confined the CSS-menus in horizontal direction and produced a horizontal schrollbar instead of an expanding menu. Hopefully all changes are undone now, so the site works like it did yesterday...

------

CMS Made Simple Forums

Fixed menu and IE-6?

Fixed menu and IE-6?

Re: Fixed menu and IE-6?

Re: Fixed menu and IE-6?

Re: Fixed menu and IE-6?

Re: Fixed menu and IE-6?

Re: Fixed menu and IE-6?

Re: Fixed menu and IE-6?