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.
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>©<?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; }
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
Now I unchecked it and you can see that the div got a bigger size
Firefox sample... Nice shade around the div.
Hi EsorOne, I'm wondering why
Hi EsorOne,
I'm wondering why you don't apply the ie box shadow to: .no-boxshadow #mainWrapper
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
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: