I've nothing something strange in Firefox. I am using the current version of Firefox on Mac OS X but I think this can be reproduced on Windows machines, too.
I am embedding images on the website via the img tag using the alt, width and height attribute. The values fit the actual image size.
But:
When opening the page information and choosing media Firefox tells me the following:
Dimensions: 0px × 0px (Skaliert zu 500px × 400px)
why is this happen?
On some images Firefox shows "Dimensions: 450px × 294px"
Could you tell why Firefox is doing this? And is there a way to correct it, if necessary?
Related
I'm using the new gatsby image plugin, and StaticImage. I have got a few images on the website, all works perfect normally beside one that only has the black background
(source of black, change the bg color attribute to red for example change the view to red)
The<picture> tag has 0X0 pixels
Another weird thing is the auto-created div container has a max-width of 47px, though the image is bigger than that (in all rest cases the max-width actually corresponds to the image dimensions)
relevant code
// js
<div className="advertising">
<StaticImage
className="advertising-img"
src="../images/advertising.png"
alt="advertising"
/>
//scss
.advertising {
position: relative;
margin: 123px 162px 150px 536px;
.advertising-img {
width: 260px;
height: 230px;
position: absolute;
left: -460px;
top: -15px;
}
page lookout (for understanding the CSS a little bit and show another picture that working..)
any help will be appreciated, thanks in advance! :)
edit
live site - https://catsh-landing-page.netlify.app/
The request to advertising image is blocked by the browser, as you can see by opening the dev tools.
In addition, the fact that is working on my mobile phone (screenshot below):
Makes me think that the image is blocked by the browser itself or by some extensions (AdBlock, etc) because of the name to avoid advertisers or publicity by default.
Try changing the name of the image or try disabling the extensions.
I have a website https://drygon.ca/ , there is a photo "Photo a day" in the homepage, it displays in all the browser and devices except Chrome in Windows. I tried the Chrome in Linux, it works too.
I inspect the element, the hyperlink is there, wonder why it won't display? If I click other tab, then click homepage again it 'll display.
The website is written in reactjs, photo is stored under firebase.
Windows 10, Chrome 59.0.3071.86(64-bit)
The "photo a day" image loads for me in Chrome. I am on Version 58.0.3029.110 (64-bit).
However it takes extremely long for it to load in Chrome vs Firefox(about a solid minute), your issue may be to how large the image is 3648 X 2736(current image). You are reducing the width with CSS however the browser still processes the entire size of the image. Attempt to use a image tool and reduce the actual image to the desired size.
Revised:
After taking a second look at your site, I believe the issue going here is how chrome is handling the CSS rule of flex. The site has the flex rule throughout, particularly on the Photo A Day and it's container with id of #dayphoto. The flex items inside this container(card-header and the day photo) are being made to be the same height, however since the image is being loaded from an absolute path, it isn't added(with it's height) until later. Thus the .card-block container around your image is getting the same height as the .card-header, additionally your image has it's height set to 100% which it inherits from .card-header. Read on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In a nutshell, change the css height on your image to:
#dayphoto img {
width: 640px;
height: auto;
padding: 1rem;
}
The image is actually always there/loaded, you just can't see it!
When I use png/jpg image as background of an element of my html document, it's not compatible with Internet Explorer 6, 7 and 8. How can I fix this cross browser compatibility issue ?
Alhamdulillah ! I have solved my issue.
When I use the background property with the value of rgba colour like
background: url("images/cross.png") no-repeat scroll left center rgba(0,0,0,0,),
the code is not compatible with IE 6,7 and 8. It doesn't matter whether the image is png or jpg.
So, we have to use the property without colour or with hex colour code like
background: url("images/cross.png") no-repeat scroll left center;
or
background: url("images/cross.png") no-repeat scroll left center #000;
Then it'll be compatible.
Thanks
On one of our Joomla 2.5 websites the images here
http://rodoyo.com/flatnews/index.php/benefits/event-organiser-benefits
appear correctly in firefox but are thumbnails in Chrome
Why is that?
have checked that the image sizes are correct in the backend
The problem is happening in all WebKit based browsers I currently have at hand i.e. Chrome (Win/OSX/IOS) and Safari (Desktop & Mobile)
In your bootstrap.css you will notice this:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Specifically the max-width: 100% — I think you will find that as it's set to 100% of the container (in this case the surrounding <td></td>) that the problem lies in the width of the <table> columns.
Given that max-width percentages are used to calculate the width from the size of the containing block, not the element they are attached to the WebKit browsers are doing the right thing and Firefox apparently isn't (anyone with better insight please chime in here).
You could fix this by specifying the width of the first <td> like this:
<td style="width:102px;">
Or a better approach would be to not use tables for layout, as that's not what they are meant for.
Read more about using here and here.
I have an image I use as a ruler between content. It's a simple 1px x 1px image that I stretch out depending on the size I need.
If I stretch it to, say, 250px wide and leave it at 1px in height, it will not show up in IE (I'm currently on 10, but it doesn't show on the earlier versions either). It does, however, show in Firefox and Chrome. If I raise the height to 2px, it will show in IE, but it is too thick in the other browsers that could view it at 1 px in height.
example:
<img src="images/blackline.jpg" style="margin-top:35px; margin-bottom:20px;" height="1" width="275"><br>
NEW TEXT ITEM HERE<br>
<img src="images/blackline.jpg" style="margin-top:35px; margin-top:20px;" height="1" width="275">
Anyone know a way to get this to work properly?