What is wrong here?
There is just no way I can get the div (the gray area behind the video) to expand with the content... I get scrollbars instead?
Please help Thanks, Marcus
Try scrolling over the video gray box area. It's the grey area 'main' that I want to expand instead of scrollbars showing.
http://bestofyoutube.com/go/cssprob
Remove the height of your videoarea, the reason the scrollbars are showing up is because the vote area is pushing it down due to the floating. That blank space on top is exactly how much extra scroll area you're getting.
Well, for starters.. you have invalid markup.
Invalid markup is the #1 reason for things acting strangely.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.peekpod.com%2Fminnie&charset=%28detect+automatically%29&doctype=Inline&group=0
However, the reason you have scrollbars is that you're using overflow: auto, if you don't want them then use overflow: none;
However, when using overflow: none; things are even more messed up do to all your floats.
Related
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
I have a page with some divs that have a width of 800px and margin: 0 auto
to center them.
One of the divs contains an image and the rest of the div is empty, in IE8+ it looks
as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,
is there a quick solution for making the empty area of the div not take space?
the reason I have to keep the blank area is that the fixed with and margin: 0 auto make
the picture align with the other divs that have the same width.
thx in advance!
Try setting line-height:0 and font-size:0 for that element.
It should make the element occupy no space..
just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.
another thing that is possible is to make one of the DIVs' position absolute and then it's
outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take
space in the normal flow.
Yes it does...just put ; after them
I just had the same problem on IE7 and used the answer
line-height:0;
font-size:0;
in the CSS corresponding to that div
I have defined a tag with a CSS attribute "overflow" set to "scroll". This is giving me both the vertical and the horizontal scroll bars. I only want the vertical scroll bar. What should i do?
You could try using the
overflow-y: scroll;
This will give you a vertical scroll-bar...
Using
overflow-y: auto;
will only show the scrollbar if it is necessary.
Try using "overflow-y: scroll;" instead. It's CSS3, but as far as I know, it's supported by every modern browser (IE6+, FF, Opera, Chrome/Safari/WebKit/etc.).
A quick explanation of the various overflow/-x/-y values, for those not familiar with them:
visible – The default. Content which does not fit "overflows" the box, usually appearing over or under adjacent content.
hidden – Content which does not fit is "guillotined" — cut off at the edges of the box.
auto – Content which does not fit causes a scroll bar to appear. Does not necessarily cause both scroll bars to appear at once; if content fits horizontally but not vertically, only a vertical scroll bar will appear.
scroll – Similar to auto, but scroll bar(s) appear whether needed or not. AFAIK, mostly used to prevent centered content from "jumping" if a scroll bar needs to be added to dynamic (e.g. AJAX) content.
overflow:auto;
I realize this is a very old question but I stumbled across it today. If, like me, you only want the y-scrollbar and then only when it's needed, I found this works:
.myclass {
overflow-x: hidden;
overflow-y: auto;
}
Cheers, Mark
overflow-x:hidden;
overflow-y:scroll;
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.