Troubles with CSSMenu Horizontal

[wientanz]

Ok, now I've convinced my dad to use CMSMS. After I've converted a free layout for CMSMS, I've tried to adapt the menu using CSSMenu Horizontal. It doesn't work, though.

Somehow the existing CSS conflicts with the CSS for the Menu. Again.

The menu should be adapted to the original layout that can be found here: http://www.frankreich-guide.com/index.php/home
And a page with the problematic menu is here: http://www.frankreich-guide.com/index.php/Nord

As you can see in the CSSMenu page-using page, there is  a "Navigation" in the page which I did not put there. Right above the menu. I don't know how it got there. Next there's the matter of "1: Home" and "2: Region". The numbers shouldn't be there. And I can't get to 2.3 (Nord-Pas-de-Calais), which is strange. And any idea how I can adapt the menu to look the same as in the original?

*sigh* Any the dropdown is too transparent for my taste, too...

Please help. I always have problems using the CSSMenu.

Using CMSMS v0.13

[Dr.CSS]

This is just a start mind you, this template has way too many position:relative/position:absolute calls, and with these changes you are still going to end up with trouble from the date across from Nord(59) with the menu as you will see it still shows thru the last menu item on the last drop.

#menuwrapper {
        width: 100%;
        }

/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li {
        width: 200px;
      }


/* Unless you know what you do, do not touch this */

#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}

#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}

/* Styling the basic apperance of the menu elements */

#menu ul li a:hover
{
background: #fff url('uploads/images/layout/a18.gif') repeat-x top;
color: #4A4A24;
text-decoration: none;
}
#menu ul li li a
{
backgrond: #fff ;
color: #fff;
text-decoration: underline;border:1px solid #5c5c3a
}
#menu ul li li a:hover
{
background: #fff url('uploads/images/layout/a18.gif') repeat-x top;
color: #4A4A24;
text-decoration: none;border:1px solid #5c5c3a
}
dfn{display:none}
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: underline;color:#FFF
}
#primary-nav li a {

}
#primary-nav li li a {background: #5c5c3a

}
#primary-nav li, #primary-nav li.menuparent {

}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
backgrond-color: #C7C7C7;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
backgrond-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}


/* IE Hacks */

#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
-->/*

terrafirma1.0 by nodethirtythree design
http://www.nodethirtythree.com

*/

*
{
padding: 0px;
margin: 0px;
}

body
{
background: #F9F9F7 url('uploads/images/layout/a1.gif') repeat-x;
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
color: #8C8C73;
line-height: 18px;
}

a
{
color: #FF7800;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}

sup
{
font-size: 0.5em;
}


p
{
margin-bottom: 14px;
text-align: justify;
}

img.picA
{
position: relative;
top: -2px;
background: url('uploads/images/layout/a47.gif') no-repeat;
width: 76px;
height: 74px;
padding: 8px;
}

img.picB
{
position: relative;
top: -2px;
background: url('uploads/images/layout/a26.gif') no-repeat;
width: 146px;
height: 75px;
padding: 7px;
}

img.floatleft
{
float: left;
margin: 0px 14px 3px 0px;
}


ul.linklist
{
list-style: none;
}

ul.linklist li
{
border-top: solid 1px #EEEEEE;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}

ul.linklist li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
background: #fff url('uploads/images/layout/upbg.gif') no-repeat;
width: 747px;
height: 264px;
z-index: 1;
}

#outer
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url('uploads/images/layout/abg.gif') repeat-y;
}

#inner
{
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}

#header
{
position: absolute;
background: #FF7800 url('uploads/images/layout/a8.gif') repeat-x;
width: 202px;
height: 92px;
color: #fff;
padding-left: 20px;
}

#header span
{
font-weight: normal;
}

#header h1
{
position: absolute;
font-size: 23px;
letter-spacing: -1px;
top: 30px;
height: 92px;
}

#header h2
{
position: absolute;
font-size: 10px;
font-weight: normal;
color: #FCE2CA;
top: 51px;
}

#header sup
{
color: #FCE2CA;
}

#splash
{
position: absolute;
right: 30px;
background: #EAEAE2 url('uploads/images/layout/a10.jpg') no-repeat;
width: 458px;
height: 92px;
}

#menu
{
position: relative;
background: #46461F url('uploads/images/layout/a16.gif') repeat-x;
height: 67px;
padding: 0px 20px 0px 5px;
margin: 98px 0px 20px 0px;
}



