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.
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.
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.
I am using the MediaElement.js Wordpress plugin in order to play MP3s on my homepage.
But on Internet Explorer 8 I have trouble with the plugin.
Instead of the play button and the volume button, it only shows a blocky rectangle.
I have tested on two different computers with the same result.
You can test it here: http://www.alatarmusic.com/noise-reduction/
It works fine with Firefox and with Safari on my iPhone. And I know, that other sites show up fine in my Internet Explorer. For example, the player on MediaElementJS.com looks correct. It seems, something is wrong with my homepage?
But what could be the reason for this?
Was having the same issue in IE7 as well as IE8:
The fix for me was making sure the filter style was reset:
filter: none;
Your style-sheet contains the following CSS:
.post .content button{background:linear-gradient(top,#ffffff 0%,#e9e9e9 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
Beautified:
.post .content button {
background: linear-gradient(top,#ffffff 0%,#e9e9e9 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
}
The last property, -ms-filter, is a proprietary CSS extension by Microsoft, which is only parsed by Internet Explorer.
The color #ffffff is white, and the color #e9e9e9 is light gray.
Because the effect does only work in Internet Explorer, only IE users will see a light-colored rectangle instead of a play button.
Setting the filter to none gives back the button:
This markup does probably effect other buttons in your Wordpress blog, so removing it might not be an option. Instead, you can add filter:none to the CSS for .mejs-button; e.g.:
.mejs-button{
filter: none;
}
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+