CSS - Ie Drop Shadow Spread

CODE TITLE:
CSS drop shadow

DESCRIPTION:
Technique to build flexible CSS drop shadows (realistic) applied to arbitrary block elements (no images).

URL TO CODE:
CSS drop shadow

Hello,

Quick Q:

How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples):

http://urlgreyhot.com/personal/

http://www.fiftyfoureleven.com/sandbox/weblog/

I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect.

Can someone point me to a nice tutorial?

I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code.

Anyone feel like sharing techniques?

Thanks in advance!
Cheers
M

I really strive to stay as close to design when I get a psd from a graphic designer. Sometimes that can be a challenge such as the situation I am having now. If you look at this page

Osake Restaurant

you will see a header on the page that reads Restaurant Menu. This header is using a custom font called Lato.

I have uploaded a screenshot of the layer styles for drop shadow and gradient.
Screen Shot

Below is some code I found from a tutorial for css drop-shadow -

Code:

/* default setup that everything sees */
.shadow {
  /* needed for Internet explorer */
  height: 1em;
  filter: Shadow(Color=#666666, 
                 Direction=135, 
                 Strength=5);

  /* Needed for Gecko */
  line-height: 2em;
  white-space: nowrap;

}

/* 
 * used by browsers which know about
 * :before to create the shadow 
 */
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; 
}

#shadow_1:before { 
  content: 'In shadow'; 
}
#second_2:before { 
  content: 'Happy Shadowing!'; 
}

/*\*/
html*.shadow {

  [color:red;/* required by Safari 
              * so that [] is correctly
              * begun. associated with
              * the property, yet hiding
              * it. Seen by IE6 */

    /* 
     * seen by IE6 and Safari, but hidden
     * from Gecko 
     */
    text-shadow: #666666 5px 5px 5px; 

  ]color:auto; /* resets color for IE6 */
}/**/

/* 
 * end hack using dummy attribute selector
 * for IE5 mac
 */
.dummyend[id]{clear: both;}

/*\*/
html*.shadow:before {

  [color:red;/* required by Safari. 
                seen by IE6 */

    /* 
     * seen by IE6 and Safari, but hidden
     * from Gecko 
     */
    display: none;

  ]color:auto; /* resets color for IE6 */
}/**/

/* 
 * end hack using dummy attribute selector
 * for IE5 mac
 */
.dummyend[id]{clear: both;}

My question is how do I go from those settings in PSD to a equivalent look in HTML w/ CSS. Do I just play around with it or is there a more precise way.

Also what about for gradient. Hopefully others can learn from this thread as well. Thanks! Tom

How do I apply a css drop shadow around the search widget generated by this script code?
Code:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>

I am using this:
http://alistapart.com/articles/cssdropshadows/

for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center

(-:

I've tried every thing possible to make the words spread out in Firefox (I don't know about IE6 or 7): Display: block; text-align: left; left: 0px... It doesn't work.
PHP Code:
<ul>
<li style="">
        <a href="http://www.....com/Merchant2/merchant.mvc" onmouseover="<?php //changeImages('index_10', 'images/index_10-over.gif'); return true;?>" onmouseout="<?php //changeImages('index_10', 'images/index_10.gif'); return true;?>"><span style="position: relative; left: 0px; text-align: left; background-color: #eeeeee; border: 1px solid #000000; width: 30px; height: 10px; display: block; padding: 10px 100px 10px 100px; font-family: Verdana, Arial, Times New Roman; text-decoration: none; font-weight: bold; font-size: 16px; color: #000000;">Online Store<?php //<img NAME="index_10" SRC="images/index_10.gif" WIDTH=167 HEIGHT=33 BORDER=0 ALT="Online Store">?></span>
        </a>
    </li>
</ul> 

My site is here...

css here...

