Shadows are different between IE and Mozilla

[ralphtrent]

hello
Can you please view this link in IE and Mozilla ( i am using firefox but I think mozilla is the same). the drop shadow is not working in fire fox but is in IE. Why?

Here is the CSS code for the Drop Shadow:

span.SlideShowAShadow
{ position: absolute;
top: 56px;
left: 116px;
width:350;
height:263;
filter: shadow(color=ivory, direction=300);
border-style:solid;
border-width:1;
border-color:ivory;
}

Can someone help?

Thanks - Ralph

 

[ralphtrent]

Sorry, here is the link:

http://www.aonj.com/ralph/

 

[manarth]

the drop shadow is caused by:
filter: shadow(color=ivory, direction=300);

This is not an official property. Microsoft's filter reference page specifies countless times "requires IEx."

Oh, your CSS needs validating: it's missing the units on the width, height and border.
You can also write the border in shorthand:
border: 1px ivory solid;

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[ralphtrent]

Marc
I understand what you are saying and realize that is the problem (I found the filter code else where the an MSFT site so did not know that when I wrote it). But Now I have taken out the filter and using this:
span.SlideShowsBorder
{position: absolute;
top: 50px;
left: 495px;
width:355;
height:263;
background: #CCCC99;
border-style:thin;
border-width:1;
border-color:ivory;
z-index:-1;
}
Again works great in IE but not FireFox, is this also not supported.
Also I have <span class="whatever"><a href"...">text</a></span>
The span css is working but the links are not clickable. Any idea's with that?

Thanks
Ralph

 

[manarth]

your code:

<span class="SlideShowsA">
  <a href="./index.asp?imgLocation=a" id="SlideShowLink">
    <li>
      Rocky Mountain National Park | 58 images
    </li>
  </a>
  <hr class="SlideShowLinks">
</span>

<li> tags are block-level elements, which means they cannot be placed inside an <a> tag. The correct markup is

 <li>
   <a...>
     link test
   </a>
 </li>

As someone who appreciates FireFox, you'll probably appreciate the idea of coding to standards...as in: web standards.
To achieve this, you need to start the page off with a DTD (DocType Definition), and the HTML code has to comply with the definition.

You can check if your HTML validates using the W3C HTML validor: [URL unfurl="true"]http://validator.w3.org/[/url]

You can check if your CSS validates using: [URL unfurl="true"]http://jigsaw.w3.org/css-validator/[/url].

FireFox is a standards based browser: provided the markup is valid, it will render similarly (near identically) in all other standards compliant browsers.


You can spend ages rummaging through code to try and find why something isn't working - but the first step is always to make sure the code is valid. If it isn't, fix the code - then see if the problem is still there.

Good luck

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]