Page 1 of 1
problems with menu layout
Posted: Sat Feb 20, 2010 8:35 pm
by 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?
Re: problems with menu layout
Posted: Sun Feb 21, 2010 2:11 pm
by 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?
Re: problems with menu layout
Posted: Sun Feb 21, 2010 8:18 pm
by Dr.CSS
It helps a lot if you look at the page source...
Forside
Re: problems with menu layout
Posted: Sun Apr 04, 2010 6:17 pm
by 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?
Re: problems with menu layout
Posted: Mon Apr 05, 2010 6:18 pm
by 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?...
Re: problems with menu layout
Posted: Mon Apr 05, 2010 6:37 pm
by 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/
Re: problems with menu layout
Posted: Mon Apr 05, 2010 6:51 pm
by 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
Re: problems with menu layout
Posted: Tue Apr 06, 2010 8:26 pm
by karry
Thanks, I now managed to get rid of all the errors - but the menu still won't work properly in IE
Re: problems with menu layout
Posted: Wed Apr 28, 2010 4:43 am
by karry
Anybody have a clue?
I don't seee why it's working on the content, but not on the menu
Re: problems with menu layout
Posted: Thu Apr 29, 2010 5:37 pm
by 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...
Re: problems with menu layout
Posted: Sat May 01, 2010 7:23 am
by 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