The following HTML/JS video gallery works fine on Safari, Firefox and Chrome, but fails to render properly in IE (who would have guessed)
http://vimeography.com/themes/journey/
The thumbnails have an absolutely positioned a element that should appear on mouseover
The video poster frame image has a span title that should be appearing over the top of the poster frame, but instead, the title appears to the right of the image.
How can I properly adjust this CSS for compatibility in IE8 and 9?
Related
Safari-specific:
I have got a page which is simply a background with an iframe centered in it. The iframe uses transform animations on :hover, and these cause the iframe content to make a little unwanted 1-pixel shift to the left only in Safari (tested in Chrome & Firefox).
I'm not sure what might be causing Safari to do this.
My iframe is width: 100%, so presumably the frame itself isn't
shifting, only the content.
The shift only lasts for the duration of the animation, not the hover.
The shift doesn't occur on the page that is the source of the iframe content, only once it is displayedcwithin the iframe.
Has anyone encountered this issue in Safari?
Page with Safari issue: http://www.bladesnpc.com/index-02.html
Content within iframe: https://perchance.org/blades-npc
I am managing the element centering with flex. Changing the flex-direction to column solved the Safari problem—although this particular fix only works because I am centering a single element on the page.
I'm using the latest Font Awesome to place SVG images as icons in my navigation bar. They are supposed to remain hidden until you hover on the navigation item, at which point the text slides over and the SVG fades in.
This works fine in Chrome.
In both Internet Explorer 11 (on Windows 7) and Edge (on Windows 10) I am getting this weird effect where the SVG appears at the top of the viewport and waits there until the text sliding animation finishes, at which point it plops into place next to the text.
I've tried all sorts of troubleshooting, but I just can't lay a finger on what this is doing, and why. How can I work around this rendering issue?
My site
Remove position: relative from the class .link-container.
It's not needed tested it with IE 11 with the dev toolbar.
Then it works fine position: relative is messing up the position.
I have one image and that is getting showed as per below CSS
#imaged{
display:inline;left:-220px;position:relative;bottom:-40px;
}
In Chrome, it is displaying as per bottom and left position.
But in IE, the image is getting displayed '-40px' downwards. Buy if i do css as
#imaged{
display:inline;left:-220px;position:relative;bottom:0px;
}
then it works in IE but not in Chrome then..
Any suggestions?
I have a small image/arrow that appears under my menu items on hover. The problem is that IE and Firefox position the image differently than Chrome does. What is the problem and how might I fix this?
Here is my applied css:
img#menu-item-25{position:absolute;right:600px;top:92px;}
img#menu-item-26{position:absolute;right:510px;top:92px;}
img#menu-item-27{position:absolute;right:390px;top:92px;}
img#menu-item-30{position:absolute;right:220px;top:92px;}
img#menu-item-29{position:absolute;right:105px;top:92px;}
img#menu-item-28{position:absolute;right:15px;top:92px;}
I use a gradient background color for selected or hovered menu items it works fine in chrome,FF,opera,ie7,ie8 . but in ie9 the background of the elements appears in the right of the element but text keeps in place this is the first problem.
the second problem i faced is the rounded corner it works fine in chrome, FF, opera but in ie9 the corners are ok but the background of the box was an image but it appears white!!!
the third problem is that of shadow
i apply shadow to the divs containing images it works fine in all browsers but ie9 offset the whole div instead of applying shadow and opacity change on mouse over increased the problem by adding black parts in the side of div that doesn't have shadow???????
when i heard that ie9 supports css3 i knew that this is unbelievable ie will still be my Nightmare!!
I'm afraid of future appearance of the website in ie 9 so i add this
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/>
when i used IE=7 or IE=8 the problem still as it is
but know it appears better after adding that line but with no support for rounded corner.
How are you telling IE9 to implement the corners and gradients? Are you using the IE filters (like I assume you're using for 7 and 8)? Or are you actually using CSS3?
If you're using filters, try making IE9 just use CSS3. You can put the filters into their own stylesheet and just use conditional comments to target IE8 and below for them, so IE9 ignores the filters altogether, that way you know they're not interfering.