Info: Vertical simple menu and whitespace bug in IE [SOLVED]

[eh]

This is just to let you know, maybe it saves you some time (took me as a non CSS expert half a night and several cups of coffee...)

To explain what it is about see the first picture "menu_vert_orig.png". It shows the left side menu (styled with CSS "Navigation: Simple - Verticaly") you get after a plain CMSMS installation in IE6/IE7. There's this boring 1px white border.

Looking at the CSS definition one can see that others already fiddled around with this:

Code: Select all

/* first level links */
div#menu_vert a {
   text-decoration:none; /* no underline for links */
   display: block; /* IE has problems with this, fixed above */
   padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
   color: #18507C; /* this will be link color for all levels */
   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center; 
   min-height:1em; /* Fixes IE7 whitespace bug */ 
}

But to definitely remove this "#!*%&%!!" one has to (or better can do - maybe it's not the perfect solution, but it works) insert this piece of CSS, preferably at the beginning of the definitions:

Code: Select all

#menu_vert ul li {
   display: block;
   line-height: 1.1em;
}

See the other pic "menu_vert_ok.png" to proof that it looks much nicer afterwards.

Ok, there are people who don't care too much about single pixels - but if you're not that kind of whatsoever-developer then you'll understand why I was very pleased after figuring this out.

Ernst

PS:

Seems to be related to this post:

http://forum.cmsmadesimple.org/index.php/topic,8035.0.html