I have an icon image and text like the following. The code source of everything is:
<img src="...." align="absmiddle" /> My Title Here
The problem is that the icon is not aligned vertically with the title in Chrome compared to firefox.
I think the absmiddle doesn't work at all! Is there any solution? I don't want to use a table with 2 columns to fix this issue.
Try this solution:
<img src="img.png" style="margin-bottom:.25em; vertical-align:middle;">
vertical-align: middle; may be what you're looking for. I wouldn't necessarily assume WebKit knows from "absmiddle".
The align attribute of has been deprecated and is not supported in HTML 4.01 Strict or XHTML 1.0 Strict.
You should use CSS to achieve this effect. You could try the following code:
<img src="...." align="absmiddle" style="vertical-align:middle;" /> My Title Here
or
<img src="...." align="absmiddle" style="vertical-align:50%;" /> My Title Here
For me, vertical-align:middle; alone was not enough (on IE at least and with a textbox beside).
What works very well is along with border-style: none;:
<img src="...." style="vertical-align:middle; border-style: none;" />
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...
I have a few jpeg images on this page that, for some reason, do not show up in either Firefox or Chrome, but fine in IE 8 and 9. If I click the image URL in Firefox browser source, it shows up just fine.
http://www.chemoutsourcing.com/banners.php
The paths are correct, using a mix of both full and relative urls, and am using the IMG tag correctly. I'm very baffled at the simplicity of this.
<div style="margin:5px 0;">
600px by 160px<br />
<img src="http://www.chemoutsourcing.com/images/banner_ads/mainheader_2013_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
600px by 160px<br />
<img src="images/banner_ads/mainheader_Pharma_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_2013_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_Pharma_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
I used inspect element on chrome, and it shows the following inline styles attached to all the img elements:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 600px 160px;
That can't be right.
The best solutions occur by accident.
I tried viewing this page in Chrome Private mode, and they appeared fine. So that means...
The browser extension AdBlock was reading the images' subfolder "banner_ads" in the source and treating them as 3rd party content to block.
Once I rename the folder, the issue should go away on its own.
Change directory name to ensure the word 'ads' isnt there. For example: if image source is src=images/ads/your_pic.png then rename the folder 'ads' to anything but not 'ads'. for example - src=images/visitor_image/your_pic.png
This should work, if not then its not about browser, its about your re-directions.
p.s. ignore syntax mentioned here, use your own.
Cheers
Had the same problem. Figured out the picture not showing correctly was named .JPG while others were named .jpg. Renaming apparently fixed the problem for me.
<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.
Simple code:
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
<img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Two images have margin and padding of 0 but there's still a gap between them.
How to avoid this behavior?
And YES that's not a mistake, the whole thing has to be in A tag.
Example:
http://jsfiddle.net/fqrfU/
I believe it's the line-height that's causing the problem. Check it out.
On a different note, I know you said it was intended to be that way but it's actually invalid(?) HTML to have the div tag inside of the anchor. Try using spans instead.
The two images are displayed inline. This means the baseline of the image is aligned with the baseline of the text. Below text there usually is some more space to account for letters like pjgq that go below the baseline.
Just making the images display: block; resolves this in your scenario.
This page describes your situation quite clearly: http://devedge-temp.mozilla.org/viewsource/2002/img-table/
add in both display:block;
Demo: http://jsfiddle.net/fqrfU/22/
You can float and clear them:
img {
clear: both;
float: left;
}
http://jsfiddle.net/lukemartin/fqrfU/11/
<a href="#">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
Are you having a problem in IE?
Try putting both images tags on the same line in the HTML, w/o any spaces in between...
Simply your css by doing,
.image, .shadow {
margin: 0;
padding: 0;
display:block;
}
http://jsfiddle.net/fqrfU/43/
What Bogdan said, or:
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img
src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
</div>
</a>
See, the whitespace between /> and the second <img is actually rendered, which gives the space between the two pics.
-- pete
This worked for me just now:
img
{
display: block;
}
<img ...>
<p>..</p>
Without setting align="left" on img,p will start from a blank line.
<img ... align="left">
<p>..</p>
But after setting align="left",p will come up around img,why?
I guess that <img> align attribut will work like CSS float property. It makes your image float. If you want <p> to stay under <img> so you should do it like this.
<img ... align="left" />
<div style="clear: both;"></div>
<p>..</p>
Float image to left or right using CSS
HTML uses the align attribute:
<img src="image.jpg" align="right">
XHTML uses an inline style:
<img src="image.jpg" style="float: right" />
The proof:
HTML img align Attribute
The align attribute of <img> is
deprecated, and is not supported in
HTML 4.01 Strict / XHTML 1.0 Strict
DTD.
Use CSS instead.
CSS syntax: <img style="float:right"
/>
Setting align html attribute to left or right on an image is equivalent to css floating the image.
Read about inline and block elements. I don't remember any good site (in English) with explanation of difference between these two types right now, so try to Google it.
Setting align="left" (this should be converted to its equivalent in CSS: float: left) makes img element floating. Once again read about floats.
Perhaps it's better to try :
<p><img align="left" /></p>
Or may be :
<img align="left" />
<p style="clear:left"></p>