I would not consider myself a CSS newb (noob?) but this problem has me stumped.
I have a navigation header area with the position set to initial. In IE, however, the page is acting as if the navigation area is set to position:absolute and the page content bumps up and starts underneath the navigation rather than right below it. There is an older CSS declaration which does set the navigation to area to absolute, but this is (should be) overridden.
I have tried adding !important to my "initial" declaration.
I have tried changing it to "static", but then you can't click any of the navigation links.
I could go back and remove the old absolute declaration (and probably will) but I'm genuinely curious as to how to overcome this behavior in IE. I have tested in all other browsers including Android and OS and it displays as expected, however ALL versions of IE, including IE11 on Windows 8.1, give this navigation area absolute positioning.
You can view the problem live here: http://inrvu.flywheelsites.com/sign-up-pricing/ The "Get Started Now" should start below the nav, not at the top of the page. You'll need these credentials to view un: flywheel pw: bizarre-villain
I appreciate any help!
Related
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
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.
So Bgiframe is a huge lifesaver - we have used it to tackle the IE PDF issue where is would hide our css dropdown menus. However, we have run into an issue - our css menus have a max height, and once that height is filled, they begin to use a scrollbar within the menu (think the Facebook notifications). bgiframe does an excellent job making sure that the menus themselves appear in front of the PDFs in IE, but the scrollbars in the menus do not - they and they alone are still hidden. We have inspected the elements to make sure that the menus and the bgiframe are the same, correct width, and they are - but the scrollbar is still hidden. This might be a bgiframe issue or an IE rendering issue, not sure. Nowhere - and I mean nowhere - have we been able to find anyone else with this kind of problem. Anyone have any ideas?
Use jscrollpane instead of the browser default scrollbar. Also, make sure bgiframe covers the scrollbar area explicitly.
I am facing a problem with my navigation drop down menu hidden behind container class in IE(internet Explorer) browser but its working fine with all other browser.
I am stuck with this issue for 3 days. I tried too much to change css of my container class and my navigation class but failed :(.
I tried even display and visibility properties in my css but failed...
Please give me hint how i can fix this problem
here is my site
http://napodfw12.wildapricot.org/
if you open it in all other browsers than IE drop down of menu bar will display but in ie it is hidden,
i am uploading screen shot of this problem too.
IE is very annoying about z-index. I found that creating an IE stylesheet and setting the container and nav position to relative, then adjusting the Z-index seemed to work for me.
I'm developing a website in hebrew, and everything is fine in Chrome and Firefox (as expected), but I have an issue with IE.
When I place
direction:RTL;
unicode-bidi:embed;
the whole page gets shifted to the right, and a horizontal scrollbar appears.
On initial load of the page, IE loads it scrolled to the right side, so it looks good (no need for manual scrolling), but the horizontal scrollbar is there.
All the other elements are placed correctly and I can't find the issue. There is no element that would overflow outside the main wrapper, and the scrollbar is there only if direction:RTL is placed.
I can notice that the scrollbar appears near the end of the loading, but I don't know if there is some way to step through the loading of the page (something like breakpoint/debug/step).
I tested it on 3 different computers (IE8/XP, IE8/Win7, IE9/Win7, and also with http://netrenderer.com )
Some help/guidance would be greatly appreciated.
You can check it at:
http://southbeachsmoke.co.il/
http://southbeachsmoke.co.il/products/category/1