Drop shadow effect

Ok, I’ve tried many combination with divs and classes and I got two results. Either the shadow doesn’t show, or only the shadow shows with no content. I don’t know what I’m doing wrong? Any help with coding, I would really appreciate it! Once again, thank you for your help already.

html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="distribution" content="global" />

<title>Big Game Fishing | BlacktipH Fishing</title>

<meta name="description" content="Big game fishing is a lifestyle. Blacktiph fishing is an international online fishing how hosted by joshua jorgensen, a big-game fishing enthusiast! We are also dedicated to fishing education with the hope that other anglers can enjoy the same adventures as we do." />

<meta name="keywords" content="fishing, big game, blacktip, black tip, blacktiph, black tiph, blacktip h, black tip h, blacktip hunter, blacktiph fishing, fishing show, show, tips, techniques, fishing tips, tips for fishing, fishing techniques, techniques for fishing, how, to, howto, how to, how to fish, fishing howto, shark, sharks, shark fishing, sharking, fishing for sharks, beach shark fishing, land-based shark fishing, shore shark fishing" />
 
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,projection,tv" />
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen,projection,tv" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]-->
<script type="text/JavaScript" src="curvycorners.src.js"></script>
<script type="text/javascript"> 
*//analytics//*
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17116591-5']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
<style type="text/css">
.myBox {
    width:765px;
    background-color: #fff;
 
    /* Do rounding (native in Opera, Firefox and Safari) */
    border-radius:20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
</style>
</head>
 
<body>
<div id="center"><div class="wrap">
 
<!-- Logo -->
	<div id="header">
		<a href="www.youtube.com/user/BlacktipH" alt="BlacktipH Fishing"><img src="bhf.jpg" alt="BlacktipH Fishing" width="410px" height="176px" /></a>
	</div>
	<div style="clear:both"></div>
 
<!-- Navigation Bar -->
	<div id="navbar">
		<div id="navleft">
			<ul id="nav">
				<li><a href="#">HOME</a></li>
				<li><a href="#">YOUTUBE</a></li>
				<li><a href="#">IMAGE GALLERY</a></li>
				<li><a href="#">TIPS & TECHNIQUES</a></li>
				<li><a href="#">CONTACT US</a></li>
				<br />
				<li><a href="#">ABOUT US</a>
					<ul>
						<li><a href="#">Our Mission</a></li>
						<li><a href="#">Our Partners</a></li>
					</ul>
				</li>
				<li><a href="#">FISHING REPORTS</a>
					<ul>
						<li><a href="#">Saltwater</a></li>
						<li><a href="#">Freshwater</a></li>
					</ul>
				</li>
				<li><a href="#">WEATHER</a></li>
				<li><a href="#">LINKS</a></li>
				<li><a href="#">FAQ</a></li>
			</ul>
		</div>
<!-- Google Search Bar -->
		<div id="navright">
		<form action="http://blacktiphfishing.org/" id="cse-search-box">
		  <div>
			<input type="hidden" name="cx" value="partner-pub-9169372183740683:1t820z-g3fv" />
			<input type="hidden" name="cof" value="FORID:10" />
			<input type="hidden" name="ie" value="ISO-8859-1" />
			<input type="text" name="q" size="15" />
			<input type="submit" name="sa" value="Search" />
		  </div>
		</form>
		<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
		</div>
		<div style="clear:both"></div>
		
<!-- Adsense Navbar -->
		<div id="adbar">
		<script type="text/javascript"><!-- 
		google_ad_client = "pub-9169372183740683"; 
		/* 468x15, created 12/6/10 */ 
		google_ad_slot = "0884561624"; 
		google_ad_width = 468; 
		google_ad_height = 15;//-->
		</script>
		<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
		</div>
	</div>
	
<!-- Content -->
	<div id="content">
	<div id="whitebox" class="myBox">
<!-- Information - Left Column -->
		<div id="leftcol">
			<h1>Welcome to BlacktipH Fishing</h1>
			<hr />
			<p class="bold">Our website is currently under construction.</p>
			
			<h3>Check Out Our YouTube Channel:</h3>
				<div><a href="www.youtube.com/user/BlacktipH" alt="BlacktipH Fishing Channel"><img src="youtube.jpg" alt="YouTube - BlacktipH Fishing" width="136px" height="75px" /></a></div>
				
				<p class="bold">LINK -->	<a href="www.youtube.com/user/BlacktipH" alt="BlacktipH Fishing Channel">www.youtube.com/user/BlacktipH</a></p>
			<br />
			
			<h3>About Us</h3>
			<p>BlacktipH Fishing is an international fishing show dedicated to big game fishing in both freshwater and saltwater territories. We also are dedicated to fishing education with the hope that other anglers can enjoy the same adventures as we do. BlacktipH Fishing is full of a variety of fishing adventures from monster sharks in Florida to muskies in Canada.</p>
			
			<p>Our host, Joshua Jorgensen, grew up fishing in Canada on Lake St. Clair. As his hunt for big fish expanded, he moved to saltwater fishing in pursue of sharks and other large pelagic predators. He is the founder and director of both the "Blacktip Challenge Shark Fishing Tournament" and the "Muskie Challenge Fishing Tournament". Jorgensen is a lead committee member of the ILSFA (International Land-Based Shark Fishing Association). His fishing adventures have been featured in numerous media articles, including: Global Angler, Spiegel TV, Spiegel Magazine, Sun Newspapers and Living Magazine.</p>
			
			<p class="bold">So sit back and get ready for some wild adventures with BlacktipH Fishing!</p>
		
<!-- Adsense right -Column -->
		<div id="rightcol">
			<script type="text/javascript"><!--
			google_ad_client = "pub-9169372183740683";
			/* 120x600, created 12/6/10 */
			google_ad_slot = "6108415648";
			google_ad_width = 120;
			google_ad_height = 600;
			//-->
			</script>
			<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
		</div>
		<div style="clear:both"></div>
	</div>
	</div>
	
<!-- Search Results -->
	<div>
		<div id="cse-search-results"></div>
		<script type="text/javascript"> 
		var googleSearchIframeName = "cse-search-results";
		var googleSearchFormName = "cse-search-box";
		var googleSearchFrameWidth = 800;
		var googleSearchDomain = "www.google.com";
		var googleSearchPath = "/cse";
		</script>
		<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
	</div>
	
<!-- Copyright -->
	<div id="footer">Copyright &copy; 2010 - BlacktipH Fishing - All rights reserved - Designed by 
	Joshua Jorgensen</div>
</div></div>
</body>
</html>

ie.css


.wrap {
    display: block;
    position: absolute;
    top:5px; left:5px;
	width:830px;
    z-index: -100px;
    background: #000;
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}

screen.css


/* img, a */
img,fieldset {border:none}
a {cursor:hand}

.rounded {
  -moz-border-radius:3ex;
  -webkit-border-radius:3ex;
} 

/* Body, Center, Wrap */
body {
	font: 13px Verdana, Geneva, sans-serif;
	text-align:center;
	background-color:#C8C8C8; color:#000;
	vertical-align:text-top;
	padding: 10px 0px;
	cursor:auto;
}
#center {
	margin-left: auto; margin-right: auto;
 	width:825px;
}
.wrap {
  width: 825px;
  background-color:#C8C8C8;
  -moz-box-shadow: 0 0 15px black;
  -webkit-box-shadow: 0 0 15px black;
  box-shadow: 0 0 15px black;
  margin: 10px auto;
}

