I have the following:
<a href="#" style="border:solid 1px gray; line-height: 5px;">
<img src="x.gif" style="border:solid 0px gray;">
</a>
Lets say x.gif's dimensions are 5x5 px. How can i make the hyperlink wrap tightly around x.gif? Right now the width is right but there seems to be padding on top and bottom of x.gif.
Try something like this:
<a href="#" style="border:solid 1px gray; display: inline-block;">
<img src="x.gif" style="display: block;">
</a>
If you need to support IE7 then you'll probably have to replace the inline-block with block in an IE7-specific stylesheet.
Try adding margin:0; padding:0; to your image.
This is MSIE specific behaviour. It's sensitive to whitespace around the <img> tag as well.
To fix it, you could just remove any whitespace around it:
<img src="x.gif" style="border: 0;" width="5" height="5">
Note that giving a zero-wide border a color and style doesn't make sense, so I removed it from the image's style as well.
This worked for me across the latest browsers I tested on including IE9
<a href="#" style="font-size:0;text-decoration:none;">
<img src="x.png" style="border:1px red solid;">
</a>
However while it looked pretty close in IE6/7 they produced a weird artefact on the bottom let corner of the border. I had to mimic the look in IE6/7 by cheating the border with background-color and padding. I also had to give the A element "layout" using zoom:1 to get it to behave (and loose some extra padding).
<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
<img src="x.png" style="border:none">
</a>
Annoyingly this didn't work with the "Standards" browsers so you'd have to use conditional comments and target low versions of IE with their own styles if you can't live with the artefact.
Related
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
Why won't three elements on the same line get vertically aligned at the same height when using floats?
It appears this is browser specific: the layout is broken in Gecko (Firefox), the right elements is placed on a separate line, whilst the layout is fine in Chromium.
HTML markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="center" href="center">center</a>
<a class="right" href="right">right</a>
</p>
</div>
CSS styles:
div{width: 100%;margin: 20px 0; }
div p{width: 100%; white-space: nowrap; text-align: center;border: 1px solid blue;}
a.left{float: left;}
a.center{}
a.right{float: right;}
This is the layout result in FireFox:
For convenience: take a look at this fiddler.
I know I have seen this problem before, but I just pull my hair and cannot find a solution for this!
Ok, it appears that there is a very simple workaround that actually "just works" for me. I post it as a question since I did not receive any (usable) answer for such a basic question.
The layout is fine in Gecko (Firefox) when the right element is placed before the center element in the html markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="right" href="right">right</a>
<a class="center" href="center">center</a>
</p>
</div>
I have no idea why this logic applies, but I am convinced that the Mozilla people will have perfect reasons why this behaviour is just right...
How can I remove or just don't display the border links in every anchor with image? By the way, browser settings is in compatibility mode. Answers from other question doesn't suffice to solve my problem. I guess because it only applies with lower version of IE.
EDIT:
I'm currently creating a Custom share buttons where my client requires me.
<div>
<a onClick="window.open('https://twitter.com/intent/tweet?original_referer=#shareLink#&text=#shareTitle#&tw_p=tweetbutton&url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Twitter_Tweet.png" />
</a>
</div>
<div>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=#shareTitle#&p[summary]=#shareDesc#&p[url]=#shareLink#&p[images][0]=images/Telos.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/FaceBook_Share.png">
</a>
</div>
<div>
<a onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=#shareLink#&title=#shareTitle#&summary=#shareDesc#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/LinkedIn_Share.png">
</a>
</div>
<div>
<a onClick="window.open('https://plus.google.com/share?url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Google_PlusOne.png">
</a>
</div>
CSS:
a {
outline : none;
text-decoration: none;
}
a img {
outline : none;
}
img {
border : 0;
border-style: none;
}
div {
float: left;
padding-right: 10px;
}
Here's what it looks like with IE10:
how about this, try to add something like this
<img src="blah" style="border-style:none;">
I usually use this as part of my normal defaulting set up in my CSS:
img {border: none;}
This doesn't effect the other browsers negatively and is easy to over-ride at a later point if you place this near the top of you general css file e.g
img {border: none;}
img.some-class {border: 1px double blue}
Where the increased specificity will add an ugly border to your image just like IE loves doing.
I was having the exact same issue with IE10. I've just set up a CSS rule for the a tag and set the text colour to white. This removes the blue line from around an anchor image.
<div>
<img src ='image.png' style="display: block" />
</div>
In Chrome, this renders a 1px margin on right side of the image and pushes wrapper div out. How to remove the margin?
Use the margin and padding in the style attribute as shown below:
<div>
<img src ='image.png' style="display: block; margin: 0px; padding: 0px;" />
</div>
In addition to this, you can also remove the border by adding the style "border:0px".
I have not tried it, let me know if it works.
Using CSS to remove only that will still make your website look different in other browsers. It's best to use a CSS reset to get the same formatting in all browsers.
CSS reset like this:
http://meyerweb.com/eric/tools/css/reset/
I saw this behavior in Safari as well. Try this.
<div class="group-holder" style="display: table;">
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
<img src="myimage1.gif" style="display: table-cell;" />
</div>
This worked for me.
<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" />
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>
What happens is that the image is displayed but the "Test span" message is printed on the right side of the image according to the margin-left:20px but the the margin-top doesn't do anything as the label shows towards the bottom of the image. I want it to show on the top like the image comes up but the label is showing at the bottom.
You can see it right here: http://jsfiddle.net/AMWjH/
Please help
You can change the vertical-align property to change how the elements display. I think that applying vertical-align: top to the image solves your problem:
Preview: http://jsfiddle.net/Wexcode/AMWjH/23/
Also, the reason why the margin-top and margin-bottom aren't affecting your span element is because span is an inline element. You can change it to inline-block or block to apply this margin (changing it to block will override vertical-align).
I'm not certain what you're asking for, but it sounds like you want the title to go to the right of the image, but aligned to the top. Am I understanding the question? Try this:
HTML:
<div class="titledImage">
<img src="/test.png" title="Hello" width="110" height="100" />
<p>The Title</p>
</div>
CSS:
.titledImage img {
float: left;
}
From what I gather, you want to wrap the text around the image. You just need to add an align attribute to you <img> tag:
<div style="padding: 20px;">
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" />
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span>
</div>
Why are you structuring your code this particular way? Without fully knowing your limitations I'd strongly recommend doing something like this: (of course, take the inline styles out and put them in a stylesheet).
<div style="height: 140px; width: 150px;">
<p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p>
<img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" />
</div>
Let me know if this solves it for you. There is no reason to use margins & negative margins. In this particular case margin or padding would work on the image, though. As a rule, avoid negative margins if possible and only use them when absolutely necessary.
I hope this helps.