adding box-shadow to menu which also works on IE

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Brzezi
New Member
New Member
Posts: 7
Joined: Tue Feb 14, 2012 10:38 am

adding box-shadow to menu which also works on IE

Post by Brzezi »

Hello,

Could someone help me with adding 'box-shadow' tag to menu css which works also on IE?

I want to add this attribute to my menu but it only works fine on FF and chrome not on IE.
When I add this code "-moz-box-shadow: 3px 3px 5px #c1c1c1;

-webkit-box-shadow: 3px 3px 5px #c1c1c1;

box-shadow: 3px 3px 5px #c1c1c1;

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c1c1c1')";

/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c1c1c1');"
to menu css it adds shadow behind the <div> element but on IE it adds shadow to every element which is in this <div>.
I've found a solution but I can't use it in my menu becouse of my little experience.
Link to the solution I've found: http://robertnyman.com/2010/03/16/drop- ... -browsers/

I'm using:
CMS: v1.10.3;
MenuManager: v1.7.7;
Menu: cssmenu_ulshadow.tpl;
Menu css: Navigation: CSSMenu - Horizontal;

I will appreciate any help.

P.S.: Sorry for my english. I'm not experianced in this too :P
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: adding box-shadow to menu which also works on IE

Post by Dr.CSS »

You aren't really saying where you want to use this, it really helps if you have a link to the site...
Brzezi
New Member
New Member
Posts: 7
Joined: Tue Feb 14, 2012 10:38 am

Re: adding box-shadow to menu which also works on IE

Post by Brzezi »

Dr.CSS wrote:You aren't really saying where you want to use this, it really helps if you have a link to the site...
Sorry for that.

I've wanted to add shadow under each menu button so I've add "box-shadow" tag to "primary-nav li" in css. In FF and other browsers it was looking good but in IE shadow was added inside the button(not outside of it).
I've solved this problem by myself.
Everything I've describe was happening becouse of using bad "behavior" for rounded corners.
I was using "border-radious.htc" which makes that everything with that behavior was transparent so attributes were added to the text and border inside.

Tip from me: If you want to do something else beside only rounding corners( for example add a shadow under rounded box) don't use this behavior. Better way is use this one -> "PIE.htc"
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: adding box-shadow to menu which also works on IE

Post by Dr.CSS »

I use CSS3 on my site and as for IE6,7,8 oh well get a real browser, my site still works but the rounded corners etc. don't show and they get square corners etc. it even has a slide out that tells them why it looks funny to them with a link to the old one that looks the same but uses images for everything...
Post Reply

Return to “Layout and Design (CSS & HTML)”