#date
{
position: absolute;
top: 0px;
line-height: 52px;
color: #BDBDA2;
right: 30px;
font-weight: bold;
font-size: 12px;
letter-spacing: -1px;
}

#secondarycontent
{
positon: relative;
width: 180px;
float: right;
}

#secondarycontent h3
{
position: relative;
top: 4px;
font-size: 16px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url('uploads/images/layout/a22.gif') bottom repeat-x;
padding: 0px 0px 10px 10px;
margin-bottom: 20px;
}

#secondarycontent .content
{
padding: 0px 10px 0px 10px;
margin-bottom: 20px;
}

#primarycontent
{

width: 480px;
float: left;
}

#primarycontent h3
{
positon: relative;
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url('uploads/images/layout/a22.gif') bottom repeat-x;
padding: 0px 0px 10px 15px;
margin-bottom: 20px;
}

#primarycontent .content
{
padding: 0px 15px 0px 15px;
margin-bottom: 20px;
}

#primarycontent .post
{
margin-bottom: 30px;
}

#primarycontent .post .header
{

}

#primarycontent .post .date
{
position: absolute;
left: 415px;
top: 195px;
line-height: 35px;
color: #AFAFA4;
font-weight: bold;
}

[wientanz]

wow!
At least the menu works now. Just 3 things more:
How can I get rid of the (c) Symbol just right from the date between the two content blocks?
And how can I center the the nav-bar (Home, Regionen; first level nav) to the same line the date is in?
The children shouldn't be underlined.

I've solved the problem with the date for good, though. Just elimininated it as it wasn't essential.

[wientanz]

Looks good in Firefox, is impossible in IE though. The elements are all over the place all of a sudden!

[Dr.CSS]

I hope you have another copy of the CSS, what i posted was only the parts i changed, i had to post a lot i didn't change to get it all, now you are missing the rest including the footer which is where the copy right symbol is coming from.

Sorry for the misunderstanding I will let it be known when i only paste parts instead of assuming it's known. 

[wientanz]

No problem. Well, yes, I got another copy of the CSS. I looked through the code and saw that all the major parts where in and after changing the passages per hand decided that you obviously copied the whole CSS and edited it. Oh, well. No problem.

edit: ok, works again now. it was really my fault. Do you have any ideas how to address the 3 things I'd like to change?
edit2: the problem is that the menu creeps under the image, under the title and so on. Any idea to that?
edit3: and suddenly I can't access any content below menu item 2.2 (Regionen->Nord-Pas-de-Calais). The menu vanishes, when I roll over the the menu-entry.
edit4: and strangely, with this adapted stylesheet the News-module isn't lined up with the text above it.
edit5: and the content seems to have more distance now to the menu. too much distance

Any ideas?

[Dr.CSS]

Ok here we go, now remember only the things I changed are here.... find these in your CSS and paste them in

Note: some of these have things in between them so just do them one at a time, mostly just took out position calls.

#primary-nav li a {
  margin: 10px;
  }
#primary-nav li li a {
  background: #5c5c3a ;
  margin:0 0 0 10px;
  }
#primary-nav li li li a {
  background: #5c5c3a ;
  margin:0px;
  }


#secondarycontent
{
width: 180px;
float: right;
}

#secondarycontent h3
{
top: 4px;
font-size: 16px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url('uploads/images/layout/a22.gif') bottom repeat-x;
padding: 0px 0px 10px 10px;
margin-bottom: 20px;
}

#primarycontent
{
width: 480px;
float: left;
}

#primarycontent h3
{
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url('uploads/images/layout/a22.gif') bottom repeat-x;
padding: 0px 0px 10px 15px;
margin-bottom: 20px;
}

#primarycontent .post .header
{
}

[wientanz]

ok, deleting the "position: relative" and the other things made it look good and work perfectly in Firefox, woohooo!

But in IE it's another story. The primarycontnent, secondarycontent and the footer have either moved or vanished...

[wientanz]

Mark?

Any idea how to have the position: relative in the CSS and have the menu behave normally? You've helped me a lot and that's just the last bit of work. Without the position: relative, the primarycontent and secondarycontent just behaves weird in IE.

[Dr.CSS]

I personally would rework the whole template so I could eliminate the postion: parts in the CSS just keeping what was needed, like for the menu and such.

[wientanz]

I would do that, but I really don't know enough CSS for that. I can experiment with the settings, yes, but I can't create any new CSS.