progid:DXImageTransform.Microsoft.Shadow Not around the Div in IE 8

4 replies [Last post]

Thu, 2012-07-26 18:59

EsorOne

Offline

Regular

Last seen: 9 years 48 weeks ago

Timezone: GMT+2

Joined: 2005-12-09

Posts: 30

Points: 9

Hello,

I'm trying to create a box-shadow alternative for IE8.0. But something weird is happening.

I created a div called "div "schaduw_ie"". I also use modernizer. So in my css file I use: .no-boxshadow .schaduw_ie {bla bla}

I Actually see the shadow, but a lot smaller than the div.

I checkt with developers program in IE the DIV. When I select this class I see a blue border. And this is the actual blue border and the expected div size. But the shadow is a lot smaller.

I also tried ie-css3.htc, But this did not suit my needs.

Does someone know the trick to achieve a shadow around this div, like shown in Firefox?

I have 3 screenshot. 2time Internet Explorer. One with DXIimage checkt and one unchecked and a FF sample what I try to achieve.

thumb_Screen Shot 2012-07-26 at 8.29.19 PM.png

Thanks in advance!!!

I'm still developing so here is the ugly code.

<?php
/**
 * @version		Nadine 1.17
 * @copyright	
 * @license		
 */
 
defined('_JEXEC') or die;
 
/* The following line loads the MooTools JavaScript Library */
JHTML::_('behavior.framework', false);
 
/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
 
/* Template variables */
$interactText = $this->params->get('interactText');
$templateColor = $this->params->get('templateColor');
 
 
/*aanpassingen tbv Blank en Default */
$doc = JFactory::getDocument(); 
$tpath = $this->baseurl.'/templates/'.$this->template;
$this->setGenerator(null);
 
// load sheets and scripts
$doc->addStyleSheet($tpath.'/css/template.css.php?v=1.0.0'); 
 
// unset scripts in head and put them to the end of the page (before </body>) for better page loading
unset($doc->_scripts[$this->baseurl.'/media/system/js/core.js']);
unset($doc->_scripts[$this->baseurl.'/media/system/js/mootools-core.js']);
unset($doc->_scripts[$this->baseurl.'/media/system/js/caption.js']);
$scripts  = '<script src="'.$this->baseurl.'/media/system/js/core.js" type="text/javascript"></script>';
$scripts .= '<script src="'.$this->baseurl.'/media/system/js/mootools-core.js" type="text/javascript"></script>';
$scripts .= '<script src="'.$this->baseurl.'/media/system/js/caption.js" type="text/javascript"></script>';
?>
 
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!doctype html>
<!--[if IEMobile]><html class="iemobile" lang="<?=$this->language?>"> <![endif]-->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="<?=$this->language?>"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="<?=$this->language?>"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="<?=$this->language?>"> <![endif]-->
<!--[if IE 8]>  <html class="no-js" lang="<?=$this->language?>"> <![endif]-->
<!--[if IE]>
   <style type="text/css">
      .omlijsting { behavior: url(<?=$tpath?>/js/ie-css3.htc); }
   </style>
<![endif]-->
 
 
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $templateColor;?>.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/overide.css" type="text/css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" media="only screen and (max-width: 768px)" href="<?=$tpath?>/css/tablet.css" type="text/css" />
	<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px)" href="<?=$tpath?>/css/phone.css" type="text/css" />
	<!--[if IEMobile]><link rel="stylesheet" media="screen" href="<?=$tpath?>/css/phone.css" type="text/css" /><![endif]--> <!-- iemobile -->
	<link rel="apple-touch-icon-precomposed" href="<?=$tpath?>/apple-touch-icon-57x57.png"> <!-- iphone, ipod, android -->
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?=$tpath?>/apple-touch-icon-72x72.png"> <!-- ipad -->
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?=$tpath?>/apple-touch-icon-114x114.png"> <!-- iphone retina -->
	<!--[if lte IE 8]>
		<style> 
			{behavior:url(<?=$tpath?>/js/PIE.htc);}
		</style>
	<![endif]-->
 
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>	
        <?php $doc->addScript($tpath.'/js/modernizr.js');
 
 
 
		<!-- Einde aanpassing tbv default template -->
 
