Currently working on MAC Yosemite and trying to test out a website I'm developing on XAMPP (newest version) and Sublime Text. Just downloaded an image from the internet and saved into my htdocs file. When I submit index.html into my url for testing, that image is not displayed. However, when I open the same file like:
file:///Applications/XAMPP/xamppfiles/htdocs/index.html
the image is shown perfectly? Here's the code:
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Browse" />
</form>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
Would it look different from testing it out in
file:///Applications/XAMPP/xamppfiles/htdocs/index.html
than localhost/index.html
What is causing this?
set permissions so image is readable by webserver.
Related
I'm experiencing an odd bug.
Even with -webkit-transition included, color fades on safari aren't seeming to work for me. Works fine on chrome. Also, I'm using NextJS, hence the inside of the .
The color does change on hover, but only on chrome does it actually fade. On safari it's just a quick switch.
Heres a segment from my CSS
.socialThird{
#include flex-center();
height: 100%;
.iconA{ // anchor tag
height:50%;
width: 75px;
transition: all ease-in-out 0.25s;
padding: 10px 8px;
.emailSVG{ // svg
fill: #333;
filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-o-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-ms-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-moz-filter:drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-filter: drop-shadow( 0 7px 3px rgba(0, 0, 0, .3));
-webkit-transition: all ease-in-out 0.25s;
-moz-transition: all ease-in-out 0.25s;
-o-transition: all ease-in-out 0.25s;
transition: all ease-in-out 0.25s;
height: 100%;
width: 100%;
&:hover{
fill: #00bcc5;
}
}
&:hover{
cursor: pointer;
transform: translate(0px, -6px);
}
}
}
Hopefully this was enough information, thanks!
For some reason, all of my buttons are receiving a grey outline and I'm completely unsure of the source of it. It is not a hover or active thing, it is an always kind of thing. I can also note that it is not the on-click border that a browser adds to buttons, as I've removed that with a :focus value.
This is in Google Chrome. I'm not sure if the issue is present in other browsers.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
Remove the default border from the buttons: border: none.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
input[type="submit"].button_default { border: none;}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
The button has a default border, add border: 0 to your CSS
.button_default {
display: inline-block;
background: #1188f0;
...
...
color: #ffffff;
font-weight: bold;
border: 0;
}
You could simply remove the border:
.button_default {
border:none;
}
This question was previously posed here: Button border & background
I'm trying to add image to my text box
here is the code
<form id="findPromo">
<input type="text" name="find" placeholder="I'm Looking For...">
<input type="button" value="Search">
</form>
css
#findPromo input[type="text"] {
background: url(image/find.png) no-repeat 10px 6px #444;
background: #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#findPromo input[type="text"]:focus {
background: url(image/find.png) no-repeat 10px 6px #444;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
but the image does not come out
anyone know how to do it?
thanks
It is because you are overriding the background prorepty with background: #444; if you remove that line, the image is displayed :
DEMO
In the first CSS ruleset, you first set the background to your image but then overwrite it with the background: #444 rule. You don’t just overwrite the background color, but the whole background statement.
Since you already have the #444 in the first statement, you can safely remove the second one.
Here is the form HTML:
<form method="post" action="/cgi-bin/Contact.pl" id="contact-form">
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="name" id="name" placeholder="Name..." autocomplete="off" tabindex="1" class="txtinput" data-validate="validate(required)">
<input type="email" name="email" id="email" placeholder="Email..." autocomplete="off" tabindex="2" class="txtinput" data-validate="validate(required, email)">
<textarea name="message" type="text" id="message" placeholder="Message..." tabindex="3" class="txtblock" data-validate="validate(minlength(20))"></textarea>
<div id="buttons">
<input type="reset" name="reset" class="button" tabindex="4" value="Clear">
<input type="submit" name="submit" class="button" tabindex="5" value="Send">
<br style="clear:both;">
</div>
</section>
Here is the corresponding css:
#contact-form {
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
box-sizing: border-box;
}
#contact-form .txtinput {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #DEDEDE;
margin-bottom: 20px;
font-size: 1em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
color: #777;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#contact-form .txtinput:focus {
color: #999;
border-color: rgb(255, 102, 0);
border-color: rgba(255, 102, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
outline: 0 none;
}
#contact-form #name {
background: #FFF url('../images/contact/user.png') 5px 4px no-repeat;
}
#contact-form #email {
background: #FFF url('../images/contact/email.png') 5px 4px no-repeat;
}
#contact-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #DEDEDE;;
margin-bottom: 15px;
font-size: 1em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#contact-form textarea:focus {
color: #999;
border-color: rgb(255, 102, 0);
border-color: rgba(255, 102, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
outline: 0 none;
}
#contact-form .txtblock {
background: #FFF url('../images/contact/speech.png') 5px 4px no-repeat;
}
#contact-form #slider { width: 60%; }
#contact-form #aligned {
box-sizing: border-box;
float: left;
width: 450px;
}
#wrapping { width: 100%; box-sizing: border-box; }
Everything works fine until I display on a smaller device/screen then the fields don't act responsively and kind of overflow out of the box and onto the background as can be seen in the image provided in the link. Any help would be much appreciated. Thanks.
Link to example: http://www.livepurposely.net/image.png
In your css you are restricting width of #aligned to 450px and using px in padding, its better to use % in padding for responsive design
Info: px constraints the width to specified unit and is not good for responsive design, use % instead
Update CSS
#contact-form .txtinput {
padding: 3% 5%; // earlier 11px 25px
padding-left: 2%;
}
#contact-form textarea {
padding: 3% 5%;
padding-left: 2%;
}
#contact-form #aligned {
box-sizing: border-box;
float: left;
width: 90%; // earlier it was 450px update % as per your need
}
http://jsfiddle.net/raunakkathuria/nh5aZ/2/
The forms in bootstrap have a box shadow that leaves a very light shadow on the right side of the form. I need to remove that shadow on the right only so that the icon looks apart of the form.
JSFiddle: http://jsfiddle.net/MgcDU/6296/
Here's the CSS:
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
HTML:
<a href="#">
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search..." style="border-right:0;">
<span class="add-on" style="background:white;border-left:0;"><i class="icon-search" style="color:#a3a3a3"></i></span>
</div>
</a>
Please help!
Here's how I fixed it: http://jsfiddle.net/MgcDU/6305/
CSS:
.input-append {
position: relative;
}
.input-append .add-on {
padding: 4px 8px;
background: white;
border-left: 0;
position: absolute;
right: -32px;
}
You can relatively position .add-on and give it a positive z-index value so that it appears over the right-edge of the <input> - it's not 100% seamless but with some minor changes you can probably make it work for you.
.input-append .add-on:last-child {
position: relative;
z-index: 5;
}
http://jsfiddle.net/MgcDU/6302/
Assign a spread-radius value of -1px to the box shadow and add an extra pixel to the y-offset.
<spread-radius>
This is a fourth <length> value. Positive values will
cause the shadow to expand and grow bigger, negative values will cause
the shadow to shrink. If not specified, it will be 0 (the shadow will
be the same size as the element).
MDN: box-shadow (source)
http://jsfiddle.net/MgcDU/6307/
CSS
input[type="text"] {
-webkit-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
}
Try border-left:0px; becouse now yu dont have a px in element style
The best way is using box-shadow for "DIV.input-append" and make transparent background to input[type=text], example of using:
CSS:
.input-append{
position: relative;
padding: 2px;
width: 200px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.input-append:before {
content: '';
position: absolute;
right: 8px;
width: 16px;
height: 16px;
background: url('https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-16.png') no-repeat;
}
.input-append input[type=text]{
background: none;
border:none;
}
HTML:
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search...">
</div>
Demo: http://jsfiddle.net/EDLs7/