Drop Shadow - IE7/Mozilla

[ascotta]

OK I have been pulling my hair out with this one for three days now. I have tried the png/gif tricks to no avail couldnt even get a pixel of a shaddow to display, I think it was the images I was using, but I know nothing about imaging software and how to use. Anyway I digress

I found that the old wrap 1 2 and 3 worked for me. However it doesnt work in Mozilla, and I cannot figure out why not.

<div id="main" style="width: 474px">
     <br />
<div class="wrap1">
 <div class="wrap2">
  <div class="wrap3">
  <div class="baframe1">
         <h1>Positions</h1>
          <hr class="babar" />
         <p style="text-align:justify;"> Enjoy working within an energetic team where you are valued and appreciated ? Then look no further !</p>
         <p style="text-align: justify"> Positions are available in our Bundaberg, Hervey Bay and Rockhampton Offices.<br />
          A team leadership role would be available for more experienced candidates.<br />
          Successful candidates will be dynamic, reliable, resourceful and able to work within an energetic team</p>
          <br />
         <p style="text-align:center"> To discuss current and future roles within our organisation, contact <br />
         <b>**********</b> on ********** or &nbsp; e-mail :
         <script type="text/javascript">
          <!--
               var contact = "Ivan";
               var email = "i*******";
               var emailHost = "**********";
               document.write("<a href='" + "mail" + "to:" + email + "@" + emailHost+ "'>" + contact + "</a>" +  ".")
          //-->
          </script></p>
     </div>
     </div>
     </div>
     </div>

Css

.baframe1
{
     padding: 4px;
     border-right: #bbffa7 1px outset; 
     border-top: 1px outset;
     border-left: 1px outset; 
     border-bottom: #bbffa7 1px outset; 
     background-color:  #eff5fe
}
wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  }
.wrap1 {
  float:left;
  background:url(//localhost/Testing area/Images/shadow.gif) right bottom no-repeat;
  }
.wrap2 {
  background:url(//localhost/Testing area/Images/corner_bl.gif) left bottom no-repeat;
  }
.wrap3 {
  padding:0 6px 6px 0;
  background:url(//localhost/Testing area/Images/corner_tr.gif) right top no-repeat;
  }

The divs continue and are closed, the page validates correctly as does the css, any suggestions are welcomed especially as the treble wrap seems such an inelegant method.

[blue] A perspective from the other side!![/blue]

Cheers
Scott

 

[ascotta]

OK I figured out the shadow. It only struck me when I viwed it on another computer from my own. One of those DOHHHHHHH moments.

I replaced the //localhost/Testing area/ for ../ and hey presto the shaddow appeared.

However the divs in mozilla or rather the panes I have lifted are now all a different width in mozilla whereas in IE they are uniform width, which is as I want.

I shall try and figure it out, but a pointer or two might save what follicles I have left.

[blue] A perspective from the other side!![/blue]

Cheers
Scott