I've created a horizontal slider layout on my site at http://www.blueleafstudio.net/portfolio/
Viewed in any browser except IE it works fine, however, in IE 11 (haven't tested in other versions yet) the whole thing is broken as the scrollbars still show up on the nested section elements even though the width is set to 0.
Removal of overflow-y: auto; from the css results in everything working fine in IE except you can't scroll to the bottom of the div to see the rest of the content!
I really don't understand why IE is doing this and all other browsers do something else. Can anyone suggest a fix, or at the very least an explanation!
Thanks for reading :-)
I Solved this myself (kind of) by adding and removing and adding overflow-y: auto as necessary with jQuery.
I still have absolutely no idea why IE was behaving differently so if anyone has an explanation that would be appreciated...
Death to IE forever.
Related
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
I'm creating a new website for my webshop - And I have this css problem ...
The system is made on the prestashop platform, but this is basic CSS so that doesn't matter.
On the CMS pages, I'm having a problem centering the page, i've tryed using the -tag, margin: 0 auto, margin-Left/right auto, 100% width and so on.
The problem isn't that the text isn't centered, it's that the browser doesn't realises it untill you change something with the inspector or change the browser width.
So if you update the site, the content jumps into place.
(if you don't see the problem, try pressing the same menu item again - sometimes it works sometimes it doesn't. The sites with most problems are: /betingelser-3, /udtalelser-6 and /om-os-4.)
The problem is only in Safari and Chrome (webkit) Everything is fine on IE, firefox, Opera.
http://forsejt.dk/mackabler.dk/content/betingelser-3
I think there is just too many div's and css-styles so the browser times out? If that can happen:) I've tryed on a Macbook pro 15", Macbook air 13" and Mac pro.
Any Css tricks for this?
So I'm not quite sure why this is, but it seems like the overflow:hidden in .row is the culprit. Try removing that or overriding it and it seems to work.
My guess would be that it gets in the way of webkit calculating the width properly for some reason?
There's also some other suggestions on a similar question here: CSS centering not working with margin auto and overflow hidden
But it seems to me that the accepted solution there won't work for you, as it looks like all of your floats are properly cleared.
Try adding:
text-align: center;
to #columns in the css.
I already tried out a lot of suggestions that were made in related threads on Stackoverflow. However it doesn't seem to have worked. Please check my site http://popundernetwork.com - the footer works correctly on Chrome, Firefox,etc. But on IE 8, the footer not only floats right in the middle, but also prevents people from entering details on the form input screen.
I have already tried the position:absolute; bottom:0; commands as well as clear:both on the footer div. This has still not fixed the issue on the IE 8 browser.
Any help is greatly appreciated.
It's issue is not fixed in any browser if you ask me. (no pun intended)
Your body is becoming shorter than page height when you make you footer absolute.
Remove the position and the padding entirely from your footer and it should solve everything.
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?
http://blog.helpcurenow.org
I'm working on the development of this blog and it seems ie7 and ie8 both are displaying the content so that the container seems to be ignoring the "margin:0px auto;" rule.
It could be something else I'm just not getting, but either way the effect is that the content (as well as the navigational links) are floating to the left for some reason.
The strange thing is that a) it is not occuring at all in Firefox or Safari - OK, is that really so strange?? and b) it is not isolated to ie7, it seems ie8 is also doing this.
I HAVE NO CLUE WHY - ANY IDEAS??
Thank you!!
Your page is rendering in Quirks Mode in IE because you have a comment:
<!--HOSTURL:blog.helpcurenow.org--><!--HOSTURL:blog.helpcurenow.org-->
before the <!DOCTYPE ...>. The DOCTYPE needs to be the first thing in the document, or IE will ignore it.
If you remove that comment, or move it after the DOCTYPE, it works perfectly.
Get rid of the "<!--HOSTURL:blog.helpcurenow.org--><!--HOSTURL:blog.helpcurenow.org-->" comment at the top. The doctype needs to be the first thing after the HTTP headers, or IE goes into quirks mode (and doesn't understand the "margin: auto" jazz).
RichieHindle - Thanks so much ! I was adding a static home page to my site and made the mistake of linking to my custom stylesheet before the get_header() call ! This obviously caused exactly the problem you described. Spent 2 or 3 hours on this before I saw your post.
Thanks again !
While the above is obviously the ideal answer, for some older and more obscure browsers the only fix is to use a text-align center reset. For example if you want to position a 960px container in the center of the window you can put text-align center on your 100% width wrapper and then text-align left on the 960px container.