Forums

MartyBoi

Hello....

I am having a problem getting ' -webkit-box-shadow:inset ' to work in Chrome and Safari.... Can anyone please give me a hand, tell me what I am doing wrong?

<br />
<br />
header form#searchform {		
	position: absolute;
	right: 20px;
	text-align: right;
	top: 28px;
	width: 400px;
}

header input#s {	
	border: 1px solid #000;
	box-shadow:inset 2px 2px 5px #202020; /* CSS3 */	
	-moz-box-shadow:inset 2px 2px 5px #202020; /* Firefox */
	-o-box-shadow:inset 2px 2px 5px #202020; /* Opera */
	-webkit-box-shadow:inset 2px 2px 5px #202020; /* Safari, Chrome */			
	font-size: 1.4em;
	height: 28px;
	padding: 0 5px 0;	
	width: 200px;	
}

header input[type='submit'] {
	background: url(../images/buttons.png) -15px -17px;
	border: none;
	color: #fff;
	height: 30px;
	width: 70px;
}

header input[type='submit']:hover {
	background: url(../images/buttons.png) -15px -48px;	
	height: 30px;
	width: 70px; 
}

Thank you......

ChrisxClash

Your syntax looks fine, and works here: http://jsfiddle.net/BYZQ4/

It could possibly be from another element?

MartyBoi

OK, makes sense....

Here is the rest of the code.....

<br />
<br />
body {
	background: #080808;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;	
	text-align: left;

}

#wrapper {
	background: #fff;
	border: 1px solid #000;	
	font-size: 1.2em;	
	margin: 15px auto;
	width: 904px;
}	

/* ----  Secondary Layout Structure (header, footer, sidebar) ---- */

header#header {
	background-image: #000;
	background-image: linear-gradient(to bottom, #262626, #000);
	background-image: -moz-linear-gradient(top, #262626, #000 ); /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(top, #262626, #000 ); /* IE 10+ */
	background-image: -o-linear-gradient(top, #262626, #000 );  /* Opera 11.10+ */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#000) ); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #262626), #000 ); /* Chrome 10+, Saf5.1+, iOS 5+ */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#262626, endColorstr=#000); /* IE6-IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#262626, endColorstr=#000)"; /* IE 8+ */
	border-left: 1px solid #5E574E;
	border-right: 1px solid #5E574E;
	border-top: 1px solid #5E574E;
	padding: 15px 20px 0;  	
	position: relative;			
	width: 862px;
}

article#post-21 {
	float: left;
	line-height: 1.5em;
	padding: 12px 0 4px 30px;
	width: 610px;
}


aside#sidebar {
	background: #fff;
	float: right;
	font-size: 1.1em;
	line-height: 1.5;
	padding: 10px 0 0;
	text-align: left;
	width: 230px;

}

footer#footer {	
	background: #1a1a1a;
	clear: both;
	margin: 0 auto;
	padding: 8px 20px 12px;
	width: 864px;
}
Is this mark-up the problem?<br />
<br />
Help is much needed.....

ChrisxClash

Could i possibly see your HTML markup for that section of the page as well? And if you could put it on jsfiddle.net that would be awesome. thanks!

MartyBoi


<header id="header" role="banner">
<a href="http://localhost/wordpress"&gt;
<h1> Just another WordPress site </h1>
<form id="searchform" role="search" method="get" action="http://localhost/wordpress"&gt;
<nav role="navigation">
</header>
<article id="post-21" class="post-21 post type-post status-publish format-quote hentry category-uncategorized" role="main">
<h2>
<a href="http://localhost/wordpress/?p=21">Welcome</a&gt;
</h2>
<footer class="meta">
<i>Posted on:</i>
<time class="updated" pubdate="" datetime="2012-06-29T01:42:11+00:00">June 19th, 2012</time>
<span class="byline author vcard">
<i>by</i>
<span class="fn">Admin</span>
</span>
<a class="comments-link" title="Comment on Welcome" href="http://localhost/wordpress/?p=21#respond">No Comments</a>
</footer>
<div class="entry"> </div>
<footer class="postmetadata">
Posted in
<a rel="category" title="View all posts in Uncategorized" href="http://localhost/wordpress/?cat=1">Uncategorized</a&gt;
|
<a title="Comment on Welcome" href="http://localhost/wordpress/?p=21#respond">No Comments »</a>
</footer>
</article>
<nav class="navigation">
<div class="next-posts"></div>
<div class="prev-posts"></div>
</nav>
<aside id="sidebar" role="complementary">
<footer id="footer" class="source-org vcard copyright" role="contentinfo">

kgscott284

You have no element for the selector "header input#s"

try this and tell me if it makes it better


header input#s {	
	box-shadow: inset 2px 2px 5px #202020 !important; /* CSS3 */	
	-moz-box-shadow: inset 2px 2px 5px #202020 !important; /* Firefox */
	-o-box-shadow: inset 2px 2px 5px #202020 !important; /* Opera */
	-webkit-box-shadow: inset 2px 2px 5px #202020 !important; /* Safari, Chrome */			
}

If that doesnt work put your site live somewhere it will be much easier to see everything actually working

MartyBoi

Than.k you very much.... I have tried it, seems the issue may be complex.... I don't even see the border I had ' border { 1px solid #000;} ', I just don't get it....

ChrisxClash

Marty, did you ever figure out what was causing it? I glanced at your code last night, and as kgscott284 said I couldn't find the input with the id of "s" anywhere in your markup.

treehouse : what would you like to learn today?

Forums

Help ! ! ! ! ( -webkit-box-shadow:inset) not working on Chrome and Safari....