I have two .gif files I want to use in the header... the main one (header.gif) should be centered (as it is now)... while the other (header_spread.gif) should repeat on the left and right sides of the centered header.gif... The .gif files are transparent, so I can't use the spread as the entire background... I'd also like to refrain from making header.gif (don't care about header_spread.gif) a background or making the background of header.gif white, and have it in an <img> tag instead so I can dynamically change my header with the seasons... (though if background is the only way, I could have a header class for each season and have my script change it, so that solution would technically work too, but create a larger css file.)

I need help formatting this properly... I can get the spread to work as a background for the entire div header, but that messes up the look of the center gif...

Thanks
Bryan

Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right.

I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick

Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance!

Code:

.clearfix-tabs{
clear: both;
}

.gk_tab_item_space{
padding: 10px;
}

div.gk_tab-style3 {
position: relative;
}

div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}

div.gk_tabmenu-style3 {
overflow:hidden;
}

ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}

ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}

ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}

ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}

div.gk_tab_container0-style3 {
clear: both;
}

div.gk_tab_container1-style3 {
overflow: hidden;
}

div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}

div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}

div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}

div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}

div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}

.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;

}

Hey everyone.

First of all, I apologise for imposing on you another question about drop shadows in CSS. I have tried my hardest with what I've been trying to achieve here (including using the resources that gave me the info to use this technique in the first place) but I've hit a brick wall.

Allow me to demonstrate: http://www.hrfc.org.uk/test2/index.htm

At the top right of the content, there is a box I've created, within which the ultimate user of this site will be able to put screen shots, and then type their captions below.

Ideally, I want to be able to have this box (.grabcontainer in the CSS) have a drop shadow.

I was able to achieve a drop shadow for the <img> on its own (as can be seen by scrolling further down the page to the image at the bottom)... but I can't think of a way of extending this technique so that it works for my .grabcontainer class.

If anyone has any suggestions I'd really appreciate it. I've played with this all day but every attempt normally ruins the careful arrangement of the divs.

Thanks for reading

Eldoc

Thanks for taking the time to read my question.

I have a box in which I have text. I would like to make that box look like it has a shadow to the bottom right.

I can't seem to figure out how to do that with my CSS.

here is the <div> and my CSS


Code:

<body>
<div id="MainContainer">
<div id="Title">Landmark Feeds - Links to Standard Operating Procedures</div>
	<hr />
	<div class="dtree">
		<p id="TreeLinks"><span><a class="QuickLink" href="javascript:%20d.openAll();">Open All Folders</a> <a class="QuickLink" href="javascript:%20d.closeAll();">Close All Folders</a></span></p>
		<p id="TreeLinks"><span><a class="QuickLink" href="javascript: d.openTo(1, true);">Open Terms</a> <a class="QuickLink" href="javascript: d.openTo(2, true);">Open Payment Schedules</a> <a class="QuickLink" href="javascript: d.openTo(3, true);">Open SOP's</a></span></p>
		<p><script type="text/javascript" src="JavaScript/dtreeDocWrite.js"></script></p>
	</div>
	<hr />
	
</div>
<div id="CR">Last Updated: February 28, 2006</div>
</body>

Code:

#Title {
font-size: 26px;
color: black;
border-width: 3px;
border-color: #d81f03;
border-style: solid;
margin-top: -55px;
margin-left: 0px;
float: left;
background-color: #F5F5F5;
padding: 5px;
}

Thanks,

Brad

I've got a div tag that I show and hide on an accessKey press. It is used for special navagation in the site. The div tag has a background color defined in the CSS. The background color only shows up in FF.

I know I'm using tables when I don't need to, and this is pretty sloppy right now.. but I'm going to clean it up a bit... I just finished writing a function to keep the div tags above select elements in IE and haven't had a chance to do the cleaning up yet.

But I think my problem is probably very simple and is something stupid in my style sheet or some behavior of IE I don't know about or have forgotten about.

Code:

