images won't display in IE9 - html

The image code below works fine in Mozilla, Chrome and Safari but doesn't display in IE9.
It is saved as an image in photoshop for websites and I specified the height and width.
When I write it like this without the slash before "D:"
<img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
it works in IE but then it doesn't display in Mozilla.
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
this code works fine in all browsers apart from IE
<img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
this one works fine in all apart from Mozilla
this is the whole div and there is not css style yet.
<section class="container">
<div class="image_carousel">
<div id="foo2">
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
</div>
</article>
</section>
Do you think it is the extension problem and I should save the image as GIF not jpg. ?
and if I wanted to create separate code for IE would it work if I make comments like these below in my html file? and put the image code inside those comments for IE9?
<!--[if IE]>
<![endif]-->

Shouldn't the image call be:
<img src="/obrazki/game.jpg" alt="game" width="1100" height="619" />
?
Or better yet:
<img src="/obrazki/images/game.jpg" alt="game" width="1100" height="619" />
Where /obrazki would be where you have the pages/scripts to "call" your images..

What about linking to the image on a relative path:
<img src="./link/to/image.jpg"/>

ok, lets do an old and dirty solution...serve up the images for non-ie(s), then serve up the images for ie(s) via conditional comments. (sidenote: there's a few ways to do this, like using a background-image on a wrapper element around the image, but since you are relying on img elements, i'll stick to that method. so
<section class="container">
<article>
<div class="image_carousel">
<div id="foo2">
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
<!--[if lte IE 9]><img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" /><![endif]-->
</div>
</div>
</article>
</section>
that should work...in theory. you may have fouc or positioning issues, though i doubt the fouc...it's hard to tell without seeing it live, with the rest of the document.

Related

Fallback of <picture> element not triggering

I'm trying to make a picture element work but it doesn't load the fallback img
<div class="card">
<picture>
<source type="image/png" srcset="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555">
<img class="card-img-top scale-on-hover" alt="Fallback" src="http://carscan.test/storage/images/no_image_found.jpg">
</picture>
<div class="card-body">
<h6><strong>Location</strong>: Door LB</h6>
<p><strong>Type</strong>: Window Crack <br>
<strong>Severity damage</strong>: Medium</p>
</div>
</div>
In my browser I get a 403 on the source (aws) element, but then I expect it to go to the fallback image. But instead it shows me the little img icon together with my alt text
When I remove the source item out of the element my img element is shown without any problems. Am i forgetting an element or a small character?
Try this as an alternative
<p>
<object data="https://company-dev.s3.amazonaws.com/carscan/https://lorempixel.com/250/250/transport/?66555" type="image/png">
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
</object>
</p>

Removing spacing in Images

How do you remove unneeded space around images in HTML?
One of my images is coming to far away from the text, and it is messing up the look of the website. There is nothing wrong with the CSS I am using, but I believe because that there is too many HTML tags around it, it has a large space.
Please limit solutions to basic CSS and HTML, as per I can properly understand how it works.
EDIT: I am sorry, I was a bit vague about what my challenge was. I am using the Bootstrap Library, and have been looking a this following template:
http://www.markups.io/preview/varsity/
I really like the template, and I am occasionally taking code snippets out of it. I used the top bar, and replaced their logo with a different image. The image looks fine on desktop, but when a go on my mobile phone, it comes out what too low covering some important content. Anything you guys can do?
EDIT 2:
I have attached two photos of the look and what the problem looks like. The first one is the Desktop view (which is great), and the second one is the mobile view (which is too low). I don't have any more information... from the original post to EDIT 1, EDIT 2, that is all the info that I have.
Remove the spaces and line breaks between images:
<img src="http://placehold.it/20x20" /> <img src="http://placehold.it/20x20" />
<img src="http://placehold.it/20x20" />
to:
<img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" />
Put this in your css file:
img {
margin: 0;
}
or use this in-line style in your html file:
<style type="text/css">
img {
margin: 0;
}
</style>
You can use the letter-spacing propriety of CSS
img {
letter-spacing: -2px;
}
I think you should remove space between your code!
so you must change this code
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
to this code (add comment code)
<img src="1.jpg" /><!--
--><img src="2.jpg" /><!--
--><img src="3.jpg" />
or to this code (literally remove space)
<img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" />
Since the template uses twitter bootstrap,
try adding img-responsive class to your image
Example, from:
<img src="1.jpg" />
to
<img class="img-responsive" src="1.jpg" />

SVG as object data-uri doesn't render in Chrome

In the linked fiddle, the example works in both IE 9 and FF; however, it does not work in Chrome, for reasons that elude me. Anyone have any ideas?
http://jsfiddle.net/pkjdzcj5/7/
<div class="test-wrapper">
<h3>Object element with 'data' construct</h3>
<p>For some reason data url is failing (in Chrome), but we can demo image fallback here.</p>
<div class="test-icon icon-color" style="width:400px; height:400px;">
<object type="image/svg+xml" width="320" height="240" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTkxLjE3LDgxLjM3NGwwLjAwNi0wLjAwNGwtMC4xMzktMC4yNGMtMC4wNjgtMC4xMjgtMC4xMzQtMC4yNTctMC4yMTYtMC4zNzVsLTM3LjY5LTY1LjI4MyAgIGMtMC42MTEtMS4xMDktMS43NzYtMS44Ny0zLjEzMy0xLjg3Yy0xLjQ3LDAtMi43MzEsMC44ODctMy4yODUsMi4xNTNsLTAuMDA0LTAuMDAyTDkuMzEyLDgwLjUyOWwwLjAzNiwwLjAyMSAgIGMtMC41MDUsMC42MTgtMC44MiwxLjM5Ny0wLjgyLDIuMjU3YzAsMS45ODIsMS42MDcsMy41OSwzLjU4OCwzLjU5aDBoNzUuNzY3djBjMS45ODIsMCwzLjU4OS0xLjYwNywzLjU4OS0zLjU4OSAgIEM5MS40NzIsODIuMjk3LDkxLjM2Miw4MS44MTQsOTEuMTcsODEuMzc0eiBNNTAuMDM1LDc5LjYxN2MtMi44NzQsMC01LjIwMS0yLjI1Ny01LjIwMS01LjEzYzAtMi44NzQsMi4zMjYtNS4yLDUuMjAxLTUuMiAgIGMyLjgwMywwLDUuMTMsMi4zMjUsNS4xMyw1LjJDNTUuMTY2LDc3LjM2LDUyLjgzOCw3OS42MTcsNTAuMDM1LDc5LjYxN3ogTTU1LjE2NSwzNC4yNXYyOC4yOTloLTAuMDAyICAgYzAsMC4wMDUsMC4wMDIsMC4wMSwwLjAwMiwwLjAxNmMwLDEuMTczLTAuOTUsMi4wOTQtMi4wOTQsMi4wOTRjLTAuMDA1LDAtMC4wMDktMC4wMDEtMC4wMTQtMC4wMDF2MC4wMDFoLTYuMDkzICAgYy0xLjE3NCwwLTIuMTIzLTAuOTIxLTIuMTIzLTIuMDk0YzAtMC4wMDUsMC4wMDItMC4wMSwwLjAwMi0wLjAxNmgtMC4wMDJWMzQuMzI2Yy0wLjAwMS0wLjAyNi0wLjAwOC0wLjA1MS0wLjAwOC0wLjA3NyAgIGMwLTEuMTE3LDAuODY1LTEuOTk2LDEuOTM1LTIuMDc4di0wLjAxNmg2LjI4OHYwLjAwMWMxLjE0OSwwLjAwNywyLjA3NCwwLjg5NywyLjEwMywyLjAzOWgwLjAwNXYwLjA1M1YzNC4yNSAgIEM1NS4xNjYsMzQuMjUsNTUuMTY1LDM0LjI1LDU1LjE2NSwzNC4yNXoiLz4KPC9nPgo8L3N2Zz4=">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
</object>
</div>
<pre>
<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-alert.svg" type="image/svg+xml">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
</object>
</pre>
</div>
Was mislead by the appearances here....
The <object> element itself works just fine in Chrome, just not in an iframe. I did a brief search for bugs, but couldn't find anything.
Have updated the fiddle, http://jsfiddle.net/pkjdzcj5/9/, which behaves pretty much as expected.
<object type="image/svg+xml" width="100" height="100" data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-alert.svg">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
</object>
But, to be clear: data URI works just fine in Chrome

Images Not Appearing in Firefox/Chrome; Ok in IE

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.

How do I deal with this page resize issue in Safari for windows?

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.