</head>
<body>
	<div id="topBar">
		<div id="topWrapper">
		<?php if($this->countModules('header')) : ?>
			<div id="header">
					<jdoc:include type="modules" name="header" style="xhtml"/>
			</div>
		<?php endif; ?>		
		</div>						
	</div>
 
 
 
 
	<div id="mainContainer">
            <div class="schaduw_ie">
 
 
		<div id="mainWrapper">
 
			<?php if($this->countModules('topNav')) : ?>
				<div id="topNav">
						<jdoc:include type="modules" name="topNav" style="xhtml"/>
				</div>
			<?php endif; ?>
			<?php if($this->countModules('search')) : ?>
				<div id="search">
						<jdoc:include type="modules" name="search" style="xhtml"/>
				</div>
			<?php endif; ?>			
			<?php if ($this->countModules( 'mainTop or mainsplit' )) : ?>
		<div id="main">		
 
 
 
                        <?php if ($this->countModules( 'mainTop xor mainsplit' )) : ?>
              <div class="mainTop">
                       <jdoc:include type="modules" name="mainTop" style="xhtml" />
                      <jdoc:include type="component" />
             </div>
                    <?php endif; ?>
 
 
			  <?php if ($this->countModules( 'mainTop and mainsplit' )) : ?>
 
	     <div id="mainsplit">
					<div class="left"> <jdoc:include type="modules" name="mainTop" style="xhtml" />
					<jdoc:include type="component" /> </div>
					<div class="right">   <jdoc:include type="modules" name="mainsplit" style="xhtml"/> </div>	      
					</div>
			  <?php endif; ?> 
 
			  	<?php endif; ?> 
 
 
 
			  <?php if ($this->countModules( 'mainBottom' )) : ?>
				  <div class="mainBottom">
				  <jdoc:include type="modules" name="mainBottom" style="xhtml" />
				  </div>
			  <?php endif; ?></div>
 
 
 
 
 
 
 
			<div id="footer">
				<?php if($this->countModules('footer')) : ?>
	  	 			<jdoc:include type="modules" name="footer" style="xhtml"/>
				<?php endif; ?>		</div>	
 
 
 
			</div>  
 
			</div> <!-- DIV Schaduw IE -->
 
 
		</div>			
 
		</div><div id="copyright">
			<p>&copy;<?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>.
			<?php if ($showAuthor == <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />:?>
				 <a href="#">   |   Copyright 2012</a>.
			<?php endif; ?>
			</p>
		</div>	
 
	<jdoc:include type="modules" name="debug" />
	<?=$scripts?>
 
 
 
 
 
 
 
</body>
</html>

CSS default.css

body,div,span,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,label,input,textarea,p,th,td {
margin:0;
padding:0;
}
 
#topBar {
background:0 color-stop(100%,#111));
width:100%;
height:600px;
border-bottom:0;
}
 
#header {
width:960px;
padding-top:15px;
margin:15px 0 0;
}
 
#topWrapper {
width:960px;
height:150px;
margin:0 auto;
}
 
#topNav {
width:600px;
height:40px;
display:block;
margin:0 40px 0 0;
}
 
#mainContainer {
width:100%;
}
 
#mainWrapper {
width:960px;
min-height:500px;
-moz-box-shadow:3px 3px 10px #888;
-webkit-box-shadow:3px 3px 10px #888;
box-shadow:3px 3px 10px #888;
z-index:-999;
margin:0 auto;
padding:5px 0;
}
 
.no-boxshadow .schaduw_ie {
width:959px;
height:100%;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);
margin:0 auto;
padding:6px 0;
}
 
.moduletableshadow_footer {
position:relative;
background-color:#fff;
padding:10px;
}
 
#main {
width:960px;
float:left;
}
 
#footer {
clear:both;
width:100%;
padding-top:21px;
display:block;
}
 
