Trying a drop shadow design, IE won't let me.

Henrik Hansen · #1 Sep 21st, 2007, 20:23

Hi! I'm trying to develop a new design for a webpage of mine. I've come a bit on the way, but IE is giving me trouble. Maybe someone in here has an answer to my questions.

The main function of the site is to put a nice drop shadow around my photo. The site must be able to cope with different sized photos. My site will be written in php and the script can output the size of the photo if needed.

For my design, I have used some help from here: http://www.floatinginspace.za.org/cssshadow/

My developing site can be found here:
http://www.henrikhansen.se/csstest/

This is the HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" media="all" href="shadow.css" />
  <title>Dynamic css box with shadow</title>
  <style type="text/css">
   div.container {
    width: 900px;
   }
   div.containerw {
    height: 100%;
   }
   div.content {
    height: 100%;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="tlc"></div><div class="tll"></div><div class="tlt"></div>
   <div class="trc"></div><div class="trr"></div><div class="trt"></div>
   <div class="blc"></div><div class="bll"></div><div class="blb"></div>
   <div class="brc"></div><div class="brr"></div><div class="brb"></div>
   <div class="containerh">
    <div class="containerw">
     <div class="t"></div><div class="b"></div>
     <div class="l"></div><div class="r"></div>
     <div class="content">
      <img src="bild.jpg" alt="" width="900" height="603" />
      <p>I need room for a couple of lines of text here..</p>   
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

This is the css:

Code: Select all

body {
 font-family: verdana,sans-serif;
 text-align: center;
 font-size: 13px;
 background-color:#66635d;
}
p {
 text-align: left;
 color: #000000;
}
div.container {
 background-color: transparent;
 margin: 20px auto;
 padding: 0 10px;
 position: relative;    
}
div.containerh {
 padding: 10px 0;
 background-color: transparent;
 margin: 0;
 position: relative;
}
div.containerw {
 background-color: transparent;
 padding: 1px 0;
 margin: 0 0;
 position: relative; 
}
div.content {
 background-color: #FFFFFF;
 padding: 10px 0 10px 0;       /*adjust padding if you set the height*/
 margin: -11px -10px -11px -10px;
}
div.l {
 width: 20px;
 height: 100%; 
 background-image: url(shadowlr.png);
 background-repeat: repeat-y;
 background-color: transparent;
 background-position: 0 0;
 position: absolute; 
 left: -30px; 
 top: 0;
}
div.r {
 width: 20px;
 height: 100%; 
 background-image: url(shadowlr.png);
 background-repeat: repeat-y;
 background-color: transparent;
 background-position: -20px 0;
 position: absolute; 
 right: -30px; 
 top: 0;
}
div.t {
 width: 100%;
 height: 20px; 
 background-image: url(shadowtb.png);
 background-repeat: repeat-x;
 background-color: transparent;
 background-position: 0 0;
 margin: 0 0;
 position: absolute; 
 left: 0; 
 top: -30px; 
}
div.b {
 width: 100%;
 height: 20px; 
 background-image: url(shadowtb.png);
 background-repeat: repeat-x;
 background-color: transparent;
 background-position: 0 -20px;
 margin: 0 0; 
 position: absolute; 
 left: 0; 
 bottom: -30px;  
}
div.tlt {
 width: 10px;
 height: 20px; 
 background-image: url(shadowlttbb.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 0;
 position: absolute; 
 left: 0; 
 top: -20px;
}
div.trt {
 width: 10px;
 height: 20px; 
 background-image: url(shadowrttbb.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 0;
 position: absolute; 
 right: 0; 
 top: -20px;
}
div.tlc {
 width: 20px;
 height: 20px; 
 background-image: url(shadowc.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 0;
 position: absolute; 
 left: -20px; 
 top: -20px;
}
div.trc {
 width: 20px;
 height: 20px; 
 background-image: url(shadowc.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: -20px 0;
 position: absolute; 
 right: -20px; 
 top: -20px;
}
div.tll {
 width: 20px;
 height: 10px; 
 background-image: url(shadowtllrr.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 0;
 position: absolute; 
 left: -20px; 
 top: 0;
}
div.trr {
 width: 20px;
 height: 10px; 
 background-image: url(shadowtllrr.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: -20px 0;
 position: absolute; 
 right: -20px; 
 top: 0;
}
 
div.bll {
 width: 20px;
 height: 10px; 
 background-image: url(shadowbllrr.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 0;
 position: absolute; 
 left: -20px; 
 bottom: 0;
}
div.brr {
 width: 20px;
 height: 10px; 
 background-image: url(shadowbllrr.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: -20px 0;
 position: absolute; 
 right: -20px; 
 bottom: 0; 
}
div.blc {
 width: 20px;
 height: 20px; 
 background-image: url(shadowc.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 -20px;
 position: absolute; 
 left: -20px; 
 bottom: -20px;  
}
div.brc {
 width: 20px;
 height: 20px; 
 background-image: url(shadowc.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: -20px -20px;
 position: absolute; 
 right: -20px;
 bottom: -20px; 
}
 
div.blb {
 width: 10px;
 height: 20px; 
 background-image: url(shadowlttbb.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 -20px;
 position: absolute; 
 left: 0; 
 bottom: -20px;  
}
div.brb {
 width: 10px;
 height: 20px; 
 background-image: url(shadowrttbb.png);
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 0 -20px;
 position: absolute; 
 right: 0;
 bottom: -20px; 
}
div.clear {
 clear: both;
}
table.counter{
    margin: 0 auto;
}
.center {
 text-align: center;
}
img {
 border: 0 none;
}

Does anyone have any ideas on how I can work my way around this problem?

EDIT: Should I mention that the site looks perfect in Opera and Firefox..?

Marc · #2 Sep 21st, 2007, 20:31

Let me give youa tip to start off... You know how you have "background-repeat: no-repeat;
background-color: transparent;" In nearly every class/id.... you could just do this:

Code: Select all

 * {
 background-repeat: no-repeat;
 background-color: transparent;
}

That means you dont need to put these two things anywhere else unless you wanted to change them and i would just do this as so:

Code: Select all

 container{
 background-repeat: repeat;
 background-color: #0000;
}

That would save alot of work

(although it doesnt solve your problem... lemme see!)

EDIT: Is this not the same type of problem as this? http://www.webforumz.com/css-forum/6...-a-picture.htm

Henrik Hansen · #3 Sep 21st, 2007, 20:44

Hi! Thanks for the quick reply and the point with transparency and no-repeat.

I checked the thread you suggested. I actually checked it before I posted the topic too, but it doesn't solve my problem. I can't do it in photoshop because I'm going to use php with my site and photos. Even more I will place text and buttons underneath the image, but inside the container. Kinda lika a polaroid photo with some things scrabbled under the photo.

Marc · #4 Sep 21st, 2007, 20:58

Mabey you should try the PHP forum?

Henrik Hansen · #5 Sep 21st, 2007, 21:01

Quote:

Originally Posted by Marc

Mabey you should try the PHP forum?

I have all the php I need. The problem is that I cant get the div:s to work properly in IE.

MikeHopley · #6 Sep 22nd, 2007, 22:25

Note that IE6 does not have native support for transparent PNGs.

Try my tutorial on this (coming in the October newsletter).

AdRock · #7 Sep 23rd, 2007, 22:25

I added a reply in the other topic as mentioned in a previous post here and that works perfectly for any size image...cehck it out...i included the neccessary images and CSS

Henrik Hansen · #8 Sep 26th, 2007, 18:29

Interesting. I will try it when I get some time!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS drop shadow effects with images	wickedmoon	Web Page Design	2	Aug 26th, 2007 22:01
Expanding background drop shadow	konnor5092	Web Page Design	1	Feb 22nd, 2007 07:39
drop shadow??	karloff	Graphics and 3D	7	Aug 4th, 2006 14:08
Need help Short Cut Keys on Drop Shadow in Fireworks	csun	Graphics and 3D	1	Jul 7th, 2006 13:23
Drop Shadow w/fireworks	liquid	Graphics and 3D	4	Dec 24th, 2003 09:15

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Trying a drop shadow design, IE won't let me.