Jump to content

Drop Shadow Issues In Ie

dbhynds

By dbhynds
in CSS

Recommended Posts

dbhynds Newbie

dbhynds

Posted
Posted

I'm using CSS to create a drop shadow on a site, and have run into some problems using IE 8 (haven't checked yet on older versions). You can take a look at the page here.Everything is working fine in Firefox. However, IE is adding too much space to the top and bottom of the image... 13 pixels on each side, to be precise.The drop shadow works using images (small gradients) stretched the height of the div. When I use the Developers Tools to check it out, it shows that the CSS correctly designates the size the div should be (img height + 7 for shadow). However, when I take a screenshot of the div selected in Developer Tools, and measure the height in Photoshop, the div is larger than the CSS says, so I know my math isn't off.Here is my HTML:

<html><head><LINK REL=StyleSheet HREF="style-core.css" TYPE="text/css" MEDIA=screen></head><body><div class="body"><div class="page-holder"><div class="column-4"><div class="adbox8"><img src="images-core/seminars.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox6"><img src="images-core/contact.jpg" /></div><div class="adbox7"><img src="images-core/blog.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox9"><div class="shadow-top"></div><img src="images-core/testimonials.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="header"><img src="images/header-core.jpg" /></div><div class="nav-holder"><div class="nav-right"><img src="images/nav-right.gif" /></div><div class="nav-left"><img src="images/nav-left.gif" /></div><div class="nav">Navigation</div></div><div class="column-1"><div class="adbox1"><div class="shadow-top"></div><img src="images-core/bio.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox2"><div class="shadow-top"></div><img src="images-core/video.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="column-2"><div class="adbox3"><div class="shadow-top"></div><img src="images-core/network.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox4"><div class="shadow-top"></div><img src="images-core/resources.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="column-3"><div class="adbox5"><div class="shadow-top"></div><img src="images-core/programs.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div></div></div></div><div class="footer"><div class="footer-holder"><div class="footer-left">Seaborne Leadership<br />Wendell Seaborne, Ph.D.</div><div class="footer-middle">317.750.2682<br /><a  href="mailto:wendell@seaborneleadership.com">wendell@seaborneleadership.com</a></div><div class="footer-right">PO Box 401<br />Fishers, IN 46038</div></div></div></body></html>

And here is my CSS:

/*Theme Name: Seaborne LeadershipTheme URI: [url="http://wordpress.org/"]http://wordpress.org/[/url]Description: Template for Seaborne Leadership.Version: 0.1Author: David HyndsAuthor URI: [url="http://hyndswebdesign.com/"]http://hyndswebdesign.com/[/url]Tags: blue, red, custom header, fixed width, two columns*//*Red: B41F24Blue: 1F53C9Light blue: F1F1F4Grey: 3C3C3C*/* {	margin: 0;	}html {	height: 100%;	}body {	font-size: 68.75%;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	color: #3C3C3C;	text-align: center;	margin: 0px;	width: 100%;	height: 100%;	}.body {	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto -47px;	background: url('images/bg-core.gif') repeat-x;	background-color: #D1DEEB;	}p {	font-size: 1em;	color: #3c3c3c;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	line-height: 1.375em;	margin-top: 1.5em;	margin-bottom: 0px;	}h1 {	font-size: 1.5em;	font-family: "Palatino Linotype", Palatino, "Times New Roman", Serif;	text-transform: uppercase;	color: #3c3c3c;	letter-spacing: 1px;	margin: 0;	}a:active, a:link {	font-size: .6875em	color: #B41F24;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: underline;	}a:hover {	font-size: .6875em	color: #FF0000;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: none;	}a:visited {	font-size: .6875em	color: #1F53C9;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: underline;	}a img {	border: 0px;	}.body-top {	width: auto;	}.header {	height: 185px;	width: 528px;	float: left;	}.nav-holder {	width: 527px;	background: url('images/nav-bg.gif') repeat-x;	background-color: #95BDE6;	float:left;	}.nav {	padding-top: 3px;	text-align: center;	font-weight: bold;	color: #B41F24;	right: 200px;	}.nav a {	font-size: .75em	color: #B41F24;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: none;	font-weight: bold;	}.nav-right {	background-color: #95BDE6;	width: 3px;	height: 22px;	float: right;	background: url('images/nav-right.gif')	}.nav-left {	background-color: #95BDE6;	width: 3px;	height: 22px;	float: left;	background: url('images/nav-left.gif')	}.page-holder {	width: 811px;	margin-left: auto;	margin-right: auto;	overflow: auto;	}.shadow-bottom {	background: url('images/shadow-bottom.gif') repeat-x;	height: 7px;	}.shadow-left {	background: url('images/shadow-left.gif') no-repeat;	width: 7px;	height: 7px;	float: left;	}.shadow-right {	background: url('images/shadow-right.gif') no-repeat;	width: 7px;	height: 7px;	float: right;	}.shadow-top {	background: url('images/shadow-top.gif') no-repeat;	width: 7px;	height: 7px;	float: right;	}.column-1 {	float: left;	}.adbox1 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	width: 144px;	height: 224px;	margin-top: 20px;	text-align: left;	}.adbox2 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	width: 144px;	height: 125px;	margin-top: 13px;	text-align: left;	}.column-2 {	float: left;	margin-left: 13px;	}.adbox3 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	margin-top: 20px;	width: 174px;	height: 99px;	text-align: left;	}.adbox4 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	margin-top: 13px;	width: 174px;	height: 251px;	text-align: left;	}.column-3 {	margin-left: 13px;	float: left;	}.adbox5 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	margin-top: 20px;	width: 190px;	height: 364px;	text-align: left;	}.column-4 {	float: right;	width: 277px;	}.adbox6 {	margin-top: 20px;	width: 135px;	height: 93px;	float: left;	text-align: left;	}.adbox7 {	margin-top: 13px;	width: 135px;	height: 194px;	float: left;	text-align: left;	}.adbox8 {	margin-top: 20px;	margin-left: 10px;	width: 132px;	height: 301px;	float: right;	text-align: left;	}.adbox9 {	background: url('images/shadow-side.gif') repeat-y;	background-position: right;	width: 277px;	height: 251px;	margin-top: 13px;	float: right;	text-align: left;	}.footer {	height: 26px;	width: auto;	background-color: #F1F1F4;	border-top: 1px solid #3C3C3C;	padding-top: 10px;	padding-bottom: 10px;	text-align: center;	}.footer a:active, a:link, a:visited {	color: #3c3c3c;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: none;	}.footer a:hover {	color: #3c3c3c;	font-family: Tahoma, Verdana, Arial, Sans-Serif;	letter-spacing: 1px;	text-decoration: underline;	}.footer-holder {	margin-left: auto;	margin-right: auto;	width: 641px;	}.footer-left {	padding-right: 50px;	color: #3C3C3C;	text-align: right;	float: left;	}.footer-middle {	padding-left: 50px;	padding-right: 50px;	border-right: 1px solid #3C3C3C;	border-left: 1px solid #3C3C3C;	text-align: center;	float: left;	}.footer-right {	padding-left: 50px;	color: #3c3c3c;	text-align: left;	float: left;	}

Any help would be greatly appreciated. I've been over it a dozen times, and can't see what I'm doing wrong.

Link to comment
Share on other sites
dbhynds Newbie

dbhynds

Posted
  • Author
Posted

Thanks for the suggestion. I tried it, and it half-way fixed it. It removed the extra space at the bottom, but the extra space at the top is still there. A little more help on it would be greatly appreciated.Unrelated (I think), you'll notice that adbox8 has some issues with the top. Anybody have a guess as to what the problem is here, too?The link again is: http://hyndswebdesign.com/test/page-core.htmlThe code should all be the same except with the font-size: 0px; added in to the CSSThanks!

Link to comment
Share on other sites
i_gresn Newbie

i_gresn

Posted
Posted

I have found and used two working solutions for creating css drop shadows. I always test my codes with both FF and IE, and these solutions work with both browsers.A. if you know the width&height of the image that is going to have the shadow

i) Create a div with a relative position as you base where width=image width+shadow width; and height=image height+shadow heightii) inside this div add:
  • bottom left corner (absolute position bottom left, width & height set)top right corner ( absolute position top right, width and height set) main shadow (absolute position right:0; bottom:0; and height:image height; width:image width;

iii) position your actual image on top left

B. if you don't know the measurements or use variable size pictures:

i) create a relative div as your baseii) inside this div add two other divs: top and bottom. Set them both e.g. height 50%, one positioned on top with background top right, and other positioned at the bottom with background bottom right. Use the same background image (L-shaped drop shadow), just make sure it is long enough to stretch the height of all pictures you are going to use.iii) add your image, position relative top left. Add margins to the image or padding in the base div so it won't hide your shadow.

Note: with B you must specify base div width though, because divs are block level and will stretch as much as they can by default.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...