<div id="gotoSmall"><input type="image" id="hiddenGoTo" src="<c:out value='${pageContext.request.contextPath}'/>/images/XXXXyyyy/empty.gif" name="hiddenGoTo" accessKey="g" onfocus="showHideGoto('show');"/></div>
<div id="gotoDiv">
	<form name="GoToScreen" class="form" onsubmit="javascript:return goToNextScreen(this,'<c:out value='${pageContext.request.contextPath}'/>')" method="post">
	
	<table class="goToTable" id="gotoTable">						
		<tr>
			<td align="right" nowrap="nowrap">
				<label class="XXXXGoToLabel" id="goTo">go to</Label> 
			</td><td>
		      	<input name="screenName" autocomplete="off" class="XXXXGoToInput" id="XXXXGoToInput" type="text" onblur="return toUpper(this);" size="12"  height="20px" value="" maxlength="12" tabindex="-1"/>										  		
  			</td>
  			<td>&nbsp;
  				<input type="hidden" name="XXXXActionOrTab" value="Refresh"/>
		  		<input type="hidden" name="useSessionKeys" value="true"/>
		  		<input type="hidden" name="backButtonCheck" value="pageLoad"/>		
		  	</td>
  		</tr><tr>
  			<td align="center" colspan="3">
  				<table>
  					<tr>
  						<td align="right">
  							<input type="submit" name="GoTo" value="Goto" onclick="buttonClick(this);"/>						
						</td><td align="left">
							<input type="button" name="cancel" value="Cancel" onclick="showHideGoto('hide')"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	</form>	
</div>

Code:

#gotoDiv{
	display: block;
	left:450;
	top:200;
	z-index:10000;
	width:204px;
	height:54px;
	visibility:hidden;
	position: absolute;
	background-color: grey;
}#gotoSmall{
	display: block;	
	z-index:10000;
	width:0px;
	height:0px;
	position: absolute;
}
.goToTable{
	width:200px;
	height:50px;
	background-color: #e0dfe3;
	border: 1px solid black;
	border-style: groove;
	border-spacing: 0px;
	border-collapse: collapse;
}

Hi guys

I've seen a few websites that use a fixed width column in the middle of the screen that appear to cast a shadow over the background. I want to achieve that but I can't figure out how.

The central div is 800px wide so I tried creating a very wide but short background image with this image on but I can't position it bang in the middle where I need it (the image is 2400x8px and 1.46KB)

Can anyone help? Either with the positioning of this image or with a better solution?

Cheers guys

Im creating a training log for use by myself and to teach me ruby on rails but Im running into trouble coding the css for the interface. My content box has a significant shadow with rounded corners and Im not sure what the best practice would be to code this. Im running into trouble because when I put the top background piece in it pushes the content down to far while making the transition of the drop shadow from the rounded corner to the edge. I want the content to be 10 px from the edge of the rounded box but in order to get the shading and corners right I need to have a large slice of the top and bottom of the background pushing the content more than 10 px down. Ive tried negative margins but that just brings my repeater background higher up covering the corners. Please let me know if there is a better way in which I can have my content in the right place.

thanks in advance!
G


I guess I cant post a link to a screenshot so I hope I described it well enough...

Hey guys
I'm new here, so I apologise if I do something wrong or write something!

Anyway,

I have a small query regarding CSS on my website.
It is valid CSS before you ask and th eproblem is - I have a shadow which is meant to appear on my website and in IE6 it does not. It is an image that is a height of 2 and then i want it to be height 100% so it fill sup the container it is in.

So, border-left and border-right are in the container 'page' and do not show up (but they do in opera, firefox, safari, ie7 and netscape)

Another problem in IE6, is the 100% width issue, anyone know how to fix this too? (all the widths that are 100% on the page, i tried to fix it in the IE6 fixes but it didnt work)

Any ideas?

The code is below

Code:

#header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-image: url(images/headerbg.gif);
	background-repeat:repeat-x;
	height: 128px;
	z-index: 1;
}

#logo {
	position:relative;
	width:231px;
	height:94px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/logo.jpg);
}

#menuspacer {
	position: absolute;
	top:110px;
	left: 0px;
	height: 41px;
	width: 100%;
	z-index: 2;
	border-bottom: 1px solid #FF8000;
}

#menubg {
	position:relative;
	top:116px;
	height: 25px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	z-index: 3;
	border-left: 1px solid #FF8000;
	border-right: 1px solid #FF8000;
	border-bottom: 1px solid #FF8000;
		background-color:#FFFFFF;

}
#menufakeborder {
	position:relative;
	top:89px;
	height: 20px;
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	z-index: 4;
	border-left: 1px solid #ffcb9d;
	border-right: 1px solid #ffcb9d;
}

