Forums
View unanswered posts | View active topics It is currently Sun Nov 23, 2014 10:03 am



Reply to topic  [ 5 posts ] 
 Sub menu IE8 
Author Message

Joined: Fri Nov 11, 2011 10:59 am
Posts: 5
Post Sub menu IE8
Hi

http://demo.seevu.co.uk

When you hover over the menu and the sub menu appears, i want the container of the sub menu to have a border radius of 10px as it does in IE9, firefox etc.

Here is my code:
Code:
#nav ul {
   display: none;
   z-index:9999;
   width: 245px;
   position: absolute;
   top: 30px;
   left: 0;
   font-size:12px;
   text-align:left;
   line-height:24px;
   color:#000;
   text-decoration:none;
   padding:0px;
   border: 1px solid #e0e0e1;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   background: #FFFFFF;
   behavior: url(/pie/PIE.htc);   
}


Can anyone indicate where i have gone wrong please?


Mon Feb 20, 2012 9:27 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Sub menu IE8
Well since you're adding a gradient background to the <a> elements in each submenu, those square backgrounds stick out of the rounded corners of the container. You need to round the appropriate corners of the top and bottom <a> elements in each menu.


Mon Feb 20, 2012 9:43 am
Profile

Joined: Fri Nov 11, 2011 10:59 am
Posts: 5
Post Re: Sub menu IE8
jason wrote:
Well since you're adding a gradient background to the <a> elements in each submenu, those square backgrounds stick out of the rounded corners of the container. You need to round the appropriate corners of the top and bottom <a> elements in each menu.


Thanks for your speedy response....

I have removed the gradient for each link on the submenu but the container is still square.

Code:
#nav a {
   font-size: 12px;
   color: #000;
   text-decoration: none;
   display: block;
   padding:  8px 20px;
   margin: 0;
   border-radius: 10px 10px 0px 0px;
   /*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#DADBDC));
   background: -webkit-linear-gradient(#FFFFFF, #DADBDC);
   background: -moz-linear-gradient(#FFFFFF, #DADBDC);
   background: -ms-linear-gradient(#FFFFFF, #DADBDC);
   background: -o-linear-gradient(#FFFFFF, #DADBDC);
   background: linear-gradient(#FFFFFF, #DADBDC);
   -pie-background: linear-gradient(#FFFFFF, #DADBDC);*/
   behavior: url(/pie/PIE.htc);   
   }


Mon Feb 20, 2012 10:28 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Sub menu IE8
Not sure but it looks like you're removing the border-radius when the menu is opened?

Code:
#nav li:hover > ul {
   display: block;
   /*background:none;*/ border-radius: 0px 0px 0px 0px;
}


Mon Feb 20, 2012 11:16 am
Profile

Joined: Fri Nov 11, 2011 10:59 am
Posts: 5
Post Re: Sub menu IE8
Hi Jason i tried what you said but it just removes the background of the menu altogehter.

Any ideas please?


Wed Feb 22, 2012 7:09 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Majestic-12 [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.