Live site- http://www.orourkehospitality.com/hostedContent/williamsinn/
Hover effect doesn't work on IE9 but working perectly on Chrome, Safari, Mozila etc.
Check screenshot below.
Any idea what is the issue & how to fix? I will provide code if needed(that is too long for that reason i skip now).
Add specific width and height for those images:
img.hover-images-flourish {
width: 110px;
height: 25px;
}
this worked for me
<img class="hover-images-flourish" src="http://www.orourkehospitality.com/hostedContent/williamsinn/wp-content/themes/williamsinn/images/hover-flourish-top.png" style="margin-top: 63px;width:100px:height:100px">
I have added
width:100px:height:100px in your style
or you could
change it in css too
.hover-images-flourish {
width: 100px;
height: 100px;
}
IMPORTANT:
if the above fix doesn't work
add
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
It seems that if you remove these properties from hover_pack.css
there is a style applied for IE only which seems to cause the issue:
.ie a.b-animate-go img{
width:100% !important;
height:100% !important;
}
Related
I have created the following list item which works fine in chrome and every other browser that I have tried. It, however, does not work in IE.
I have created this application using the vue framework and have had multiple issues with Internet Explorer that have been able to be solved but I have been unable to find anything where other people have had a similar issue to this.
For some reason, once an item within the list has been selected the list then works as normal, but on the initial load of the page, the list is as shown in the images above. Also, the list is unable to scroll in IE until an item within the list has been selected.
Here is the list being CSS.
ul{
background-color: white;
padding-top:10px !important;
padding-bottom: 10px !important;
height: 100%;
max-height: 450px;
overflow: auto;
}
And the code used for the scroll bar that works fine in other browsers.
.col-4, .col-8{
padding:0;
overflow: hidden;
overflow-y: -moz-hidden-unscrollable;
}
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#-moz-document url-prefix() {
.list-group{
margin-right: -16px;
}
}
::-webkit-scrollbar {
display: none;
}
Any help will be much appreciated.
Only IE still honors overflow rules on the html element. try changing
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
to
body{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
To determine which Emulation mode IE11 is using in your development environment use the Emulation tab of the f12 dev tool.
If you are upgrading an old application to the newer framework, remove any presentation attributes (align, scroll, background etc) from the html tag.
I'm having a problem with iPhone safari bottom bar (the one with back and forward buttons, new tab button and other stuff). In my app, I have an absolute positioned button at the bottom of the screen which is 100% width and almost the same height as the safari bottom bar and my button is that way behind the safari bar and not visible. Is there any way to know if the safari bottom bar is there so that I know when to move my content or even better is there a way to remove it completely?
I tried this:
<meta name="apple-mobile-web-app-capable" content="yes">
And also the minimal-ui tag but it didn't work.
I had the same issue. I don't think there is a way to completely remove the bar.
Although I thought about listening the screen getting resized (because that's what's happening). So I just had a JS/jQuery function that (in my case) changed the min-height of a block to screen height.
$(window).resize(...); // For example
Also adding transition in css would make things look much better (although transitions in mobile safari are also working weirdly if I recall everything correctly)
Hope this helps somehow.
If you find a smarter way to do this, please, let me know!
may be this works
#root {
position: fixed;
height: 100%;
top: 0;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.pane {
flex: 1;
height: 100%;
width: 100%;
}
.bar {
flex-shrink: 0;
height: 50px;
}
<html>
<body>
<div id="#root">
<div class="container">
<div class="pane"></div>
<div class="bar"></div>
</div>
</div>
</body>
</html>
I have a styling issue where I'm trying to center a wide image relative to it's container. The problem is that the image's width is unknown so I can't do the left:50%, margin-left:-###px; trick because I don't know what the negative margin value will be.
I also can't use text-align:center; because the the image is wider than it's container.
To make matters more complicated, the container's width is also unknown.
I'd quite like to avoid using JavaScript for this but it feels like a big ask with just CSS.
Anyone know of any magical solution here?
UPDATE:
Required support: IE8+, Chrome, Safari, Firefox, Android.
I have tried a couple of the examples provided by you lovely people which have not worked (they would work in most situations, but not mine).
#Vince - I tried your display block trick which works great when the window is wider than the image but when the window is not wider than the image, it effectively becomes 'left-aligned'.
See fiddle example. I have added another container to simulate a narrow mobile device window. Obviously this won't be a hard-coded width as in the fiddle. Also, the img width will not be hard-coded as in the example but I'm trying to simulate the situation that's presented to me.
http://jsfiddle.net/7n1bhzps/1/
Excuse the hideous colours.
UPDATE 2:
Accepted dfsq's answer. Contrary to above, it does not need to support IE8 because the problem is at mobile resolutions. IE8 is not a mobile browser so the need to support this is not necessary.
Thanks all.
Set the container's min-width to any value you feel necessary. Set the image to display as block and use the margin: 0 auto; trick to center it
HTML:
<div id="contain">
<img src="http://i.imgur.com/xs8vh.jpg"/>
</div>
CSS:
#contain {
min-width: 50px;
}
#contain img {
display: block;
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/j21a8ubo/
You can make use of CSS transofrm: translateX(-50%) to shift the image of unknown width. This technic allows to center image of any width relative to container.
.wrap {
margin: 0 0 10px 160px;
width: 300px;
height: 75px;
border: 3px red solid;
position: relative;
overflow: hidden;
}
.wrap:hover {
overflow: inherit;
}
.wrap img {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="wrap">
<img src="http://lorempixel.com/600/75/food/3" alt="">
</div>
<div class="wrap">
<img src="http://lorempixel.com/100/75/food/4" alt="">
</div>
Check for support http://caniuse.com/#feat=transforms2d
If you set X's CSS to margin:0px auto; it should center it within the parent container.
Sometimes centering doesn't work, but this can also be a browser-related issue.
If you can adjust the HTML, you could put the element to be centered in a cell in a <table> element, with a cell on either side of it. This is how it was done in IE8 and earlier, though it's not recommended now.
If unknown width of object and its container then use
.center-block{
display: table;
margin:0 auto;
float:none;
}
I'm using the javascript ticker code found here.
In Chrome and Safari, the ticker displays where it should:
In Firefox, it displays below the 2012 Entrants section:
Complete code here. Can anyone help me out?
Try
#ticker-parent{
width:800px;
float:right;
}
Just apply the following CSS, that should fix in all the browsers:
#ticker-parent {
display: inline;
position: absolute;
width: 960px;
}
Basically just put the marquee inline...
I have created a little slider using jQuery UI, and it's works fantastically in Firefox, exactly as it should. However, in IE, it seems to put padding in between objects. Take a look and you'll see:
http://www.grant[deletethis]unwin.co.uk/slider/slider1.html
I understand that different broswers have different page margins and paddings set automatically, so I tried to use:
* {
padding: 0px;
margin: 0px;
}
But the problem persists.
The Question:
how can I eliminate the gaps between the pictures on my slider (In IE)?
Your page is rendering in Quirks Mode, because you aren't using a doctype (..that will trigger Standards Mode).
Your first line is currently this:
<html>
Add a doctype as the very first line, such as the HTML5 doctype:
<!DOCTYPE html>
It will be magically fixed.
Please add a valid Doctype because your website is being viewed in Quirks mode in IE.
<!DOCTYPE html>
<html> .... </html>
Additionaly
Remove float for the img element itself and set display: block;
.scroller_item {
float: left;
height: 238px;
width: 192px;
}
.scroller_item .image {
display: block;
height: 238px;
width: 192px;
}
I suggest using a reset to put all the styles back to zero in all browsers. Using that should fix your problem.
Eric Meyer's Reset
Try adding:
*
{
padding: 0px;
margin: 0px;
border: none;
}
#sliding_section
{
overflow: auto;
}
You'll have to tweak the * properties, as this will be bad for a production site, but it might work.
Try removing the "float:left" in your ".scroller_item .image" definition in your CSS class.