Menu position problem in IE6 [Solved]

[KaiMartin]

Ok, I asked this question before in the GeneralHelp section and got no reply at all. Maybe it was just the wrong sub forum, or is it really that hard to get  the desired menu behaviour in IE6? 

Here we go again:
After some tweaking I came up with a rather simple style that still suits my needs.  A vertical CSS menu is placed on the left with a square logo attached to the top. The menu should stay in place if the content is scrolled down. I slightly modified the default theme of CMSMS to achieve the desired behaviour. See: http://lilalaser.de/lila/index.php/english

The CSS code snippet for the menu:
/* NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
    div#content {
        position: relative;
        width: 100%;
        margin: 1.5em auto 2em auto;
        padding: 0;
        text-align: left;
    }
    div#main {
        float: left;
        margin-right: 1em;  /*--*/
        margin-left: 9em;  /*--*/
        display: inline;
    }
    div#menu_vert {
        float: left;
        width: 8em;    /* Width of the menu -- */
        height: 100%;
        position: fixed; /* Do not scroll with the page --*/
        display: inline;
        margin-left: -1.5em;
        top: 0;
    }
  div#menu_vert img {  /* A picture attached to the menu --*/
        width: 8em;
        margin-bottom: 1em;
    }
This works beautifully with firefox, opera and konqueror. It validates through the wwwc-checker too. Yet, for some reason IE6 puts the menu below the content. On pages with lots of content the menu bar will end up way below the visible part of the window. (e.g. http://lilalaser.de/lila/index.php/deutsch/produkte/diodenlaser). Is there a workaround to get the desired behaviour with IE?
------

[heatherfeuer]

I can't be absolutely certain, but it might have something to do with the "display: inline" tag.  Try changing div#menu_vert to "display: block" just to see what happens.

[KaiMartin]

Try changing div#menu_vert to "display: block" just to see what happens.

Result: No change at all. IE6 still puts the menu on the bottom of the page and firefox still displays everything fine. Maybe I have to set the display elesewhere to some other value.
------

[heatherfeuer]

Hmmm... As I said, not sure.  If it were me, and I was having this problem, the next thing I'd try (based on looking at your css again) is to float: right; your div#main element.  No guarantees, but again might be worth a try.  For instance, my css for div#main and div#sidebar (which holds my menu) is like this:

/* This container is for the main text of the page */
div#main {
float: right;
width: 70%; /* leaves room for the sidebar on the left */
padding: .5em;
background-color: #fffde8;
color: #420062;
border: 1px dashed #440062;
}

/* This container holds the sidebar contents */
div#sidebar {
float: left; /* Sets the sidebar on the left side of the content area */
width: 25%;
padding: .5em;
margin-left: 0;
background-color: #fffde8;
color: #420062;
border: 1px dashed #440062;
}

Maybe that will work.

[KaiMartin]

the next thing I'd try (based on looking at your css again) is to float: right; your div#main element.

The left and right tags didn't help. IE seems to be confused by the  "position: fixed" tag. Looks like I have to resort to browser dependent CSS code.
--

[heatherfeuer]

I can understand your frustration.  IE just doesn't like to play nice with others.   

[KaiMartin]

Looks like I have to resort to browser dependent CSS code.

For the records: IE absolutely needs the tag position:absolute. So I set it to "absolute" in the main style section and reset it to "fixed" with one of the infamous browser exclusion hacks.

Code: Select all

    div#menu_vert {
        float: left;
        width: 8em;     /* Width of the menu -<(kmk)>- */
        height: 100%;
        position: absolute; /* Do not scroll with the page -<(kmk)>-*/
        display: inline;
        margin-left: -1.5em;
        top: 0;
    }
    html>body #menu_vert {  /* ignored by IE6 */
    position: fixed;
    }

Now, the menu appears in the upper right of the page even with IE6. However, this is only half a solution. The menu should stick to the screen when the page is scrolled. I found a working example at the selfhtml site ( http://de.selfhtml.org/css/layouts/anze ... ert_ie.htm ). They suggest to add an IE only style section to the head of the document. Smarty chokes on this section if it is included directly into the template.  So I tried to load it as a link:

Code: Select all

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://lilalaser.de/lila/IE6-workaround.css">
<![endif]-->

The file IE6-workaround.css contains:

Code: Select all

<style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #main {
      height: 100%; width: 100%; overflow: auto;
    }
    #menu_vert {
      position: static;
    }
  }
</style>

This is read but does not make the menu sticky. Any idea what is different to the selfhtml example?

@heaterfeuer: Yes, this is frustrating. Why can't MS browsers be as standard compliant as all the others are? Anyway, thank you for your patience.

------

[heatherfeuer]

Actually, try putting it between {literal} {/literal} tags.  Smarty won't choke then.

[KaiMartin]

Actually, try putting it between {literal} {/literal} tags.  Smarty won't choke then.

Well, smarty does not choke, but it puts the content between the literal tags in a environment. Consquently the browser will literally print the code rather than interprete it. Maybe this is a version issue --- I still use cmsms v0.13. Time for an upgrade?
--

[KaiMartin]

Time for an upgrade?

The upgrade was impressively smooth 
However, smarty still put everything between {literal} and {/literal} in a environment. Turns out, I was fooled by the WYSIWYG editor. In this case, what I saw was not what I got. The editor produced a html-ized version of the source. For the records: I needed to uncheck "Enable the WYSIWYG editor while editing Global Content Blocks" in user preferences of CMSMS. (Why would anyone want to use a graphical editor for global content blocks?) Now I can insert arbitrary source code into the section. I have to go to a place where I have access to computers running MS-Win to see if this will make the menu sticky in IE too.
------

[heatherfeuer]

I'm sorry.  I guess I misunderstood what you were trying to do.  I DO have IE 6 (but not 7) on my computer, mostly for testing purposes, and the menu does stay stationary as you wanted.  Just for fun, I also checked it in Netscape 7 and Opera 7.5.  The menu behavior is now the same across all browsers.

[KaiMartin]

Just for fun, I also checked it in Netscape 7 and Opera 7.5.  The menu behavior is now the same across all browsers.

Yes, finally the menu is ok on all browsers
Last thing I had to do, was to change '#main' in the IE only global content to '#container'. Looking back, there wasn't much coding involved, but a whole bunch of learning how CMSMS, CSS and smarty interact.
--