Help ! -webkit- & border issues with Chrome

[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.:eek:



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;
}




<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....:confused:

[bernie1227]

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.:eek:



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;
}




<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....:confused:

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:




#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


<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]

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]

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

[ApacheTech]

If the Beta version of Firefox being released in three weeks is version 14.0, what's the current version?

[bernie1227]

If the Beta version of Firefox being released in three weeks is version 14.0, what's the current version?

Latest stable release is 13.0.1