I have used Accordion and Slideshow on my site.
http://www.delightbranding.com/
when you click Play. For some reason the scroll bar appears shifting the page.
Guess i am missing setting height for some div. Please help.
This one seems to be the bad apple:
<div class="control-next">
When the "Play" item is selected, this div expands below the HTML content, causing your page to grow.
Remove the height from .control-next css class
.control-next {
position:absolute;
right:0;
top:201px;
bottom:201px;
/*height:432px;*/
}
this is only happening for me in IE9 (I'd wager all versions of IE) and only when my browser window is short.
I tend to add a CSS rule to my html tag of
overflow-y: scroll;
Which places the scrollbar on the page always so that longer content doesn't make the browser behave inconsistently.
Not sure if this will help you in this case, but worth a try.
Related
Let's say we have 2 <div> elements, one being the parent, other being the child.
Is there a way to make only the parent <div> scrollable on Chrome and only the child <div> scrollable on FireFox?
This might sound a bit weird, but this is something I really need to implement on my project, because FireFox is acting really weird on that matter.
Thanks in advance.
UPDATE:
Here's a simplified description of the project I mentioned.
I'm intending to design a personal HTML template with page transitions. So each page will be displayed/hidden with a transition effect when user clicks on a menu item.
I'm using a very simple transition effect I wrote myself. So, <div id="main"> is the parent and some <div class="inner-page"> are the children. Needless to say that, based on their content, each .inner-page has different height.
For #main I've set overflow-y: scroll;. On Chrome it works flawless. So, with every .inner-page being displayed, the length of the scrollbar is updated based on the height of the active page.
On FireFox however, it's a different story. The length of scrollbar doesn't change and is always the same,
based on the length of the page which has the most and longest content. So when other pages (which have fewer content) are active, there's always a huge empty scrollable area at the bottom of that active page.
An alternative solution I tried (which worked) was to set overflow-y: scroll; for .inner-page instead of #main to solve the scrollbar length issue. But then I had to hide the scrollbar, because with each page transition, the scrollbar comes and goes with the page as well, something that doesn't look good at all.
Follow this CodePen link to see a simplified version of my code and how the scrollbar behaves differently on Chrome and FireFox.
Check the browser on page load, Here and add set the overflow of div hidden for Firefox.
overflow: hidden;
Lets say you added class ".firefox-scroll"
.firefox-scroll { overflow: hidden; }
How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content?
I can of course set overflow:scroll to the body, but it wouldn't look nice.
I am using bootstrap, but I guess it is a general question.
overflow: overlay
Building on avrahamcool's answer, you can use the property overflow: overlay.
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
Source: MDN
This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.
Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.
However, you can do a fallback of auto:
.container:hover {
overflow: auto; /* fallback */
overflow: overlay;
}
Demo: jsfiddle.net/NKJRZ/385/
Can I Use also has an interesting note:
This value is deprecated and related functionality being standardized as the scrollbar-gutter property.
However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.
You can create a container that have a fixed width, and give the content the same width (same static width - not 100%).
that way, when the content overflows the parent, the scroll will not push the content but will flow above it.
using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.
Check out this simple Demo
EDIT:
Here I show the difference between setting static width, and %.
Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:
html,body {
height:101%;
}
or
html {
overflow-y: scroll;
}
The best way to do this is assign value 'overlay' to overflow property. This works fine.
overflow-y: overlay;
In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
i'm having a very strange problem with the wordpress template.
i'd like to place 2 divs besides each other like this:
<div style='float:left;'>
left div
</div>
<div style='float:right'>
right div
</div>
normally this works as it should - both divs should stick directly to each other -
but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels.
i searched the whole .css for it but couldn't find out :((
it's just a fact that it must be something with the default css.
anyone knows what is causing this - some fix?
thanks
Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.
Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.
Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.
Float both left or use inline-block. You can also just float the first one left.
I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.
I think the problem is probably with parts further on in your code. May I suggest clearing the floats:
Html:
<div class="clear"></div>
CSS:
.clear {
clear: both;
}
The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.
Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).
Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html