WordPress.org

1. LostRambler007
   Member
   Posted 11 months ago #

   HI,
   I've made some modifications to the style.css of 20-10, but have come up with a problem I do not know how to resolve.

   The sub-menus drop down vertically (off-set right) but the drop- shadow does not, nor are they the same size as the drop down text in Chrome, Firefox, or Safari.
   Here is the site:
   aias.org.uk/TestWP/

   Any help would be most appreciated.

   Thanks,
   David

2. stvwlf
   Member
   Posted 11 months ago #

   Hi

   It was not clear from your post but I assume you are saying it is Internet Explorer in which the drop shadow doesn't appear.

   That is because the stylesheet is using CSS3 Box Shadow to produce the drop shadow.
   -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); (for Firefox)

   Internet Explorer 8 and below do not support these CSS3 commands - IE9 does. Thus you can't make them work in IE7 and IE8.

   There are Javscript libraries you can add that emulate this in IE7 and IE8 but they have lists of conditions under which they don't work as intended.

   A commonly used approach is to use an IE7 and IE8 conditional stylesheet in which you style the appearance for IE7 and IE8 to your liking using CSS that works in IE7 and IE8, while visitors with more current browsers have a better visual experience on the same site.

3. LostRambler007
   Member
   Posted 11 months ago #

   Deat Stvwlf,
   Thanks for your reply, but I'm sorry that I wasn't clear as to the problem, although you might be right that there is no answer.

   I am interested rather to find out why the text (div?) doesn't drop down directly over the shadow, but rather shifts to the right on those same browsers that I mentioned. I haven't tried IE.

   Can I shift the box-shadow right to cover the text, or shift the text left, and how? Or, can I change the width of the ul.sub-menu to something smaller?

   Thanks for your help,
   David

   #access ul ul {
   	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
   	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
   	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
   	display: none;
   	position: absolute;
   	top: 38px;
   	left: 0;
   	float: left;
   	width: 180px;
   	z-index: 99999;
   #access ul ul li {
   	min-width: 150px;
   #access ul ul ul {
   	left: 50%;
   	top: 0;
   #access ul ul a {
   	background: #613836;
   	line-height: 1em;
   	padding: 5px;
   	width: 170px;
   	height: auto;
   	float: left;

Reply

You must log in to post.