I have a wordpress blog. In each post there are images that resides on Blogger server.
Now the problem is several of those images cannot be view on Internet Explorer 8. I do not know why, and the worst part is my client uses Internet Explorer 8 and he does not like any other browser.
Therefore, I need all the images to be viewable in Internet Explorer 8.
Here is the link and please try to help me out: http://bit.ly/AnPTCC
P.S: When i upload an image via wordpress it shows fine.
I couldn't pinpoint what was creating the problem but the override is to add height and width to the span element that contains the image.
<span clear: both; margin-right: 1em; margin-bottom: 1em; float: left; height: 200px; width: 135px;><img ... /></span>
Somehow span is getting crushed and couldn't show the image in IE8 Mode only but it works in IE7 and IE9+
Related
I got an issue that big video files (above 20MB) displays cropped. This happens only on firefox mobile browser (102.2.1). I made a POC on stackblitz. This is looks like on mobile device
I try to debug it and change some css but nothing worked. Does anyone has any idea?
This video element has css:
width: 100%;
height: 100%;
object-fit: contain;
background-color: black;
Page is not showing photos in a proper way in Firefox browser unlike other browsers which are working well , i'm using bootstrap 4
Chrome View
Firefox View
I solve the problem by adding class define the minimum width and height for images:
.img-nav{
min-width: 108px;
min-height: 64px;
}
it works well on all browsers.
For some utterly mysterious reason, the top left logo on my page doesn't show up on Chrome (works fine on FF).
Parent theme is "Renovate" with main plugins being Revolution Slider and WPBakery Visual Composer. Not sure if that matters.
Add this to your css for the page:
a[title="The Book Balancer"] img {
width: auto;
height: auto;
max-width: none;
}
You have some other styles on the page not playing nice with your logo.
I am having a strange issue with an img that only renders when the browser gets resized or dev tools are opened. The img has srcset and sizes attributes, and is inside a polymer template. It displays normally whithout the attributes, or outside of the Polymer shadow dom. The issue came up with Chrome 39, I believe, and is restricted to Google Chrome, where there are no polyfills at work anymore.
There are no errors in the console, naturally, status is 200 ok there. I am having no issues in Firefox or IE. My polymer version is 0.5.0, and I reported the issue at the Polymer github page, but maybe there is something else to it.
Lex
OK, I think I may have fixed this, though it is a bit silly that I had to do it this way. Originally I had written these with the combined declaration:
background: url(image-name.jpg) top center fixed;
When I write it long form it seems to work just fine.
background-image: url(image-name.jpg);
background-position: top center;
background-attachment: fixed;
If I have more time to look into it, I'll comment in any info I find on why this may be.
I've got a bizarre opacity issue dealing with IE8 & Websphere 6.1.
Got a very basic opacity setup where we have a modal type dialog box over-top of a certain screen. I put an opaque div over top of the screen in the background so the user can't click any of the controls but can see it, and then add the dialog box overtop & force them answer the question. Seemed very basic and was easy to do.
This is the css used to create the opaque effect described above:
.wipeOutDiv {
top: 0px;
left: 0px;
position: absolute;
width: 100%;
height: 100%;
background-color: #d9d9d9;
filter: alpha(opacity=70);
opacity: 0.70;
}
This is the CSS used to create the dialog box:
.dialogBox {
position: absolute;
width: 350px;
margin: auto;
z-index: 1;
background-color: white;
border-top:12px solid;
border-top-color: #ffd93f;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: #ffd93f;
padding: 8px;
top: 40%;
left: 40%;
font-family: arial;
font-size: 8pt;
}
This scheme works fine in development across all browsers. Locally on my machine it works fine and on the integration environment it also works fine. Thought I was in the clear.
However, once it goes to our ST environment or above, the opacity fails to work correctly with IE8. It still works fine for Chrome & FF but for some reason IE8 fails to work correctly. The div using the 'wipeOutDiv' CSS class becomes totally solid and it looks strange. I've tried tinkering with IE's browser mode and document mode, but nothing I've changed has made it work in those environments.
I've compared the DOM documents between environments and they are identical. The only variable left to me is the Application server itself, which in this case is Websphere 6.1. I have noticed one difference is environments where it works are served via http and environments where it doesn't are https. This seems like more of a coincidence than an actual root cause.
I'm pretty miffed. Anyone have any suggestions or similar experiences?
This ended up being an issue with IE enabling "Protected Mode" on a non-trusted site by the local machine. The IE opacity hack requires using an outside .DLL file and IE won't let that happen without protected mode being enabled. This was only solved when someone's machine worked correctly in production and they noticed they had the site added to the trusted list.