#menucontainer {
	position:relative;
	top:0px;
	height: 23px;
	width: 500px;
	margin-right: 0px;
	margin-left: 0;
	z-index: 5;
}

#menu li
{
	display: inline;
	list-style-type: none;
	padding-right: 9px;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color: #550000;
	text-decoration: none;
	text-align:center;
	z-index:6;
	background-color:#FFFFFF;
}

#photobg {
	position:absolute;
	top: 152px;
	left: 0px;
	width:100%;
	height: 161px;
	background-image:url(images/horsebg.gif);
	background-repeat:repeat-x;
	z-index:2;
	
}

#horse {
	position: relative;
	top: 91px;
	margin-left: auto;
	margin-right: auto;
	background-image:url(images/horse2.jpg);
	width:1035px;
	height: 161px;
	z-index:2;
}

#border-right {
	position:absolute;
	top: 0px;
	right: 137px;
	width:22px;
	height:97%;
	background-image:url(images/border-right.gif);
	background-repeat:repeat-y;
	z-index:2324235;
	background-color:#003366;
}

#border-left {
	position:absolute;
	top: 0px;
	left: 137px;
	width:20px;
	height:97%;
	background-image:url(images/border-left.gif);
	background-repeat:repeat-y;
	z-index:512;
	
}

#border-left-end {
	position:absolute;
	bottom: -18px;
	left: 139px;
	width:18px;
	height:58px;
	background-image:url(images/border-left-end.gif);
	z-index:1;
}

#border-right-end {
	position:absolute;
	bottom: -18px;
	right: 141px;
	width:18px;
	height:58px;
	background-image:url(images/border-right-end.gif);
	z-index:1;
}

#horse-tail {
	position:absolute;
	top: 161px;
	left: 63px;
	width:94px;
	height:61px;
	background-image:url(images/horsetail.gif);
	z-index:1;
	
}

#footer {
	position:absolute;
	bottom: -175px;
	width:100%;
	height:22px;
	background-image:url(images/footerbg.gif);
	background-repeat:repeat-x;
	left: 0px;
	border-top: 1px solid #FF8000;
	z-index:0;
}

#footer-text {
	position:relative;
	bottom: 3px;
	width:420px;
	height:22px;
	margin:0 auto;
	z-index:2;
	border-right: 1px solid #FF8000;
	border-bottom: 1px solid #FF8000;
	border-left: 1px solid #FF8000;
	background-color:#FFFFFF;
}

#page {
	position: relative;
	top: 0px;
	left:0px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 1035px;
	z-index: 0;
}

and the fixes for IE at present:

Code:

#header {
	width: 101.5%;
	left:0px;
}

#photobg {
	width: 101.5%;
	left:0px;
}

#menuspacer {
	width: 101.5%;
	left:0px;
}

#menu
{
	list-style-type: none;
	margin-right: auto;
	width: 498px;
	margin:auto auto;
	padding:0px 0;
}

#menu li {
	display: inline;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align:center;

}

#footer {
	width: 101.5%;
	left:0px;
}

#border-right {
	right: 136px;
}

and the HTML;

Code:

<div id="header">
  <div id="logo"></div>
</div>
<div id="menuspacer"></div>
<div id="menubg">
  <!--[if ! IE 6]><div id="menucontainer"><![endif]-->
  <!--[if IE 6]><div id="menucontainer" align="center"><![endif]-->
  <ul id="menu" align="center">
menu items
  </ul>
</div>
</div>
<div id="menufakeborder"></div>
<div id="photobg"></div>
<div id="horse">
  <div id="horse-tail"></div>
</div>
<div id="page">
  <div id="border-right"></div>
  <div id="border-right-end"></div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  content
   <p>&nbsp;</p>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="border-left"></div>
  <div id="border-left-end"></div>
</div>
<div id="footer">
  <div id="footer-text" align="center"><img src="images/footer.jpg" /></div>
</div>

Thanks so much and looking forward to a reply soon!!