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.
Related
Why does the rendering with DOCTYPE have the unwanted effect of having the additional spacing after the first image. The unwanted space is in the position where the 0px height image would be?
Without DOCTYPE: https://codesandbox.io/s/image-taking-space-in-block-layout-forked-76oyl?file=/index.html
<html>
<body>
<div style="background-color: red;">
<img
alt="asd"
src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
width="500"
height="500"
style="height: 200px;"
/>
<img
alt="asd"
src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
width="500"
height="500"
style="height: 0px;"
/>
</div>
</body>
</html>
With DOCTYPE: https://codesandbox.io/s/image-taking-space-in-block-layout-forked-rlsct?file=/index.html
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red;">
<img
alt="asd"
src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
style="width: 500px; height: 200px;"
/>
<img
alt="asd"
src="https://www.wallpaperuse.com/wallp/0-1226_m.jpg"
style="width: 500px; height: 0px;"
/>
</div>
</body>
</html>
When DOCTYPE is not specified, the browser renders it in "Quirks mode", which is a backwards compatible mode for older pages designed for ancient browsers. It thus renders things as was intended (as best as the browser can guess) in times of yore.
So, basically, when you get that extra offset, that is the correct HTML rendering according to W3C specs.
I suggest that images that should not be displayed are set to hidden or a similar solution, rather than setting their height to 0px.
Original Suggestion before edited question (when React was involved):
I think you'd be better off with code that only renders the image you want to see (I infer this from your original example). Something like this:
const App = img_src => (
<div>
<img
alt="asd"
src={img_src}
width="500"
height="500"
/>
</div>
);
Not sure why, but none links over the images in my posts works unless it's set to position: absolute;
Summary:
No problems with neither src or href
The pointer cursor does not appear
Nothing happens when clicking on the image
The links works when I set a to position: absolute;, but then everything is misplaced and so on.
I have tried shortening it up to make it easier to debug.
Shorten HTML
<a href="#.jpg">
<img src="#.jpg" alt="Alt text" width="1200" height="800">
</a>
(Shortened) Complete HTML
<div class="clearfix"></div>
<div class="holder blacktext bildeserieholder">
<div class="container">
<div class="row">
<div class="col-md-12 centertext">
<img class="aligncenter size-full wp-image-512" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-513" src="#.jpg" alt="text" width="600" height="900" />
<img class="aligncenter size-full wp-image-514" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-515" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-516" src="#.jpg" alt="text" width="600" height="900" />
</div>
</div>
</div>
</div>
</div>
I have tried:
Using cursor: pointer to the link attribute.
Removing all img classes
Removing all CSS on both images and links in Chrome Inspect Element
It's hard to find out where I have done something wrong, so I would really recommend checking out the page: http://goo.gl/DqXAlC
Maybe not relevant, but I will add this information anyways regarding what I am using:
Wordpress
Bootstrap
Types (custom posts etc plugin)
The images are being uploaded with Types within each posts in a WYSIWYG editor called "bildeserie". In my single PHP I have the following which echos the images:
<?php echo(types_render_field( "bildeserie", array( 'raw' => true) )); ?>
Do you have a working solution or any ideas?
Note: The problem is with the images below the header and all the text.
Solutions:
.holder img {
pointer-events: none;
}
The above is disabling the link on the image, commenting it out will make everything work.
Second solution:
a {
display:inline-block;
}
That also fixes your problem (by expanding the link to the dimensions of the image).
I would imagine that the img has a size and the link does not have a size unless set to absolute. If the a doesn't have a size, you aren't clicking on the a you are clicking on the img, give the a a size and see what happens
You should disable this line in your style.css file:
.holder img {
pointer-events: none;
}
Here's my code
<div class="table">
<div class="tr">
<div class="td">
<h1 class="logo-fill">
<a href="#" title="Logo">
<img alt="logo" src="./images/logo.png" />
</a>
</h1>
</div>
<div class="td">
<a href="#" title="AdSpace">
<img alt="adspace" src="./images/adspace.png" />
</a>
</div>
</div>
</div>
For some reason, the second image (adspace.png) is not displaying at all. If I remove the entire img tag and replace it with text, the text is displayed. Alternativly if I change the img tag to:
<iframe src="https://clients.ragezone.com/out.php/display/show_custom?id=48" scrolling="no" style="padding: 0px; overflow: hidden;" width="468px" height="60px" frameborder="no"></iframe>
Apparently that works as well. adspace.png is simply a 468px x 60px green box.
My money would be on the fact that you have an adblocker in your browser. Try changing class names and img name.
Adblocker plugins search for certain keywords in the code and block the page elements based on that.
In your image source path I saw one [dot] miss placed that may be a one problem.
This is your code
<img alt="adspace" src="./images/adspace.png" />
And try with this one
<img alt="adspace" src="../images/adspace.png" />
And other problem is your image name I also faced to this issue your image name is adspace.png and you added alt="adspace" and wrap it with link tag having the title with Adspace so the reason is some of plugins in your browser block all the images and divs starting with "ads / ad" this is called adblock plugins.
So you can easily change your img name and change everything starting with "ad" then you can find some useful fixing. Other way is you can remove the adblock plugins from your browser.
And please check your network too some networks admin can block ads too.
After reading a number of answers to this problem, it seems none of them have solved the problem. I'm trying to send and email via VerticalResponse and they use html. The message is created stacking multiple images, each with links, but it's supposed to look like one image. Problem is that the preview looks good and so does viewing it in a webpage, but email display shows white space between each image. See http://jsfiddle.net/xMW7N/42/ for code. Please help!
<body>
<div style="text-align: center; ">
<span style="font-size:8pt;"><img align="normal" alt="Facebook - MetricRunFest" border="0" height="126" hspace="-20" name="FB" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Top.jpg?0.7593426643870771" style="width: 600px; height: 126px;" title="Facebook - MetricRunFest" vspace="0" width="600" /></span><br />
<span style="font-size:8pt;"><a href=website"><img align="normal" alt="Metric Runners - Online Photos" border="0" height="205" hspace="-2" name="MetricRunFest - Online Photos" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank.jpg?0.8384064519777894" style="width: 600px; height: 205px;" title="Metric Runners - Online Photos" vspace="0" width="600" /><br />
<img align="normal" alt="website" border="0" height="127" hspace="-2" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank_UpsideDown%209.jpg?0.44395816628821194" style="width: 600px; height: 127px;" title="website" vspace="0" width="600" /></a></span><br />
Different browsers treat white space differently. It's good to write everything on 1 line if possible, with no needless spaces or newlines.You can try like this:-
<span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>
There is a breaking space between every image which is part of the problem. Also, try giving the images display: block style.
http://jsfiddle.net/xMW7N/47/
Everything I have seen on html emails, and from the experience I have in doing them myself, the best option is using tables, unforunately. It can really help with all layout problems.
I'd recommend reading http://24ways.org/2009/rock-solid-html-emails for a lot of tips, including an entire section on images. Especially using img {display:block;} for Hotmail and align such as <img src="image.jpg" align="right"> instead of floats.
Not that you are necessarily doing those parts wrong, but they are good to remember in general.
I tested the following code using firefox and Safari.When I zoomed the page in firefox, the text as well as the picture was scaled..However,in Safari,when I zoomed on the page, only the text could be scaled,the pictiure remained the same size as the original one..How can I fix this so that in Safari both the picture and the text can be scaled?
<div id="head1">
<img src="images/homepage_09.png" width="397px" height="162px" alt="Nopic" title="" id="img_logo"/>
<img src="images/homepage_04.png" width="322px" height="275px" alt="Nopic" title="" id="img_pic1" />
<p id="txt_1">Scientific name "crocothemis order – mantodea"</p>
</div>
You should try with inline style that could be resized.
<img src="images/homepage_04.png" style="width:322px;height:275px;" alt="Nopic" title="" id="img_pic1"/>
If it still doesn't work, putting your images as some div's background should be a good workaround as divs are redimensioned by Safari's zoom afaik.