As I was trying to theme my website, I've discovered some weird behavior when images are used with hyperlinks. Here is a sample code:
<div id="maindiv"> <a href="google.com">
<img src="https://lh4.ggpht.com/AlYHsHF4I5Y0Hx-64ObsbQsJVgbVIu-GK6cJwn1PHeeH0aIlEv1vtizf7whwfB8kuA=w16">
</a> </div>
You can also preview it here:
http://cssdeck.com/labs/vzine2bc
As you can see, there is a weird margin at the image, the containing div is not exactly covering it eventhough there is nothing that creates the margin. Is this a <a href> behavior or am I missing a point?
img { display: block; } or img { display: inline-block; } should fix it.
See fiddle here: http://jsfiddle.net/zitrusfrisch/7vh8Y/
EDIT:
As #Zettam mentioned in the comments img { display: inline-block; } does not solve the problem. So if img { display: block; } is not an option because you want them to display inline, try these alternatives:
Let the image float: left; but do not forget to clear the floating in some way, e.g. setting the wrapping element to overflow: hidden; (http://jsfiddle.net/zitrusfrisch/7vh8Y/1/)
font-size: 0px; on the wrapping element (http://jsfiddle.net/zitrusfrisch/7vh8Y/2/)
img { vertical-align: middle; } works as well, as long as the font-size is not bigger than the image (http://jsfiddle.net/zitrusfrisch/7vh8Y/3/)
Try this:
a img { border: 0; }
Some browsers put a border around images that are inside hyperlinks. You can avoid this by specifying the border with css: border-style: none
Related
So I got a span with a sparkling effect with an image before the text but for some reason the image is aligned to the top. When I get rid of the image part in my span and just use a .. before it, it works fine.
Currently:
Desired result:
css:
.sapphire-member {
color: #0033ff;
background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
}
.sapphire-member:before {
content: url(https://puu.sh/D9zBw/ca0f811bca.png);
}
html:
<span class='sapphire-member'>Test</span>
current html code for desired result with img tag:
<img src="https://puu.sh/D9zBw/ca0f811bca.png" /><span class='sapphire-member'>
So basically I want to know if it's possible to get the desired result without using the img tag?
vertical-align is probably what you're after. You want to avoid hard-coding amounts like margin-top for vertical centering because what if the font size or some other positioning changes? I would suggest:
<span class='sapphire-member'>Test</span>
.sapphire-member {
color: #0033ff;
background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
vertical-align: middle;
}
.sapphire-member:before {
content: url(https://puu.sh/D9zBw/ca0f811bca.png);
margin-right: 5px;
vertical-align: inherit;
}
https://codepen.io/anon/pen/YMwGXN
I have image wrapped in a link. The link adds extra padding in the bottom (Please see the red area in the attached image).
How can I remove it? I have tried to set the padding: 0; and margin:0 and also I have tried display:inline-block, but it does not solve it.
HTML:
<img src="http://i50.tinypic.com/2poy3kl.jpg" />
CSS:
a{
background: red;
padding: 0;
}
JS Fiddle:
http://jsfiddle.net/D6Ak8/
Use display: block; for the img tag:
a img {
display: block;
}
Updated Fiddle: http://jsfiddle.net/D6Ak8/1/
Display Block is your solution
js fiddle
http://jsfiddle.net/D6Ak8/4/
Add vertical-align:bottom to your image. This way you will keep your inline display.
try
img{border:none;}
...............
It seems that the HTML5 element figure adds some margin/padding if there is an image inside it. If you add a border around the figure you can see a small padding inside the element.
<figure>
<img src="image" alt="" />
</figure>
I reset all the margins and paddings with CSS by writing * { margin: 0; padding: 0 }
Anyone know how to handle it? Please take a look at this fiddle: http://jsfiddle.net/74Q98/
It's not a <figure> bug - it's a normal behavior of the <img> element
To fix it try this - DEMO
img {
border: 1px solid green;
display: block;
vertical-align: top;
}
UPDATE
By default any image rendered as inline (like a text), so the little extra space underneath is the space that all text lines have (i.e. for q, p etc.)
The above answer combines 2 methods of fixing the issue. So basically you can use just one of those:
img { display: block; }
or
img { vertical-align: top; }
I have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.
So all the relevant code is as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
a > img {
text-decoration: none;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
Many thanks in advance.
Regards,
Richard
PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.
Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.
You can turn the images into block elements by floating them, then they are not part of the text:
a > img {
float: left;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.
I was running in the same doubt. The text-decoration set to none works for me:
<a href="..." style="text-decoration:none;">
<img src="...">
</a>
As was said befor, you can use a class to make this more generic.
Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.
I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.
.myDiv {
display: flex;
justify-content: center;
align-items: center;
}
I'd like all my content to flow around an image. To do this, I simply did
img#me {
width: 300px;
float: left;
margin-right: 30px;
}
This works for text wraping, but other elements go behind it. For example
<style>
h2 {
background: black;
color: white;
}
</style>
<img id="me" src="http://paultarjan.com/paul.jpg" />
<h2>Things!</h2>
Then the h2 background flows right past the 30px margin. How should I do this instead?
I wish I could explain why exactly, but
h2 {
...
overflow: hidden;
...
}
should fix your problem.
I'm not sure I understand the problem, but I'm pretty sure it comes from the h2 being a block element. If it works for you, the easiest cure would be making it display: inline. Otherwise, give the h2 a specific width, and a float: left, as well.