Jump to content
Sign in to follow this  
dbhynds

Drop Shadow Issues In Ie

Recommended Posts

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.

Share this post


Link to post
Share on other sites

problem maybe due to IE allowing for the font height within these divs. try setting the font size to zero font-size:0px; within the adbox divs.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

to correct top shadow do the same and zero the font-size, the problem with IE is with the <div class="shadow-gradient-1"/>, it is forcing down the image.

Share this post


Link to post
Share on other sites

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.

Edited by igresn

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...