/* Header, Navigation */
#header {
	background: #000;
}

#navbar {
	display:block;
	background:#000; color:#FFF;
	text-align:center;
	padding:0; margin:0;
	border:#000 solid 10px;
}
#navleft {
	float:left;
}
#navright {
	float:right;
}
#adbar {
	min-height: 17px;min-width: 470px;
	text-align:center;
	padding-top:10px;
}

/* Content */
#content {
	text-align:left;
	background:#000;
	border: #000 solid 10px;
	line-height:15px;
}
#whitebox {
	background:#FFF;
	padding:20px;
}
#leftcol {
	float:left;
	padding:15px;
	width:570px;
}
#rightcol {
	margin-left:605px; padding:15px;
	width:150px;
	min-height: 700px;
}

/* Text */
h1 {color:#707070}
h3 {color:#0099FF}
.bold {font-weight:bold}

/* Footer */
#footer {
	background:#000;
	color:#FFF;
	font-size:12px;
	line-height:25px;
	padding: auto auto;
	vertical-align:middle;
	padding-bottom: 7px;
}

style.css


body{
text-align:center;
cursor:hand;
}

#nav, #nav ul{
width:100%;
margin:0; padding:0;
list-style-type:none; list-style-position:outside;
position:relative;
line-height:25px;
z-index:30;
}

#nav a{
width:117px;
margin-right:2px;
display:block;
font:bold 10px Verdana, Geneva, sans-serif; text-decoration:none;
background:#000; color:#FFF;
font-size:10px; text-decoration:none;
line-height:25px;
}

#nav a:hover{background:#404040 scroll no-repeat center; color:#FFF}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:110px;
top:25px; left:5px;
}

#nav li ul a {
padding-left:10px;
width:120px; height:auto;
float:left;
text-align:left;
line-height:25px;
z-index:30;
background:#C8C8C8; color:#000;
}

#nav ul ul {
top:auto;
}	

#nav li ul ul {
left:110px;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block}

I’m still using your live link above. Could you update that? It doesn’t have the conditional comment in the head:

<!–[if IE]><link rel=“stylesheet” type=“text/css” href=“css/ie.css”><![endif]–>

The link is live. Also I have question about the google adsense search bar in the navigation section. In every browser except IE, there are two rows but in IE there are 3 rows? I tried making the adsense bar smaller in width, but nothing happened. Do you know why this is happening?

Firstly to the ie stylesheet:

you’ve now removed the .ie-shadow class, but you still reference it in the ie stylesheet. move those styles to .wrap instead. You need to think these moves out clearly and methodically.

The search box is dropping because the UL above it is full width in IE.

Add the line in red:

#navleft {
	float:left;
        [COLOR="Red"]width:595px;[/COLOR]
}

I apologize, the css file was the old one. Thank you for your help, it’s greatly appreciated! I deleted the .ie-shadow in screen.css. I also deleted that class in ie.css and combined the styles with .wrap

I got a huge error, the entire page is one huge shadow in IE.

Here is the updated link:

http://rigstock.com/blacktiph_2/

ie.css:

.wrap {
  width: 825px;
  background-color:#C8C8C8;
  margin: 10px auto;
  display: block;
  position: absolute;
  top:5px; left:5px;
  z-index: -100px;
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}

I don’t know what I’m doing wrong? Is the problem the filter style in ie.css?

Hmm, position: absolute is causing everything to move left, so either remove that or use position: relative instead.

But yes, the filter is blocking out everything else. I don’t know how filter is meant to work, but wouldn’t use it myself. You could either use images for this, or you could use some JavaScript instead to get the shadows on IE:

http://css3pie.com/
http://dimox.net/cross-browser-css3-box-shadow/

Thank you so much for the links, God Bless you!! :slight_smile: