I am trying to add a gradient background to a div in a page I'm making in Sharepoint 2010. The code below is working perfectly when I edit the html source and preview the page, but once I click the Save & Close button at the top left, the gradient disappears. Does sharepoint 2010 not allow gradients?
<style>
#gradientBanner {
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #AFD3FA, #E3F9FF); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #AFD3FA, #E3F9FF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #AFD3FA, #E3F9FF); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #AFD3FA, #E3F9FF) !important; /* Standard syntax */
}
</style>
<div id="gradientBanner" style="width: 100%; height: 160px; ">
<div style="width:420px; display: inline-block; position:absolute; left:1px;">
<p style="font-family:cordia new;font-size: 36px; color:#547FAB; vertical-align: middle; padding-top: 21px; padding-left:30px;">PAYROLL LEADERSHIP TEAM</p>
</div>
<img src="/wg/PayrollLeadershipTeam/Images1/PuzzleBuildingBanner.png" alt="" style="position:absolute; right:23px; height: 160px; z-index:1;"/>
<div style="width: 100%; display: inline-block; position:relative; top:146px; height: 14px; background-color: #195E8A; z-index:0;">
</div>
</div>
<br/>
<br/>
<br/>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 59faed79-5d0f-4684-b5f6-fd96080c5c8f" id="div_59faed79-5d0f-4684-b5f6-fd96080c5c8f">
</div><div class="ms-rtestate-read" id="vid_59faed79-5d0f-4684-b5f6-fd96080c5c8f" style="display: none;"></div></div>
No; it's just that SharePoint strips out any script tags unless you're using the Script Editor web part.
Related
I am looking to develop an Adaptive card that will take a user input value ranging from 1 to 5 depending on the number of stars the user selects.
I also would like to apply animation as the user hovers over the stars. For example if the user hovers through from left to right to the 4th star then I would like stars 1 to 4 selected. Similarly, if the user hovers back left to the 2nd star then I would like the 3rd and 4th star deselected. See the link below for an example.
However, given adaptive cards are purely declarative (i.e. no code is allowed) is it possible to develop one? If so please can you point me in the right direction?
See link below for an example of how I would like this presented to a user (to be clear using Adaptive cards),
Codepen - A code pen by Ash Durham
HTML
<span class="rating_stars rating_0">
<span class='s' data-low='0.5' data-high='1'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='1.5' data-high='2'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='2.5' data-high='3'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='3.5' data-high='4'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='s' data-low='4.5' data-high='5'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
<span class='r r0_5' data-rating='1' data-value='0.5'></span>
<span class='r r1' data-rating='1' data-value='1'></span>
<span class='r r1_5' data-rating='15' data-value='1.5'></span>
<span class='r r2' data-rating='2' data-value='2'></span>
<span class='r r2_5' data-rating='25' data-value='2.5'></span>
<span class='r r3' data-rating='3' data-value='3'></span>
<span class='r r3_5' data-rating='35' data-value='3.5'></span>
<span class='r r4' data-rating='4' data-value='4'></span>
<span class='r r4_5' data-rating='45' data-value='4.5'></span>
<span class='r r5' data-rating='5' data-value='5'></span>
</span>
<div class="values">
<div>
<label>Rating</label><input type="text" id="rating" value="0" />
</div>
<div>
<label>Rating Value</label><input type="text" name="rating" id="rating_val" value="0" />
</div>
</div>
<div class="info">
<p>The above textboxes should be hidden fields, but have been made textboxes to display the values when you click.</p>
<p>The 'Rating' value can be used for class/id based changes to this if wanting to use a background sprite to manage the stars instead.</p>
</div>
CSS
.rating_stars {
margin-top: 15px;
display: inline-block;
font-size: 20px;
font-weight: 200;
color: #918f8f;
position: relative;
}
.rating_stars span .fa, .rating_stars span.active-low .fa-star-o, .rating_stars span.active-high .fa-star-o{
display: none;
}
.rating_stars span .fa-star-o{
display: inline-block;
}
.rating_stars span.s.active-high .fa-star{
display: inline-block; color: #feb645;
}
.rating_stars span.s.active-low .fa-star-half-o{
display: inline-block; color: #feb645;
}
.rating_stars span.r {
position: absolute;
top: 0;
height: 20px;
width: 10px;
left: 0;
}
.rating_stars span.r.r0_5 {left:0px;}
.rating_stars span.r.r1 {left:10px; width: 11px;}
.rating_stars span.r.r1_5 {left:21px; width: 13px;}
.rating_stars span.r.r2 {left:34px; width: 12px;}
.rating_stars span.r.r2_5 {left:46px; width: 12px;}
.rating_stars span.r.r3 {left:58px; width: 11px;}
.rating_stars span.r.r3_5 {left:69px; width: 12px;}
.rating_stars span.r.r4 {left:81px; width: 12px;}
.rating_stars span.r.r4_5 {left:93px; width: 12px;}
.rating_stars span.r.r5 {left:105px; width: 12px;}
/* Just to make things look pretty ;) */
html, body {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 100%;
color: #eee;
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjN2Q3ZTdkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(135deg, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
label {width: 100px;display: inline-block; text-align: right; margin-right: 10px;}
input {width: 50px; text-align: center;}
.values {margin-top: 20px;}
.info {max-width: 500px; margin: 20px auto;}
JS
jQuery(document).ready(function($) {
$('.rating_stars span.r').hover(function() {
// get hovered value
var rating = $(this).data('rating');
var value = $(this).data('value');
$(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating);
highlight_star(value);
}, function() {
// get hidden field value
var rating = $("#rating").val();
var value = $("#rating_val").val();
$(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating);
highlight_star(value);
}).click(function() {
// Set hidden field value
var value = $(this).data('value');
$("#rating_val").val(value);
var rating = $(this).data('rating');
$("#rating").val(rating);
highlight_star(value);
});
var highlight_star = function(rating) {
$('.rating_stars span.s').each(function() {
var low = $(this).data('low');
var high = $(this).data('high');
$(this).removeClass('active-high').removeClass('active-low');
if (rating >= high) $(this).addClass('active-high');
else if (rating == low) $(this).addClass('active-low');
});
}
});
Thanks
There was a question very similar to this just yesterday - see In bot framework v4, how to implemente rating card with comment box and submit button. Very important - note the comments below the answer as we had an important discussion that might also be applicable to your scenario
On my website I have a section with 3 columns (with bootstrap), at the mobile size the stack on top of each other and line up next to each other at the bigger sizes. Now what it supposed to happen is that on scroll they should appear with the zoomIn animation. Which works but only at min-width: 300px. As soon as page reaches min-width: 480px the animation stops working and the content just appears instead of a smooth animation.
All the other content I have with wow.js works just fine at all the other sizes. It's only that specific section.
This is my HTML:
<div class="portfolio">
<h1> Portfolio </h1>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>FOO1</h3>
<a class="wow zoomIn" href="foo1" target="_blank"><img class="foo1" src="images/FOO1.png"/></a>
<p>lorem ipsum 1</p>
<p><span>Technologies used:</span> HTML, CSS, Javascript and jQuery</p>
<hr />
</div><!--END col-sm-4 FOO1-->
<div class="col-sm-4">
<h3>FOO2</h3>
<a class="wow zoomIn" href="https://foo2.com/" target="_blank"><img class="foo2" src="images/foo2.png"/></a>
<p>lorem ipsum2</p>
<p><span>Technologies used:</span> JavaScript, Node.js, Express.js, Mongoose, MongoDB, HTML, CSS, jQuery, Bootstrap, Heroku</p>
<hr />
</div><!--END col-sm--4 FOO2-->
<div class="col-sm-4">
<h3>FOO3</h3>
<a class="wow zoomIn" href="http://foo3.com" target="_blank"><img class="foo3" src="images/foo3.png"/></a>
<p>lorem ipsum 3
</p>
<p><span>Technologies used:</span>
Angular2, Node.JS, Express, Mongoose, MongoDB, HTML, CSS, jQuery,
Heroku
</p>
</div><!--END col-sm-4 FOO3-->
</div>
</div>
</div><!--END portfolio div-->
This is my CSS for min-width: 300px and min-width: 480px:
#media(min-width:300px){
.portfolio{
/* Permalink - use to edit and share this gradient:
http://colorzilla.com/gradient-
editor/#287dc8+0,75b4e5+46,7ba9e5+61,778be5+87,6a80e2+100 */
background: #287dc8; /* Old browsers */
background: -moz-linear-gradient(top, #287dc8 0%, #75b4e5 46%,
#7ba9e5
61%, #778be5 87%, #6a80e2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #287dc8 0%,#75b4e5
46%,#7ba9e5 61%,#778be5 87%,#6a80e2 100%); /* Chrome10-25,Safari5.1-6
*/
background: linear-gradient(to bottom, #287dc8 0%,#75b4e5 46%,#7ba9e5
61%,#778be5 87%,#6a80e2 100%); /* W3C, IE10+, FF16+, Chrome26+,
Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#287dc8', endColorstr='#6a80e2',GradientType=0 ); /*
IE6-9 */
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}
.portfolio h1{
margin-top: 30px;
}
.portfolio .container .row a img{
max-width: 95%;
margin: 15px 0px 15px 7px;
border-radius: 5px;
opacity: 1;
transition: all 0.5s ease;
}
.portfolio .container .row a img:hover{
opacity: 0.5;
transition: all 0.5s ease
}
.portfolio .container .row h3{
font-size: 24px;
color: whitesmoke;
font-weight: 400;
margin-left: 5px;
}
.portfolio .container .row p{
color: azure;
padding: 5px;
font-weight: 300;
font-size: 17px;
}
.portfolio .container .row span{
font-weight: 500;
}
.portfolio .container .row hr{
margin: 17px;
}
}/*CLOSE min-width:300*/
#media(min-width:480px){
.portfolio{
padding: 18px 10px;
}
.portfolio .container .row p{
font-size: 20px;
}
.portfolio .container .row h3{
margin-bottom: 30px;
font-size: 25px;
color: azure;
}
.portfolio .container .row a img{
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
}/*CLOSE min-width:480*/
I'm not really sure why it would stop working and I figured it must be a style I've put at the new size. All the other sizes, 768 and 1024 don't have any style changes to this section. I've changed the duration of animations to see if maybe I'm not seeing the animation but for sure it stops working right at 480. I've also tried different animations and using any other animation also makes the content just appear.
Any ideas as to why this only happens with this section?
Thank you!
UPDATE: I'm still not sure why exactly this happened but I fixed it by adding the wow zoomIn class to the image instead of the a tag - added asterisks so you can see where I moved the class, do not put them in your own code ;)
<div class="col-sm-4">
<h3>FOO1</h3>
<img class="**wow zoomIn** foo1" src="images/FOO1.png"/>
<p>lorem ipsum 1</p>
<p><span>Technologies used:</span> HTML, CSS, Javascript and jQuery</p>
<hr />
</div><!--END col-sm-4 FOO1-->
<div class="col-sm-4">
<h3>FOO2</h3>
<img class="**wow zoomIn** foo2" src="images/foo2.png"/>
<p>lorem ipsum2</p>
<p><span>Technologies used:</span> JavaScript, Node.js, Express.js, Mongoose, MongoDB, HTML, CSS, jQuery, Bootstrap, Heroku</p>
<hr />
</div><!--END col-sm--4 FOO2-->
<div class="col-sm-4">
<h3>FOO3</h3>
<img class="**wow zoomIn** foo3" src="images/foo3.png"/>
<p>lorem ipsum 3
</p>
<p><span>Technologies used:</span>
Angular2, Node.JS, Express, Mongoose, MongoDB, HTML, CSS, jQuery,
Heroku
</p>
</div><!--END col-sm-4 FOO3-->
I created the following where an icon is pressed to initiate the upload process instead of the usual browse.... It works in Chrome, FireFox, and I believe in older versions of IE (I tested it using IE's Document Mode) except Edge. On IE Edge when the icon is clicked nothing happens.
What can I do to make it work in Chrome, Firefox, IE Edge and at least IE 10 and 9?
Result: https://jsfiddle.net/sk5cg2wy/
/* Upload Photo */
.upload-wrapper {
width: 250px;
height: 250px;
margin: 0 auto;
}
.upload-wrapper img {
width: 250px
height: 280px;
cursor: pointer;
}
.upload-wrapper input {
display: none;
}
<!-- start upload wrapper -->
<div class='upload-wrapper'>
<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
<label for='file-input'>
<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>
</label>
<input type='file' name='photo' id='file-input' accept='image/*'>
</form>
</div>
<!-- end upload wrapper -->
Strange behavior of the IE-Edge didn't know that this is exists.
You can try to add image to the label as background-image, I've tested it in IE-Edge (Windows 7) and it's work.
JSFiddle
HTML:
<!-- start upload wrapper -->
<div class='upload-wrapper'>
<form enctype='multipart/form-data' action='photo_setup.php' method='POST'>
<label for='file-input'>
<!--<img src='http://i.imgur.com/MIY6LmH.png' alt='Upload File' title='Upload File' width='250' height='250'>-->
</label>
<input type='file' name='photo' id='file-input' accept='image/*'>
</form>
</div>
<!-- end upload wrapper -->
CSS:
/* Upload Photo */
.upload-wrapper {
width: 250px;
height: 250px;
margin: 0 auto;
}
.upload-wrapper img {
width: 250px
height: 280px;
cursor: pointer;
}
[for="file-input"] {
display: block;
background-color: #ddd; /*as fallback*/
background: url(http://i.imgur.com/MIY6LmH.png);
background-repeat: no-repeat;
background-size: cover;
width: 250px;
height: 250px;
}
.upload-wrapper input {
display: none;
}
#Konrud already wrote a workaround, but it doesn't fix/explain the actual problem. As far as I've analysed, it doesn't work because the label is no block-element and therefore takes no space. Edge is actually behaving correctly. Add display block and it will work (also in other browser behaving "correctly":
label {
display: block;
}
I want to make the coloring of the icon an image. So instead of it being purple or something, it is the image. I hope that makes sense!
I have this code:
<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
and the class:
.coffee {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
}
but this just changes the area around the icon to that image, not the inside.
Here's the whole page, the icon I'm trying to modify is the coffee cup: http://codepen.io/l-emi/pen/QNZevb
Thanks!
You could use background-clip and text-fill-color to achieve this in webkit browsers though it won't work in other browsers unfortunately:
.coffee:before {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
EXAMPLE
As mentioned by Turnip there is -webkit filter for that. However it is more convenient to use SVG:
<svg>
<pattern id="mypattern" patternUnits="userSpaceOnUse" width="750" height="800">
<image width="750" height="800" xlink:href="https://placekitten.com/g/100/100"></image>
</pattern>
<text x="0" y="80" class="fa fa-5x"
style="fill:url(#mypattern);"></text>
</svg>
You just need to include icon character in SVG
Demo fiddle
If your background is a solid color you could use an inverted SVG icon (where the filled path is the white-space and the main icons are cut/transparent):
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background: #ede1e9;
display: flex;
align-items: center;
justify-content: center;
}
.maskicon {
position: relative;
background: url('http://i.giphy.com/l2QZVskdU1QXM3I1a.gif') no-repeat center;
background-size: cover;
}
.maskicon svg {
display: block;
height: auto;
width: auto;
}
.maskicon svg path { fill: #ede1e9; }
.maskicon.coffee svg { height: 45vh; }
<div class="maskicon coffee">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="782 -846 1856 1792"><path d="M2254-398h-64v384h64c53.3 0 98.7-18.7 136-56s56-82.7 56-136-18.7-98.7-56-136-82.7-56-136-56z"/><path d="M782-846V562h1792c0 70.7-25 131-75 181s-110.3 75-181 75H1038c-70.7 0-131-25-181-75s-75-110.3-75-181v384h1870.9V-846H782zM2525.5 65.5c-75 75-165.5 112.5-271.5 112.5h-64v32c0 61.3-22 114-66 158s-96.7 66-158 66h-704c-61.3 0-114-22-158-66s-66-96.7-66-158v-736c0-17.3 6.3-32.3 19-45 12.7-12.7 27.7-19 45-19h1152c106 0 196.5 37.5 271.5 112.5S2638-312 2638-206 2600.5-9.5 2525.5 65.5z"/></svg>
</div>
jsFiddle: https://jsfiddle.net/azizn/mp7fo9ah/
Having the SVG inside the HTML allows you to easily control its fill color to match the background. You could go further with this and have any HTML content as the background (like text or even video) if you make the SVG element absolutely positioned with a higher z-index.
This requires more maintenance but is compatible with most browsers.
You may also take a look at mix-blend-mode . http://codepen.io/gc-nomade/pen/eZQdEg (or snippet at the bottom of answser)
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Modification to your CSS :
.coffee {
position:relative;/* to bring it on top */
mix-blend-mode:screen;/* we will blend from black and white colors */
color:black;/* this color will blend */
box-shadow: inset 0 0 0 100px white; /* this will be the mask color */
}
.infobox {/* #infobox should be used only once, so i use a class */
position:relative;/* to position the child */
}
.infobox:before{/* child or pseudo */
content:'';
/* slide it under the .coffebox */
left:50%;
margin-left:-70px;
height:140px;
width:140px;
position:absolute;
/* image to blend with */
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
}
modification to your html (where you use unproperly the ID too many times):
<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>
.coffee {
position: relative;
mix-blend-mode: screen;
color: black;
box-shadow: inset 0 0 0 100px white;
}
.infobox {
position: relative;
}
.infobox:before {
content: '';
height: 140px;
width: 150px;
position: absolute;
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1"),
/* see gradient while image loads*/
linear-gradient(45deg, darkblue, white, darkblue, white, darkblue, white, darkblue, white);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4 infobox " id="infobox" style="font-size: 28px;">
<span class="fa fa-coffee fa-5x coffee" aria-hidden="true"></span>
</div>
In your Codepen demo, just replace...
.coffee:before {
background: url("https://www.dropbox.com/s/czz3m5ieucxwbrl/stars.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
... with...
.coffee:before {
background: url("https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Then, https://www.dropbox.com/s/xal8sws9h4qy06l/tumblr_n6hoofK5GW1r0hv8uo1_500.gif?dl=1 will be the background image of your icon.
The problem with the code in your question, is that you were using selector .coffee where you should have been using selector .coffee:before.
Edit :
If you want to use the same background for the wand (as mentioned in the comments below), you could use eg. this selector :
.coffee:before, .fa-magic:before {
background: url("https://www.dropbox.com/s/eg3v313y3fuha9b/ezgif.com-crop.gif?dl=1");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
add a search icon using FontAwesome icon. searchbox is the div or any tag class name.
.searchbox:before {
position:absolute;
font: normal normal normal 14px/1 FontAwesome;
top: 17px;
left: 20px;
content: "\f002";
}
I'm using float: left; and float: right; to put two div-containers in one row, the left one holds an input bar, the right one holds a small background image (search button).
It's showing fine in Opera & Firefox, MSIE 9.0+ but when I view it in chrome the right container's background image is slightly off position (shifted downwards by a few pixels).
I set the background color to red to highlight the issue:
screenshot
index.php outtake:
<div class="header_inner_right">
<form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();">
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<input id="search_button" src="images/search_button.gif" type="submit" value="">
</div>
</form>
</div>
index_chrome.css (used if php script detects chrome browser):
#charset "ISO-8859-1";
#search_bar {
width: 450px;
height: 37px;
background-color: red
}
#search_bar #search_field {
border: 0px;
width: 365px;
height: 37px;
padding-left: 20px;
padding-right: 20px;
background-image: url(../images/search_field.gif);
background-repeat: no-repeat;
font-weight: bold;
color: #c0c0c0;
background-color: #ffffff
}
#search_bar #search_button {
cursor: pointer;
border: 0px;
outline: none;
height: 37px;
width: 45px;
background-image: url(../images/search_button.gif);
background-repeat: no-repeat
}
How to fix it and adjust the y-position of the magnifying-glass background image so its perfectly aligned with the left div's background image and fully concealing the red background of the right div container?
EDIT: http://jsfiddle.net/YcraM/
Sorry, forgot about JSFiddle!
This might not be the answer you want to hear, but it's pretty much impossible to make most input elements look identical cross browsers. I urge you to fashion the submit button from a div element. Example:
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<div id="search_button"></div>
</div>
Style the div with css to your liking - remember to use the :hover and :active pseudo classes. Then, using for example jQuery, make it functional like this:
$('#search_button').on('click', function(e) {
$(e.currentTarget).closest('form').submit();
});
I've tested it in Chrome 21 and FF 14, it seems setting line-height:0px; fixes the issue.
div.right {
float: right;
line-height:0px;
}
div.left {
float: left;
line-height:0px;
}
http://jsfiddle.net/YcraM/3/
I haven't tested in other browsers, so forgive me if this isn't the best solution.
you can add float:right (or left) to #search_bar #search_button, that fix the issue as well