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)
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 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.
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;
}
I'm having a problem with getting extra padding on link element with an image inside. It happens in all browsers, Safari, Firefox, IE.
I have a reset stylesheet applied so there shouldn't be any extra margins on padding but upon inspection it's clear that the a element has some extra bottom padding from nowhere. Any ideas?
Here's the markup and CSS:
<div class="movie"><img src="img/video01.jpg" alt="" /></div>
div.home-col .movie {
padding: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}
div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}
div.home-col .movie img {
padding: 4px;
margin: 0;
border: 1px solid #d0d0d0;
}
Try adding the following line to your link element: line-height: 0;
div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
line-height: 0;
}
sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility .....
answer: only add "vertical-align: top;" to img tag inside a tag.
The background image for the movie class will appear at the bottom of both the box and padding applied to it, so use the following if you need the 11px space at the bottom of the image.
div.home-col .movie {
margin: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}
Did you try adding padding to:
div.home-col .movie a {
display: block;
padding: 0 0 0 0;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}
If not possibly you could add a:visited to test it to see if anything changes.
Are you sure that’s all the CSS? I can’t see the problem you’re describing on this test page: http://www.pauldwaite.co.uk/test-pages/3532870/
Hello i had the same problem and i found that if you vertically align the image to the bottom it will be fixed.
Image inside div has extra space below the image
Adding style="padding:0px;" solved the problem for me.