PDA

View Full Version : Gradient Shadow Script on Firefox



gusgus
09-10-2009, 02:58 PM
1) Script Title: Gradient Shadow Script

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/P30

3) Describe problem: Love this on IE but on firefox it shows the shadow out to the left and top to a much greater degree than well...:eek:

I am using this to shadow an entire white page on an image background that shows 10% on right and left sides.

Any suggestions? If it were up to IE I'd be quite happy but many folks complain to me when something on the site fails in firefox.

Script alteration or fix suggestions? Thanks for being here...best option on the web!

About pure css shadows: The shadow options I've seen in pure css are not true shadows and just make a intrusion on my image page background.

gusgus
09-10-2009, 04:28 PM
I've labored over this so much...but the example does work in FF. I must have something conflicting in my style sheet....but no...here is the complete code from my practice page. Would someone please take the time to look at it in FF and tell me what is wrong?

What you see below is a page containing the complete java script and original css for the shadow and my html sample text with a basic page style added.


<html>
<head>
<script type="text/javascript">

var gradientshadow={}
gradientshadow.depth=6 //Depth of shadow in pixels
gradientshadow.containers=[]

gradientshadow.create=function(){
var a = document.all ? document.all : document.getElementsByTagName('*')
for (var i = 0;i < a.length;i++) {
if (a[i].className == "shadow") {
for (var x=0; x<gradientshadow.depth; x++){
var newSd = document.createElement("DIV")
newSd.className = "shadow_inner"
newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth)
if (a[i].getAttribute("rel"))
newSd.style.background = a[i].getAttribute("rel")
else
newSd.style.background = "black" //default shadow color if none specified
document.body.appendChild(newSd)
}
gradientshadow.containers[gradientshadow.containers.length]=a[i]
}
}
gradientshadow.position()
window.onresize=function(){
gradientshadow.position()
}
}

gradientshadow.position=function(){
if (gradientshadow.containers.length>0){
for (var i=0; i<gradientshadow.containers.length; i++){
for (var x=0; x<gradientshadow.depth; x++){
var shadowdiv=document.getElementById("shadow"+i+"_"+x)
shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px"
shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px"
shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px"
shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", gradientshadow.create, false)
else if (window.attachEvent)
window.attachEvent("onload", gradientshadow.create)
else if (document.getElementById)
window.onload=gradientshadow.create

</script>

<style type="text/css">
body

{
background: url("http://www.geoodyssey.com/THS/images/sand-stone.jpg") repeat;
}

.page_container

{
background: url("http://www.geoodyssey.com/THS/images/RECYCLED.jpg") repeat;
margin-left: 5%;
margin-right: 5%;
height: 100%;
padding: 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #000000;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.shadow{
border:1px solid silver;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}

.shadow_inner{
overflow:hidden;
position:absolute;
top: -1000px;
filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
opacity:0.1; /*firefox 1.5 opacity*/
-moz-opacity:0.1; /*mozilla opacity*/
-khtml-opacity:0.1; /*opacity*/
z-index:10
}

</style>



<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p class="shadow" style="display: block" rel="red">This is some paragraph.

<p>
<div class="shadow">
<div class="page_container">

<h1>THS</h1>

</div>
</div>
</body>
</html>

gusgus
09-10-2009, 07:23 PM
Well, I rebuilt it all starting with the paragraph example, changing it to a div id and making sure I had display block. Don't know why this all gets so hard 24 hours on something so basic, but thanks for you patience....problem appears solved.