I have applied the following html
<input type="image" value="Search" class="button" src="" onclick="this.form.searchword.focus();">
and this is the css...
#header form .button
{
/*border:solid 1px #999;*/
background:#664335 url(../images/btn-search.jpg) no-repeat ;
/*color:#fff;*/
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
border: none;
}
I tried by removing the width and height and setting a padding value to it but no-success for this. As I searched different questions, I came to know that if src attribute is not applied then border will appear. But in my case the markup I can't edit, so is there any method to remove that bug.
Anyway I solved it by changing type image to button with jquery.
Apply CSS:
#header form .button {
border: solid 1px #999;
background: #664335 url(../images/btn-search.jpg) no-repeat;
color: #fff;
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
// delete this
border: none;
}
This questing has been asked more than one time, and the best posible solution to this is just to use type="submit" instead of type="image"and just style it in CSS as you like
P.S. type="image" will not work in chrome as you want, try finding another way for your code, because that border is place holder for an error image like in IE widely known red cross in white box, its just there, you may try adding image that has "Search" written on it or maybe add 1x1 px transparent image there, but thats all.
Related
I have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding​ style.
I'm redoing a site in which I'm using a CSS sprite. I'm also using the sprite with some tags, which I cannot remove.
So the tag gets a CSS-background-image and appropriate background position. Works fine. I had to remove the alt-attribute, because this kept showing on Firefox. Not nice, but ok.
My problem:
In Chrome I end up having a faint outline around the image. I first thought these were border, but I think it's outline.
If I CSS outline: 3px solid blue the faint border, becomes 3px solid blue... but if I set outline: 0; nothing happens.
More code:
HTML
<img class="ui-li-icon ui-li-thumb iconComments" />
CSS
.ui-icon, .iconComments, .iconMail, .ui-icon-searchfield:after {
background: #FFFFFF /*{global-icon-color}*/;
background: transparent /*{global-icon-disc}*/;
background-image: url(img/sprite.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.iconComments {
background-position: -36px 50%;
}
.iconMail {
background-position: 2px 50%;
}
.iconComments, .iconMail {
height: 20px;
width: 20px;
}
Any idea, where the outline/border is coming from and how to remove it?
Thanks
The issue is likely due to the fact that you do not have a src attribute within your image tag.
If you can absolutely position the image, you can use the sprite directly in the foreground using the CSS clip property.
Usually this is caused by the border attribute. I know you said you think it's outline, but did you try this in your img class...
.imgClass
{
border-style: none;
text-decoration: none;
}
or this
.imgClass
{
border:0;
}
K so I have an image in my html and I am settings its src using css and background: url() the reason for this is because I want to toggle the class on click so that I go back and forth between images. Everything works except for the fact that my image has a border and nothing I do seems to get rid of the stupid thing.
Here is the html:
<img class="minus" />
and here is the css:
.minus{
position: relative;
margin: 0 0 -3px 5px;
float:right;
background: url(/images/mobile/minus.png) no-repeat;
border: none;
display:block;
width: 16px;
height: 16px;
}
I have tried everything I can think of border:0px; border:0; border-width: 0px; border-style:none; anything I could find on here or on the web basicly and nothing will get rid of the stupid border. Any insight would be appreciated.
Edit: using google chrome.
I'm certainly able to reproduce this error in Chrome. Here's a demo:
.minus{
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<img class="minus">
However, w3.org specifies (emphasis mine):
The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the tag. SRC is mandatory.
Setting a CSS background-image is not the same as setting the src HTML attribute of <img>... and perhaps that's your problem. You should consider using a different element, e.g.: a <span>:
.minus {
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<span class="minus"></span>
Here is a fiddle that uses a div with the class (I see no border). When I try an img with the class, it shows nothing (in firefox 7)
I can't seem to align the label of an anchor tag that's been made to look like a button.
Cancel label is clearly off. I would like it to be aligned with the Next button's label. We need the Cancel button to be an anchor tag because this site needs to work without Javascript.
Anyone have any ideas?
<div class="submit-voucher footer">
Cancel
<input class="button default" type="submit" name="submit" value="Next" />
</div>
Here's the CSS from Firebug for the Cancel link/button:
a, a:active, a:visited {
color: #0066DD;
text-decoration: none;
}
.cancelLinkButton {
height: 22px;
vertical-align: middle;
}
.button, input[type="submit"], input[type="button"], button {
background: -moz-linear-gradient(center top , #FDFDFD 0%, #EBEBEB 60%) repeat scroll 0 0 transparent;
border: 1px solid #BBBBAF;
display: inline-block;
padding: 0 20px;
width: auto;
}
Here's the CSS for the DIV:
.submit-voucher.footer {
text-align: right;
vertical-align: middle;
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
}
Thanks for the help.
EDIT: Added closing curly brackets to code in post.
Try using with line-height
.cancelLinkButton {
height: 22px;
vertical-align: middle;
line-height:22px;
}
Very simple. Just add some padding-top to .cancelLinkButton. From the looks of it, you probably need about 5px or so.
And depending on the border-box value on the element, you may need to decrease the height of the .cancelLinkButton the same amount of padding that you add. If you don't know what border-box is, then you almost definitely will need to decrease the height.
You are setting the CancelLinbutton property somewhere esle that is overriding the one you are setting below. Find out all the CSS references to cancelbutton and see what properties is actually use. You can use F12 and see which properties have been applied and which have been overridden.
.cancelLinkButton {
height: 22px;
vertical-align: middle;
}