Help ! -webkit- & border issues with Chrome

**mooapo** · 06-29-2012, 04:09 PM

Hi....

I have been struggling with an issue that's been a huge headache, and much teeth grinding.... Lol....

Anyways,,,, I am trying to design my first WordPress Blog. I have intermediate CSS and CSS3 Skills, so this shouldn't be a problem right? Well not so the case, yikes !

I had placed a Search Form within the Header of my Blog, looks great in Firefox, IE and Opera. But one problem, Chrome and Safari seems to reject my style of CSS....

I placed a Border around and a -Webkit-Box-Shadow within the ( Forms Input Element ), but I cant see either when checking it out in both Chrome and Safari.

Code:

header input#s {	
	-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 */
	box-shadow: inset 2px 2px 5px #202020 !important; /* CSS3 */						
	font-size: 1.4em;
	height: 28px;
	padding: 0 5px 0;	
	width: 240px;
}

Code:

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get" role="search">
    <div>  
    	<label for="s" class="screen-reader-text">Search for:</label>    
        <input type="search" id="s" name="s" value="" />
             
        <input type="submit" value="Search" id="searchsubmit" />
    </div>
</form>

Please, can anyone save me....

**bernie1227** · 06-29-2012, 11:21 PM

Originally Posted by mooapo

Hi....

I have been struggling with an issue that's been a huge headache, and much teeth grinding.... Lol....

Anyways,,,, I am trying to design my first WordPress Blog. I have intermediate CSS and CSS3 Skills, so this shouldn't be a problem right? Well not so the case, yikes !

I had placed a Search Form within the Header of my Blog, looks great in Firefox, IE and Opera. But one problem, Chrome and Safari seems to reject my style of CSS....

I placed a Border around and a -Webkit-Box-Shadow within the ( Forms Input Element ), but I cant see either when checking it out in both Chrome and Safari.

Code:

header input#s {	
	-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 */
	box-shadow: inset 2px 2px 5px #202020 !important; /* CSS3 */						
	font-size: 1.4em;
	height: 28px;
	padding: 0 5px 0;	
	width: 240px;
}

Code:

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get" role="search">
    <div>  
    	<label for="s" class="screen-reader-text">Search for:</label>    
        <input type="search" id="s" name="s" value="" />
             
        <input type="submit" value="Search" id="searchsubmit" />
    </div>
</form>

Please, can anyone save me....

It's working fine for chrome and safari for me. The main issue I can see here is that the CSS isn't actually corresponding to the HTML. The first thing I did, was rename the CSS id to #headerinputs and set the div an id of headerinputs as well, and this made it work fine for me. So for example:

Code:

#headerinputs {	
	-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 */
	box-shadow: inset 2px 2px 5px #202020 !important; /* CSS3 */						
	font-size: 1.4em;
	height: 28px;
	padding: 0 5px 0;	
	width: 240px;
}

And

Code:

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get" role="search">
    <div id="headerinputs">
    	<label for="s" class="screen-reader-text">Search for:</label>    
        <input type="search" id="s" name="s" value="" />
             
        <input type="submit" value="Search" id="searchsubmit" />
    </div>
</form>

The only other problem I could think it could be, is browser compatability, as box shadow isn't available in earlier versions of some browsers.
Bernie

**ApacheTech** · 06-30-2012, 12:29 AM

Does Firefox (Stable) still not support raw CSS3? The only browsers I have atm are Firefox 14 Beta and Firefox 15 Aurora and the raw CSS3 box-shadow: value works fine without the -moz- prefix.

**bernie1227** · 06-30-2012, 12:45 AM

Originally Posted by ApacheTech

Does Firefox (Stable) still not support raw CSS3? The only browsers I have atm are Firefox 14 Beta and Firefox 15 Aurora and the raw CSS3 box-shadow: value works fine without the -moz- prefix.

From the article I'm looking at now, it says it isn't supported by anything ie8 and below (obviously), Firefox 3 and below or below safari 5.1.1