I have two elements as close as I possibly can get them. If you're curious, the first is an scroll-to-top script that the user can click, and below it is a flat background. That hairline is really annoying me.
Any help is appreciated!
/*SCROLL TO TOP*/
.scroll-top-wrapper img{
width: 134px;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.border_background{
background: #162a53;
height: 416px;
}
...
<!-- SCROLL TO TOP -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<img src="../images/misc/scroll_to_top.svg" onmouseover="this.src='../images/misc/scroll_to_top_hover.svg';" onmouseout="this.src='../images/misc/scroll_to_top.svg';" />
</span>
</div>
<!-- LIGHT-COLORED BORDER -->
<div class="border_background">
....
Try adding a reset file. or margin: 0; Remember html tags have default style rules so you have to get rid of them.
I think the problem is in your image. There's a slight hairline, left in the original image, when you edited this image. So try to re-edit the image and remove that hairline.
When having a image inside a figure-tag, the figure width is 100%. How do I make so that the the figure always will have the same width as the image? Here's my current code:
HTML:
<figure>
<img src="http://www.google.com/images/srpr/logo3w.png" alt="" />
</figure>
CSS:
* {
margin: 0;
padding: 0;
}
figure {
border: 1px solid red;
}
img {
border: 1px solid blue;
vertical-align: top;
}
Add display:table to figure css like this
figure
{
display:table;
border: 1px solid red;
}
JS Fiddle Demo
Event though you have not asked for any JS solution .here is my solution for your problem.
On image load change width and height of figure
Assuming figure is parent of img
$(document).ready(function(){
$("img").load(function(){
$(this).parent().width( $(this).width());
});
});
You could also do this with jquery, even though it's a bit of a hack:
var imgWidth = $("figure img").width();
$("figure").width(imgWidth);
This is a fix if, for some reason, display: table isn't working for you in your css stack, or you need that element to be a different display type.
Here's the CSS that solved this issue for me:
figure{
display: table-cell;
}
A plain CSS solution that I discovered while looking for a solution to the same problem raised. I really didn't want a JavaScript approach and this did it for me.
Note: I encountered the problem in a custom theme I'm developing on WordPress.
I am trying to make a gallery of images, one page to the next like on this site:
francescoclemente.net/now/1.html
I downloaded some arrow.png images to make the arrow, and implemented them into my HTML like so:
<div class="paintings">
<img src="stanpics/paintings/nyc/bathesda fountain'.jpg" alt="bathesda fountain" title="bathesda fountain">
<p class="pdescribe">bathesda fountain</p>
</div>
<div class="rightarrow">
<img src="rightarrow.png" class="rightarrow" title="next" alt="next">
</div>
<div class="leftarrow">
<img src="leftarrow.png" class="rightarrow" title="back" alt="back">
</div>
The div "paintings" is the art image. The 'leftarrow' and 'right arrow' are the two arrows I want to put on the side. For some reason, the pointer icon (indicating an anchor tag or link) for the mouse will not show up unless you mouse over below the right arrow image. What am I doing wrong? Thanks for any help.
Here is the CSS for the arrow classes.
.leftarrow {
margin: 0 auto;
padding: 0;
position: relative;
bottom: 82px;
left: 120px;
}
.rightarrow {
margin: 0 auto;
padding: 0;
position: relative;
top: 50px;
left: 190px;
}
I've tried everything I could think of, I know it's probably something very simple messing me up here. Your corrections are appreciated.
It's hard to reproduce your issue without the images, but here are a few ideas you could try:
add a height and width to the css for your buttons
add a display:block to the css for your buttons
The w3c.org validator gives a few errors regarding arrows. Maybe fixing them will fix your problem.
http://validator.w3.org/check?uri=francescoclemente.net%2Fnow%2F1.html&charset=%28detect+automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=francescoclemente.net%2Fnow%2F1.html&profile=css21&usermedium=all&warning=1&vextwarning=&lang=nl
I am trying to mount an image in the middle of another (slightly larger) image so that it appears to be within the larger image (a phone in this case). I am unsure of the proper way to make this happen and any help is much appreciated!
You need to set the z-index css property.
HTML:
<img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />
CSS:
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
/*
set top and left here
*/
z-index:1;
}
Here's a demo: http://jsfiddle.net/AlienWebguy/6VSBv/
<img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">
Of course, you will need to adjust the coordinates, and I would highly recommend putting the CSS in a stylesheet instead of inline. Here's a pretty good tutorial on CSS for more information: http://www.csstutorial.net/
So you are new to html and CSS. That's no problem, but your question is a little bit vague for SO's general format.
However, in a nutshell:
<style>
#phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;}
#display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;}
</style>
<div id="phone">
<div id="display">
Hello! What is up? Miley rocks!
</div>
</div>
Live example: http://jsfiddle.net/cbn4L/
This of course is a extremely simple example. And as you can see the inner container is not a image, but text.. Technically you can add there a image now.. but as we are easing you in to the world of HTML & CSS, then this is a better example and maybe can enhance your concept :)
I try to display a span when the cursor of the mouse is on a help icon.
It works, but nevertheless, I don't manage to remove the border around the icon.
My CSS :
.info{
position:absolute;
border:none;
}
a.info{
position:absolute;
z-index:24;
background:none;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF;
cursor:help;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
cursor:help;
bottom:0px;
left:26px;
width:150px;
padding:4px;
}
cd
Another thing - remember that if you have an with an empty src attribute, then none of these suggestions will work, a border will still get shown.
<img src="" style="width:30px;height:30px;">
Try this:
img{border:0;}
You can also limitate the scope and only remove border on some images by doing so:
.myClass img{border:0;}
More information about the border css property can by found here.
Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.
img need src to use border is remover, i no know a why css is crazy
data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
So try example with SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">
So try example without SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo">
lol... css crazy! good fun
it's a good idea to use a reset CSS.
add this at the top of your CSS file
img, a {border:none, outline: none;}
hope this helps
<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I faced similar problem with img tag
I had added following line with img tag.
<img class="my-class">
And this is the css class
.my-class{
background-image: url('add.gif');
background-repeat: no-repeat;
display: inline-block;
width: 27px;
height: 27px;
}
I changed the img tag to span tag with same css class. Border is not visible now.
<span class="my-class"></span>
Use:
div {
background: url()
}
instead of <img>.
There is no borders in the div with background image.
maybe add border:none to under a.info:hover span or text-decoration:none
I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.
However, adding position:absolute;top:0;left:0; fixed the problem.
The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.
To illustrate the solution, this has a white border (to be precise, it has a top and left offset):
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">
This does not have a border:
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">
Hopefully this helps someone finding this post looking to resolve a similar problem.
img {
text-indent: -20000px; /*some large value*/
}
did the trick for me (for Chrome). This will remove the alt icon as well, something to note.
What class do you have on the image tag?
Try this
<img src="/images/myimage.jpg" style="border:none;" alt="my image" />
Here's how I got rid of mine:
.main .row .thumbnail {
display: inline-block;
border: 0px;
background-color: transparent;
}
Thank for the answers,
The border is removed for Internet Explorer, but this there for Firefox.
So, I added this class to the img:
.clearBorder{border:none;}
And it worked!
Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag.
<img src='a.png' /> <img src='b.png' /> will always display a space between the images even if the border attribute is set to 0, whereas <img src='a.png' /><img src='b.png' /> will not.
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
if image dont have src or image url is not returning image, border will be there, so you have to set a empty but valid image , here is a example which will load a default image on image loading error
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
I do believe you need to add the border: none style to your icon element as well.
I usually use this on the top of css file.
img {
border: none;
}
Try this
<img width="30" height="30"/>