body {
font-size:14px;
line-height:21px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
 
h1,h2,h3,h4,h5,h6 {
color:#000;
font-family:Georgia, Times, "Times New Roman", serif;
}
 
h1,h2,h3,h4,h5,h6,p,blockquote,pre {
line-height:21px;
margin-bottom:21px;
}
 
h1 {
font-size:24px;
line-height:42px;
margin-bottom:21px;
}
 
h2 {
font-size:21px;
}
 
h3 {
font-size:18px;
}
 
h4 {
font-size:16px;
}
 
h5 {
font-size:14px;
}
 
h6 {
font-size:12px;
}
 
p {
font-family:Verdana;
color:#fff;
}
 
blockquote {
border-left:4px solid #CCC;
background:#FFFFFE;
padding:20px;
}
 
pre {
width:100%;
overflow:auto;
background:#fbf8f1;
border:solid 1px;
border-color:#999 #FFF #FFF #999;
}
 
fieldset {
margin-bottom:21px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
padding:20px;
}
 
#copyright {
color:#666;
font-size:10px;
width:100%;
margin-top:25px;
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
}
 
#main ol,#main ul,#main dl {
margin:0 0 21px 21px;
}
 
a:hover {
color:#777;
}
 
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
text-decoration:none;
}
 
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {
text-decoration:underline;
}
 
#topNav .menu {
list-style:none;
}
 
#topNav .menu li a {
color:#000;
text-decoration:none;
height:45px;
line-height:60px;
display:block;
font-weight:700;
padding:0 20px;
}
 
#topNav .menu li a:hover {
background:url(../images/hover.jpg);
}
 
#footer .menu {
list-style:none;
width:600px;
height:21px;
display:block;
}
 
#search .inputbox {
background:#EFEFEF;
border:1px solid;
width:238px;
height:23px;
line-height:21px;
margin-top:13px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
outline:none;
text-indent:10px;
border-color:#000 #CCC #CCC #000;
}
 
#search .inputbox:focus {
background:#FFF;
}
 
#search .button {
border:none;
height:25px;
width:80px;
background:url(../images/interact.png) no-repeat -243px 0;
margin-top:13px;
}
 
#search .button:hover {
background-position:-243px -30px;
cursor:pointer;
}
 
#main .word .button {
float:left;
margin-top:7px;
}
 
#main fieldset {
width:558px;
}
 
#main .phrases-box input,#main .only input {
float:left;
clear:left;
width:30px;
}
 
#main .phrases-box label,#main .only label {
float:left;
clear:none;
margin-top:7px;
}
 
#main .ordering-box select {
float:left;
clear:left;
}
 
#main .form-limit label {
margin-top:0;
}
 
#main .form-limit select {
float:left;
margin-left:10px;
}
 
#main .search-results {
clear:both;
margin:0;
padding:21px 0 0;
}
 
.search-results dt {
font-size:21px;
font-weight:700;
margin:21px 0;
}
 
.search-results .result-category,.search-results .result-created {
color:#333;
font-size:10px;
}
 
#main .pagination ul {
list-style:none;
margin:0;
padding:0;
}
 
#main .pagination .pagenav {
border:1px solid;
display:block;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:0 color-stop(100%,#CCC));
text-shadow:#FFF 1px 1px 1px;
border-color:#999 #333 #333 #999;
padding:10px;
}
 
#main .pagination span.pagenav {
color:#999;
}
 
#main .pagination a.pagenav {
text-decoration:none;
font-weight:700;
}
 
#main .pagination a.pagenav:hover {
color:#000;
background:0 color-stop(100%,#CCC));
border-color:#333 #FFF #FFF #333;
}
 
#main .article-info {
margin-left:0;
}
 
#main .article-info-term {
display:none;
}
 
#main .article-info dd {
font-size:10px;
color:#777;
}
 
#mainsplit {
background-color:RED;
heigt:400px;
width:100%;
}
 
#mainsplit .left {
background-color:#FF0;
heigt:400px;
width:300px;
float:left;
}
 
#mainsplit .right {
background-color:green;
heigt:400px;
width:600px;
float:right;
}
 
.mainTop {
heigt:478px;
max-height:478px;
width:960px;
float:left;
overflow:hidden;
}
 
.mainBottom {
background-color:purple;
width:960px;
clear:both;
top:300px;
height:100px;
position:relative;
overflow:hidden;
}
 
.divider {
border-bottom:1px solid thin;
}
 
#sidebar .moduletable {
margin-top:42px;
}
 
