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; }
Related
I have successfully placed an image on the left like so:
<div class="Carl1">
<a href="https://rads.stackoverflow.com/amzn/click/com/1940412145" rel="nofollow noreferrer" target="_blank"><img class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />
<span><strong>Amazon</strong></span>
</a>
</div>
And CSS:
.Carl1 {
text-align: left;
}
.image-left {
float: left;
margin: 15px 20px 10px 0px;
border: solid 4px #fff;
}
However my text appears on the upper right of the image when I want it to appear under the image. What am I doing wrong?
Float needs to be cleared. Also you used span element, what is inline element by the default, you will need to set span element as block element.
Here is a JSfiddle link.
DEMO
HTML:
<div class="Carl1">
<a href="http://rads.stackoverflow.com/amzn/click/1940412145" target="_blank">
<img width="100" class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />
<span class="title"><strong>Amazon</strong></span>
</a>
</div>
CSS:
.Carl1 {
text-align: left;
}
.image-left {
float: left;
margin: 15px 20px 10px 0px;
border: solid 4px #fff;
}
.title {
clear: left;
display:block;
}
The float needs to be cleared otherwise the text will attempt to Wrap around the image
.Carl1 span{display:block;clear:both;}
Your question indicates you haven't quite figured out how floats work. The answers here will solve your problem today, but I suggest learning more about CSS positioning.
Here is a really great and classic tutorial on the subject. It’s old, but it’s good stuff. You will have a lot easier time with CSS afterwards, I promise.
Also, I’d specifically suggest that you don’t float this image by itself; instead, float the the whole container (.Carl1) and give it a width.
Compared to the other answers on this page, this solution is closer to expressing your intention in code. I assume you consider the whole Carl1 div to be essentially one object whose contents should appear together. Floating them as one is true to this intention :)
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
I am attempting to get two images to touch with CSS.
<div>
<image src="scroll><br>
<image src="scroll>
</div>
* {
margin: 0px;
padding: 0px;
}
body {font-family:Courier New, Courier New, Courier New;
background-image: url(background.jpg);
background-repeat: repeat;
width:100%;
height:100%;
}
When using this code I get
The reason they don't touch is because of line height. Images are inline by default, meaning the gap between text lines is still there. You have to turn this off. The better way is to make the images block, rather than inline:
img { display: block }
Or inline-block.
The other way is to set line-height: 0 on the containing div
Be sure that you are also using the correct tag. Images use <img> not <image>
Am not understanding which image are you talking about, no live example given, if it's the yellow 1 than why are you using <br>?
<div>
<image src="#" />
<image src="#" />
</div>
Also be sure you have resetted the default browser styles
* {
margin: 0;
padding: 0;
}
If required also try setting line-height: 0; as Nicholas told you to do..
either your image itself has extra spacing, or use this css:
img {
padding:0;
margin:0;
}
I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div>
<span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
<span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
Based on a proposed a solution for a similar problem here, you can do something like this.
Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services {
overflow: auto;
padding: 17px 0 9px 0;
}
.main-services li {
list-style: none;
float: left;
border-right: 1px dashed #E53B00;
padding-right: 14px;
}
.main-services li a {
display: block;
height: 78px;
color: #ED5D04;
text-decoration: none;
}
.main-services li a img {
vertical-align: middle;
}
.main-services li a span {
display: inline-block;
vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
<li class="service-1">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>Some text goes here</span>
</a>
</li>
<li class="service-2">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text here</span>
</a>
</li>
<li class="service-3">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text goes here but this text overruns</span>
</a>
</li>
</ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
Html Structure
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine.
But I need to make it work with out removing height & width.
EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb
CSS Only Solution
Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.
HTML
<a href="http://www.google.com/" class="ie7AFix">
<span style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</span>
</a>
CSS
a.ie7AFix {
display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}
.ie7AFix span {
border: solid #666 4px;
display: block;
position: relative;
z-index: -1;
line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}
.ie7AFix img { border: 1px solid red; }
Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.
With jQuery, the following will force all links to work, and have the 'pointer' cursor:
$(document).ready(function () {
$('a')
.click(function () {
window.location = $(this).attr('href');
})
.hover(function () {
$(this).css('cursor', 'pointer');
});
});
I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.
You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')
Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Just take out the SPAN from the IMG. The IMG element can be styled with a class just like any other element, therefore you don't need a span around it.
give the following CSS rules to the a element:
{
display:block;
overflow:hidden;
}
Ah another hasLayout quirk
it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..
Example workaround not a fix
CSS:
a {
display: inline-block;
background: #ff0;
max-width: 50px;
padding: 10px;
text-align: center;
}
img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}
HTML:
<a href="#">
<img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
<span>Some text and even longer</span>
</a>
The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net
May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Just wrap anchor tag inside Div or Span. Its working in IE7.
This way is wrong..?
From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)
http://jsfiddle.net/ajinkyax/v5KH5/3/
<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>
CSS:
.imgLink {display: block; width: 200px; text-align: center;}
See fiddle for code and demo
Fiddle: http://jsfiddle.net/rxcAb/29/
Demo: http://jsfiddle.net/rxcAb/29/embedded/result/
Perfectly working in IE7, IE8, FF, Chrome, Safari.
No changes in code: See below
<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>
An easy way to do this is:
<p>
<span><img></span>
<span> Some text <span>
<a></a>
<p>
p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`
If you have something like:
<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>
Simply add a style property to the anchor like this:
<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">
This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.