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..?