#interact {
list-style:none;
height:63px;
margin-bottom:21px;
}
 
#interact .rss,#interact .facebook,#interact .twitter,#interact .email {
background:url(../images/interact.png) no-repeat 1px 1px;
width:55px;
height:55px;
display:block;
}
 
#interact .rss:hover {
background-position:1px -59px;
}
 
#interact .facebook {
background-position:-60px 1px;
margin-left:33px;
}
 
#interact .facebook:hover {
background-position:-60px -59px;
}
 
#interact .twitter {
background-position:-120px 1px;
margin-left:33px;
}
 
#interact .twitter:hover {
background-position:-120px -59px;
}
 
#interact .email {
background-position:-180px 1px;
margin-left:34px;
}
 
#interact .email:hover {
background-position:-180px -59px;
}
 
#chronoform_contact {
width:330px;
}
 
#autoID-8c6c6b154b1f2d0c47e10ce572a1fc86_container_div {
width:150px;
}
 
.float-right {
float:right;
}
 
.group:before,.group:after {
content:"";
display:table;
}
 
.group:after {
clear:both;
}
 
#search,#sidebar {
width:320px;
float:right;
clear:none;
}
 
ul,ol {
list-style-position:inside;
}
 
legend,#main .pagination .counter {
font-weight:700;
}
 
a,a:visited {
color:#000;
}
 
#topNav .menu li,#interact li,.float-left {
float:left;
}
 
#footer .menu li,#main .pagination li {
float:left;
margin-right:10px;
}
 
.ie6 .group,.ie7 .group {
zoom:1px;
}

CSS Override

/*Override */
 
#topBar {
background:#fff;
height:100%;
}
 
#main {
background-image:url(../images/article_bg.jpg);
height:478px;
width:960px;
}
 
.blog-featured_main {
background-image:url(../images/article_bg_white.jpg);
height:478px;
width:960px;
padding-top:5px;
}
 
.item-page p,.item-pagecontact p {
font-weight:700;
color:#000;
}
 
.item-pagecontact a {
padding-left:4px;
}
 
.pagenav {
float:left;
width:600px;
position:absolute;
top:700px;
font-family:Verdana;
font-size:12px;
color:#333;
}
 
.pagenav-prev {
float:left;
margin-right:30px;
}
 
.pagenav-next {
padding-left:25px;
}
 
#copyright a,#copyright p {
font-size:11px;
text-decoration:none;
color:#999;
}
 
h6 {
font-family:Leicester;
color:#000;
font-size:36px;
}
 
h8 {
font-family:Sansumi;
}
 
p {
color:#fff;
}
 
legend {
color:#000;
}
 
#sidebar h2 {
font-size:14px;
text-align:center;
height:15px;
padding:0;
}
 
@font-face {
font-family:Sansumi;
src:url('../fonts/Sansumi-DemiBold.TTF');
}
 
.slides_container,.bt-cs .bt-inner,.bt-cs h3 {
background:none;
}
 
.bt-cs .bt-inner .bt-title,.bt-cs h3 {
color:#333;
}
 
.bt-cs .bt-inner .bt-title-nointro {
clear:both;
color:#000;
font-weight:700;
text-transform:auto;
padding:15px 0 10px 20px;
}
 
#btcontentslider86 {
float:left;
}
 
#jcycle {
float:right;
margin-right:25px;
min-height:350px;
margin-bottom:15px;
}
 
.foxform {
background-color:#242424;
-moz-box-shadow:3px 3px 10px #888;
-webkit-box-shadow:3px 3px 10px #888;
box-shadow:3px 3px 10px #888;
margin:15px;
padding:5px;
}
 
.foxbutton {
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
width:70px;
font-size:11px;
}
 
button {
position:relative;
left:60px;
}
 
.foxcontainercontact_nadine,.foxcontainercontact_nadine h2 {
float:left;
padding-left:20px;
font-size:15px;
}
 
.item-pagecontact h6 {
line-height:45px;
}
 
.foxform input,.foxform textarea {
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
font-size:11px;
}
 
#contactform {
border-radius:0;
float:left;
margin:50px auto;
padding:20px;
}
 
.contact_header {
color:#f0f0f0;
font-style:normal;
}
 
