We Keep Coding

Css styling in Internet Explorer versus Chrome

I`m working on the website based on blogger platform and I have a problem with css styling.
The website is: http://wibracjezdrowia.blogspot.com/p/opinie-klientow.html
Problem: In Chrome browser everything is working okey but when I check in Internet Explorer than there is a problem with position of logo and green sign "GABINET TERAPII NATURALNYCH" - I mean that there are not in one row as they appear in Chrome.
Can anyone help to solve this problem?
Thanks! :)

the problem is the size of #header div.
You can change the max-width of this div to a lower value and it should be fine:
#header {
float: right;
width: 100%;
max-width: 690px;
color: #444;
margin: 0;
padding: 0;
}
I've changed the max-width from 735px to 690px and it worked well.

It's not much of an answer to the direct issue, but have you considered using Bootstrap to more easily style the elements of your website for desktop and mobile use?

Just before </head> (closing head tag) add the following code to target only IE:
<!--[if IE]>
<style>
*, *::before, *::after{box-sizing: content-box}
</style>
<![endif]-->

Hover effect doesn't work on IE9

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;
}

Preventing overscroll in Internet Explorer 11

I have a site has a <div> on it that is vertically scrollable. That works well. I am also hiding the scrollbar, and that also works well. CSS is essentially
.scrollable {
overflow-y: scroll;
-ms-overflow-style: none;
}
I am currently having a problem, though, with it in Internet Explorer 11 and Windows 7 on a touch enabled display. When a user hits the top of bottom of the scroll, the window bounces (ie, there is overscroll). While this would just be an annoyance for most users, this is running fullscreen in a kiosk, so the overscoll allows the desktop to peek through (not just the browser background).
I have been unsuccessful at figuring out a solution to this. touch-action (prefixed and not), eg
html, body, .scrollable {
-ms-touch-action: none;
touch-action: none;
}
doesn't seem to do anything, nor do
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('MSPointerMove', function (e) { e.preventDefault(); }, false);
This jsBin shows the problem.
So, what is the proper way to prevent overscroll in IE11 / Windows 7.

Thinking outside the box (see what I did there) would giving the parent element - body, section or even another div a background colour mitigate the main issue of the desktop showing through?
Otherwise have a look at the
-ms-scroll-chaining: none;
property from http://msdn.microsoft.com/en-us/library/ie/hh772034(v=vs.85).aspx which looks like it might fix your problem - though I have no way to test it myself.

The overscroll bounce effect is not limited to Internet Explorer 11 and can be seen in even simple applications, such as Notepad.
To disable the effect, set the following registry key to "0":
HKEY_CURRENT_USER\Software\Microsoft\Wisp\Touch\Bouncing

Sorry should have tested before posting answer.
I tested the jsbin problem and solved it like this. Assign these styles to the scrollie class:
.scrollie {
max-height: 200px;
width: 300px;
overflow-y:scroll;
word-wrap:break-word;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

The problem can be solved with the word-wrap property in css3.I also addded a overflow-x:hidden just to be sure.
.scrollable {
overflow-y: scroll;
-ms-overflow-style: none;
word-wrap:break-word;
overflow-x:hidden;
}
Here you can read more about word-wrap here-
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
If you didnt understand any part of my question, or this didnt solve your problem, please comment and tell me so as i am open to answering more questions.

Try using:
.scrollable {
overflow: auto;
zoom: 1;
}
or
.scrollable {
overflow: hidden;
zoom: 1;
}

I believe I fixed it by adding the following to your CSS:
body {
overflow: hidden;
}
You can see the results at this updated jsBin

jScrollPane loading dynamic content breaks page in Safari

I'm loading an rss feed box and applying jScrollPane to it. Works great on my other sites, but for some reason this one is breaking only in Safari. It loads the page correctly and then suddenly snaps to just the rss box all alone. I've tried .delay() and (window).ready thinking it was the timing, and .css(position), to no avail. Any ideas on why it's doing this?
it's here: miariddle.com/webclient/hundredstories/blog.html
scrollpane script:
<script type="text/javascript">
$(document).ready(function() {
$(".blog").jScrollPane();
});
</script>
CSS:
.blog {
width: 530px;
height: 250px;
position: absolute;
top: 380px;
left: 330px;
margin-left: 20px;
padding-left: 10px;
}
html/script that loads the feed:

I experienced similar issue, and here's what worked for me:
jQuery(window).load(function() {
jQuery('.blog').jScrollPane();
});
That is, use (window).load instead of (window).ready as you indicated in your question.
In my case, I had to use jQuery (not $) because of the WordPress script compatibility issues. But in your case it may work with $ as well.
Hope this helps.
P.S. Another thing I noticed, it seems that the .blog div of your site contains only rss feed. jScrollPane is applied to that div, so naturally it applies itself to the content of the div.

Internet explorer css problem. (Hidden padding)

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.