problems with menu layout

[karry]

I am trying to convert this website to cmsms http://ejstrupholmdyreklinik.dk/

But I am having some trouble with the menu. I doesn't need to have the sliding effect, but I would like to have the rounded corners.

I have managed to make i look okay in firefox, but have some trouble with explorer. I use this in my css code:

Code: Select all

-moz-border-radius: 0px 8px 8px 0px;
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;

and then I use the dd_roundies to make it work for explorer as well I have uploaded the js and added the following in my template:

Code: Select all

<__script__ src="DD_roundies_0.0.2a.js"></__script>
<__script__>
  /* EXAMPLES */

  /* IE only */
  DD_roundies.addRule('.parent', '8px');

</__script>

Which results in this menu http://www.ejstrupholmdyreklinik.kfasterholdt.dk/


I am using a copy of the simple_navigation.tpl, but I haven't got much expirience in editing menu layout so I would like some help on how to make the menu look right - I guess I have to add some more rules in the DD_roundies, but which ones to make it look right - and what do I do to get rid of the shadow effect i seems to have added?

[karry]

I got a little further by using DD_roundies.addRule('a', '0px 8px 8px 0px');

I think I can live with having the rounded effect on the submenues as well - but my next problem is that i looks like te active menu looses its layout - no box around it - how can I add that?

[Dr.CSS]

It helps a lot if you look at the page source...

Forside

[karry]

I had some problems with the menu freezing on some computers, so I have been looking for another solution, and found a solution that looks very easy:

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.1em 0.1em 0.1em 1em; /* some air for it */
color: #000; /* this will be link color for all levels */
min-height:1em; /* Fixes IE7 whitespace bug */
border-bottom: 3px solid #636466;
background-color:#ffffff;
position: relative;
    -moz-border-radius: 0px 8px 8px 0px;
    -webkit-border-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    behavior: url(/uploads/border-radius.htc);
    border-radius: 8px;
}

My problem now is that if I use the above, it looks fine in Mozilla, but not in explorer

if I use 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.1em 0.1em 0.1em 1em; /* some air for it */
color: #000; /* this will be link color for all levels */
min-height:1em; /* Fixes IE7 whitespace bug */
border-bottom: 3px solid #636466;
background-color:#ffffff;
position: relative
    -moz-border-radius: 0px 8px 8px 0px;
    -webkit-border-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    behavior: url(/uploads/border-radius.htc);
    border-radius: 8px;
}

where the only difference is position:relative without the ; it looks fine in explorer but not in mozilla - weired error - but I can't seem to figure out what goes wrong - anybody out there who knows what I am doing wrong?

[Dr.CSS]

Leaving out the ; will make everything below it not work, it stops from there down, IE doesn't under stand the -moz-border-radius nor the -webkit-border-radius:, the first one is for mozzilla and the second one is for safari/chrome...

Since you are using niftyCube why not use it for the round in the menu?...

And why are you using frames may I ask?...

[karry]

As far as I have understood the:

Code: Select all

behavior: url(/uploads/border-radius.htc);
    border-radius: 8px;

should work for IE - which it does when I leave out the ; - but then of course it does not work in mozilla  - should it not be possible to get it to work i both?

I Don't use niftyCube since I had problems getting it to work - and ehh - I don't use frames either? http://www.ejstrupholmdyreklinik.kfasterholdt.dk/

[Dr.CSS]

Sorry I had clicked the top link, the one you want to convert...

But first you need to fix your template...

http://validator.w3.org/check?verbose=1 ... oldt.dk%2F

[karry]

Thanks, I now managed to get rid of all the errors - but the menu still won't work properly in IE

[karry]

Anybody have a clue?

I don't seee why it's working on the content, but not on the menu

[Dr.CSS]

I've never seen border radius work in IE, maybe ie8 does it now, but I will say the other thing is that you shouldn't use (/uploads/*****)  it should be (uploads/******)  no / in front of uploads...

[karry]

The thing is, it seems to be working on the content and the qoutebox, but not on the menu.

I really can't see why