.item-page,.item-pagecontact {
background-image:url(../images/article_items_bg.png);
margin-left:20px;
margin-right:20px;
margin-top:20px;
min-height:400px;
max-height:400px;
overflow:auto;
padding:10px 20px;
}

Tags:

Thu, 2012-07-26 19:07

EsorOne

Offline

Regular

Last seen: 9 years 48 weeks ago

Timezone: GMT+2

Joined: 2005-12-09

Posts: 30

Points: 9

Bigger images

I Selected the DIV and as you can see it is surrounded with a blue border. But the shade is a lot smaller

Screen Shot 2012-07-26 at 8.29.19 PM.png

Now I unchecked it and you can see that the div got a bigger size

Firefox sample... Nice shade around the div.
Screen Shot 2012-07-26 at 8.30.12 PM.png

Fri, 2012-07-27 00:32

Tony

Offline

Moderator

Brisbane

Last seen: 4 weeks 1 day ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

Hi EsorOne, I'm wondering why

Hi EsorOne,
I'm wondering why you don't apply the ie box shadow to: .no-boxshadow #mainWrapper

Fri, 2012-07-27 10:16

EsorOne

Offline

Regular

Last seen: 9 years 48 weeks ago

Timezone: GMT+2

Joined: 2005-12-09

Posts: 30

Points: 9

Hello Tony, Fair question.

Hello Tony,

Fair question. And I already tried that solution. But at you can see, the shadow box is smaller. This was the reason that I created a extra div and put this one above the @mainWrapper. Just a work around and try and error. I get the same results when using the #mainWrapper
When i use just border 3px solid #333333; the border is shown the right way.

So I hope you have some ideas left.

see screenshot for border

Screen Shot 2012-07-27 at 12.13.25 PM.png

Sun, 2012-07-29 13:50

EsorOne

Offline

Regular

Last seen: 9 years 48 weeks ago

Timezone: GMT+2

Joined: 2005-12-09

Posts: 30

Points: 9

Workaround

Hello All,

I did not solve the issue stated above. I just created a work around. (old fashion way)

I just created a shadow image . Sliced it in 3 slices. Top, Mid, and Bottom and used the following code:
I thought to share this with u guys.

So problem is not solved, but I got my shades...

Index.php

<body>
	<div id="topBar">
		<div id="topWrapper">
	HEADER 		
		</div>						
	</div>
 
 
 
 
	<div id="mainContainer">
	<div id="mainWrapper">
		<div id="schaduw_ie"></div>
				<div id="schaduw_ie_mid">	CONTENT HERE
						<div id="schaduw_bot">	
 
 
						</div> <!-- div schaduw_bot -->						  	
				</div> <!-- div schaduw_mid -->	
 
 
			</div> <!-- div wrapper -->
		</div> <!-- div mainWrapper -->		
	</div> <!-- div MainContainer -->	
 
		</div><div id="copyright"></div>	  
 
 
</body>

CSS

#mainContainer {
width:100%;
}
 
#mainWrapper {
width:980px;
min-height:500px;
-moz-box-shadow:3px 3px 10px #888;
-webkit-box-shadow:3px 3px 10px #888;
box-shadow:3px 3px 10px #888;
z-index:-999;
margin:0 auto;
 
 
}
 
.no-boxshadow #schaduw_ie{ 
 width:985px; 
 height: 6px;
 background-image: url(../images/schaduw_top_980.jpg);
 background-repeat: no-repeat;
 
}
 
.no-boxshadow #schaduw_ie_mid{
 
 min-height: 500px;
 width: 980px;
 background-image: url(../images/schaduw_mid_980.jpg);
 background-repeat: repeat-y;
 
 
}
 
.no-boxshadow #schaduw_bot{
 height:100px; 
 background-image: url(../images/schaduw_bot_980.jpg);
 background-repeat: no-repeat;
 width: 100%;
 
 
 
}

RESULT:

Screen Shot 2012-07-29 at 3.49.41 PM.png

progid:DXImageTransform.Microsoft.Shadow Not around the Div in IE 8

Bigger images

Hi EsorOne, I'm wondering why

Hello Tony, Fair question.

Workaround

User login

Navigation