Thanks in advance for helping me with this problem, it's driving me up the wall.
I have a site that renders fine with firefox, chrome, safari but on IE the vertical scroll bar is not functional.
I'm using sticky footer css to make sure the footer is pushed to the bottom and it works fine in the other browsers but I suspect it's affecting the height in IE
any help is appreciated.
The site is up at dev.rakozi.com
thank you.
Well firstly in Chrome you don't get scroll bars at all, no matter how high the window is (because the footer is set to fixed).
In ie 7 you get scroll bars that appear but scroll to nothing. In ie8 the footer doesn't stay fixed properly, but you don't get scrollable scroll bars (and for some reason the background gets corrupted on my computer if I adjust the height too much).
Can you clarify your question a bit more, what exactly are you trying to achieve?
Removing height:100% from the body in ie7 makes the scroll bars go away, if that helps?
Related
I am having an issue that seems to only happen on iPhones using Safari. When I scroll to the bottom of the page there always seems to be a little bit of text cut off and some weird flickering. You can eventually get to the bottom but flickering a screen up and down and you will reach the bottom of the screen. I am curious if anyone has experienced this issue before and if there is any way to improve this scrolling. Beside that I don't really have any special css applied to this div.
I found this article https://developer.apple.com/forums/thread/689995 and already tried applying
-webkit-overflow-scrolling: touch;
but it didn't really work for me. If you have any suggestions please let me know.
I am using bootstrap-affix to make a search bar fixed on scroll. It's working on the browser, however on mobile Safari it doesn't work as intended.
It does fix to the top, but only once the user lifts of their finger when scrolling.
How do I fix this?
Thanks
Add the following style to your element:
transform:translateZ(0)
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.
It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.
The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.
I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.
Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.
Thanks for any pointers folks - this one has me stumped!
Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.
As I know, the answer would be WebKit in CSS
Internet Explorer, Firefox and WebKit are three different things.
Webkit is used by Safari and Chrome.
moz is for Mozilla
o is for Opera
"normal" is for Internet Explorer.
You can read more about here
My site http://bit.ly/aokA4I has a search bar on the top right.
You can see it on IE7, FF, Chrome, Safari -- but not on IE8. It gets chopped off.
BTW if you happen to see it on IE8 just refresh the page and it will chop.
If I run IE8 on compatibility mode the search bar becomes visible.
Any ideas how to solve this?
Thanks!!
It's because IE8 is interpreting the nature of its parent container: header_widget_1. The sizing or formatting of this element is causing the <li> element to be clipped prematurely. If you have Google Chrome, you can right click the sidebar element you're asking about and choose "Inspect Element". This will show you what the elements are doing.
Edit: You also have a sizable horizontal scrollbar in IE7.
Edit 2:
You might try altering the height of your #header element to be the height you want. Since height is not expressed in the sidebar class, this may also be contributing to the problem.